Graphics Reference
In-Depth Information
4. The last thing we need to do is create
THREE.BoxGeometry
and add it to
the scene using the material created in the previous step:
var boxGeometry = new
THREE.BoxGeometry(5, 15, 5);
var box = new THREE.Mesh(boxGeometry,
material);
scene.add(box);
5. In step 3, we referenced a DOM element with the simple-fragment name. In
your HTML page, you should define it like this:
<script id="simple-fragment"
type="x-shader/x-fragment">
varying vec3 vNormal;
uniform float delta;
uniform float mNear;
uniform float mFar;
const float PI =
3.14159265358979323846264;
void main()
{
float depth = gl_FragCoord.z /
gl_FragCoord.w;
float depthColor = smoothstep(
mNear, mFar, depth );
gl_FragColor = vec4(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);
}
</script>
If you want to know more about how this fragment shader works, look at the
explanation in the
How it works...
section of this recipe.
