Vertex Shaders

Read Basics of WebGL (Drawing a Cube) first.

Vertex Shaders define vertice positions in 3D-space. That's just a function, that defines gl_Position value by applying different transformations to it.

Sample code

// current vertice position {x,y,z,w}attribute vec4 aVertexPosition;// final vertice position with all transformations applied,// that will be passed to Fragment Shadervarying vec4 v_positionWithOffset;// Parameters passed from Javascript loopuniform float slide;uniform float aspect;void main(){  // float array of 4 elements, same as [slide,slide,slide,1]  vec4 scale=vec4(vec3(slide),1);  // float array of 4 elements, same as [aspect,1,1,1]  vec4 aspectRatioFix=vec4(aspect,vec3(1));  // vertice position, multiplied with matrices of scale and aspect ratio  gl_Position=aVertexPosition*scale*aspectRatioFix,  // vertice offset, that will be passed to fragment shader  v_positionWithOffset=gl_Position+vec4(1,1,1,1);}

Passing parameters to VertexShader

Search for Uniforms at open.gl for further reading.

There're 3 ways to pass parameters.

• attribute are parameters, that won't change. Good for vertex buffers.
• uniform are meant to change over the time. Good for passing transformations.
• varying are parameters, that's shared between Vertex and Fragment Shaders.

Applying transformations

Every vertice position is defined as {x,y,z,w}, where w is a common denominator, that's used to achieve fast coord transformations by multiplying number of square matrices with original vertice coordinates.

We don't change vertice position buffer, because it's slow when being run inside Javascript loop, we pass transformation matrices instead and multiply vertice positions with transformation matrices inside a Graphic Card's GPU, because that's what GPU made for.

Good explanation can be found here: open.gl.