Graphics Reference
In-Depth Information
var attributes = ...; // filled in in
next steps
var uniforms = ...; // filled in in
next steps
var psMat2 = new THREE.ShaderMaterial({
attributes: attributes,
uniforms: uniforms,
transparent : true,
blending : THREE.AdditiveBlending,
vertexShader: document
getElementById('pointVertexShader').text,
fragmentShader: document
getElementById('pointFragmentShader').text
});
Instead of using the standard
THREE.PointCloudMaterial
object, we
use
THREE.ShaderMaterial
. The
transparent
and
blending
are
properties standard material properties and behave as you'd expect. We'll
explain the other properties in the upcoming steps.
3. In step 2, the material referenced the attributes variable. In this step, we'll
configure this variable:
var attributes = {
pSize: { type: 'f', value: pSize },
pOpacity: { type: 'f', value:
pOpacity }
};
Our
attributes
object contains two properties. The first one points to the
array that contains the sizes of the vertices and the second one points to the
array that contains the opacity values. The
f
value for type means that it is
an array of floats. As we reference this attribute from our shader material, we
can access the individual values in our shaders.
4. In step 2, we also defined some uniforms. The
uniforms
object are also
passed into the shader but are the same for all vertices:
