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.

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.

Good explanation can be found here: open.gl.