Graphics Reference
In-Depth Information
gl_PointSize = 2.0 * pSize * size *
( scale / length( mvPosition.xyz ) );
gl_Position = projectionMatrix *
mvPosition;
}
</script>
A vertex shader is used to determine the position and the size of a vertex. In
this shader, we set the size of the vertex and the point and use the
pSize
attribute in the calculation. This way, we can control the size of the individual
pixel. We also copy the value of
color
and
pOpacity
to a
varying
value
so that we can access it from our fragment shader in the next step.
6. So far, the size of the point could be configured directly from Three.js. Now,
let's look at the fragment shader and do the same for the color and opacity:
<script id="pointFragmentShader"
type="x-shader/x-fragment">
precision highp float;
precision highp int;
uniform vec3 psColor;
uniform float opacity;
varying vec3 vColor;
varying float vOpacity;
uniform sampler2D map;
void main() {
gl_FragColor = vec4( psColor,
vOpacity );
gl_FragColor = gl_FragColor *
texture2D( map,vec2( gl_PointCoord.x, 1.0
- gl_PointCoord.y ) );
gl_FragColor = gl_FragColor * vec4(
vColor, 1.0 );
}
</script>
The fragment shader is only a small program. What we do here is the follow-
ing:
