Graphics Reference
In-Depth Information
abs(sin(delta + 0.7*PI) +
cos(normalize(vNormal).x)/2.0) - depthColor
,abs(sin(delta + 1.0*PI) +
cos(normalize(vNormal).y)/2.0) - depthColor,
abs(sin(delta + 1.2*PI) +
cos(normalize(vNormal).z)/2.0) - depthColor,
1.0);
}
Without going into too many GLSL details, roughly the following steps are taken:
1. First, we determine the depth of this fragment. You can see this as the dis-
tance of this fragment from the camera.
2. As depth is an absolute value, we convert it to a scale of
0
to
1
using the
smoothstep
function. As this function also takes the
mNear
and
mFar
uni-
forms as its parameters, we can control how much the depth affects the color
of a fragment from JavaScript.
3. Finally, we define the color of the fragment by setting
gl_FragColor
. The
gl_FragColor
variable is of type
vec4
, where the first three values determ-
ine the RGB value of the color and the last one defines the opacity. This is
all on a scale of
0
to
1
. For each part of the color, we use a function that
includes the
vNormal
vector and calculated
depthColor
variable to gener-
ate a color.
This is just the tip of the iceberg of what you can do with custom fragment shaders.
In the upcoming section, you can find some resources to learn more about this.
There's more…
Creating custom fragment shaders is rather difficult. It'll take a lot of experimenting,
a good grasp of math, and a lot of patience. There are, however, a number of re-
sources available that can help you understand fragment shaders and learn from the
work of others:
• Lots of fragment shaders can be found at
http://glslsandbox.com/
• On the Shadertoy site, you can experiment fragment shaders using different
kinds of input:
https://www.shadertoy.com/
