Lights and Custom Shaders - Three.js - page 239

Creating a custom vertex shader
When you want to create advanced 3D effects with great performance, you can
choose to write your own shaders. Shaders are programs that directly affect what
your results look like and which colors are used to represent them. A shader always
comes as a pair. A vertex shader determines what a geometry will look like, and a
fragment shader will determine the resulting color. In this recipe, we'll show you how
you can use your own custom vertex shader in Three.js.
Getting ready
WebGL and GLSL, which is the language in which you write shaders, are supported
by most modern browsers. So, for this recipe, there aren't any additional steps you
need to take before you can walk through this recipe. A good resource on GLSL is
always the khronos website ( http://www.khronos.org ); they have a great tutorial ( ht-
tp://www.khronos.org/webgl/wiki/Tutorial ) on WebGL that can help you better under-
stand what we're doing in this recipe. For this specific recipe, we've provided two ex-
amples. The first one is the one we'll use in this recipe, and you can view this one by
opening 05.09-custom-vertex-shader.html in your browser.
This example, as you can see in the previous screenshot, shows you
THREE.BoxGeometry , where the position of its individual vertices have been re-
placed using a vertex shader. A more advanced example can be found in
05.09-custom-vertex-shader-2.html .