Lights and Custom Shaders - Three.js - page 243

These are all the steps you need to take to create and use a custom vertex shader
combined with a simple fragment shader from Three.js.
How it works...
Let's look a bit closer at what is happening in the vertex shader used in this recipe.
Before we start, we'll give you a very short introduction to the types of qualifiers that
you can use with the variables in your shader code:
• The uniform qualifier: This is a global variable that can be passed in from
JavaScript to the shaders. You can change this value in each rendering loop
but can't change the value in the shader itself.
• The attribute qualifier: This is a value that can be specified for each in-
dividual vertex. The attributes qualifier are passed on into the vertex
shader.
• The varying qualifier: This is used to pass data between the vertex shader
and the fragment shader. It can be written into the vertex shader but can only
be read in the fragment shader.
• The const qualifier: This is a constant value and is defined directly in your
shader code. This value can't change during the execution of your shaders.
The first thing we do is define some parameters:
varying vec2 vUv;
uniform float delta;
uniform float scale;
The vUv vector is a varying variable and is a value that is passed into the fragment
shader and is required for the basic shader to work in Three.js. The other two para-
meters are passed in as uniforms from the JavaScript you saw in the previous sec-
tion. Let's look at the main function, which is the function that is exectured for each
vertex:
void main() {
vUv = uv;
vec3 p = position;
p.z += sin(2.0 * p.y + delta) * 5.0;