Graphics Reference
In-Depth Information
6. If you've looked at the example from the
Getting ready
section, you can see
that the colors change constantly. This happens because we update the delta
property, which is passed into our custom shader, in the
render
loop of this
page:
function render() {
renderer.render(scene, camera);
uniforms.delta.value += 0.005;
requestAnimationFrame(render);
}
How it works...
To understand how this shader works, let's look through the code step by step. Let's
start by looking at the variables used in this shader:
varying vec3 vNormal;
uniform float delta;
uniform float mNear;
uniform float mFar;
float PI = 3.14159265358979323846264;
The
vNormal
object is a variable that is passed in from the standard Three.js vertex
shader and contains the value of the normal vector applicable to this fragment. The
three uniform values are passed in from the JavaScript, as we've seen in the previ-
ous section. The PI variable is a constant that doesn't change over time. Each frag-
ment shader should set the
gl_fragColor
vector, which determines the color and
opacity of each fragment. For this shader, we set the vector as follows:
void main()
{
float depth = gl_FragCoord.z /
gl_FragCoord.w;
float depthColor = smoothstep( mNear,
mFar, depth );
gl_FragColor = vec4(
