Lights and Custom Shaders - Three.js - page 244

p.z += cos(2.0 * p.z + delta / 2.0) * 5.0;
p.z += cos(2.0 * p.x + delta) * 5.0;
p.x += sin(p.y + delta / 2.0) * 10.0;
vec4 mvPosition = modelViewMatrix *
vec4(scale * p, 1.0 );
gl_Position = projectionMatrix * mvPosition;
}
The main thing that happens here is that we change the position of the vertex
based on the passed-in delta and some sin and cos functions. The result is that
each vertex of our model is displaced in some manner. Finally, we need to set the
gl_Position variable with the new position of our vertex.
There's more…
When you look for information on custom shaders, you'll most often see examples of
fragment shaders. In many use cases, a vertex shader doesn't need to change the
positions of the vertices. When it does, it is often for effects such as smoke or fire.
There aren't that many good vertex shaders examples out there. The following two
sites, however, provide a good starting point if you want to learn more about vertex
shaders:
• A good resource to learn more about vertex shaders is the shader tutorial
from lighthouse3d at http://www.lighthouse3d.com/tutorials/glsl-tutorial/
shader-examples/
• There is also an online vertex shader editor available at kickjs.org, which you
can find at http://www.kickjs.org/example/shader_editor/shader_editor.html
See also
• As a vertex shader is always accompanied with a fragment shader, it is good
to also understand how they work. In the Creating a custom fragment shader
recipe, we explain the steps you need to take to set up a custom fragment
shader.