Perspective Vertex Shader

Now we have a much more realistic shader that can color and animate multiple objects in a scene with a realistic coordinate system.

234                 var vertexShaderSource   = "attribute vec3 position;"
235                                            + "attribute vec4 color;"
236                                            + "uniform   mat4 modelViewMatrix;"
237                                            + "uniform   mat4 projectionMatrix;"
238                                            + ""
239                                            + "varying vec4 vColor;"
240                                            + ""
241                                            + "void main()"
242                                            + "{"
243                                            + "    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1);"
244                                            + "    vColor      = color;"
245                                            + "}";

Notes

The modelViewMatrix place the object into the scene, then the projectionMatrix projects the object onto the screen.

Remember that the gl_Position output from the vertex shader must be within the normalized device coordinate box x,y,z ∈ [-1,1] for the vertex to be drawn. Moving the slider to the right or left shows the object being cliped as it moves outside of this box.