Beginning WebGL - HTML5 Games Most Wanted - page 147

Figure 7-8. The output of Listing 7-10, a shaded square
This is a lot of work to draw a square. The good news is that advanced concepts and techniques
incrementally build off of the same foundation we have just set up.
We have deferred showing our shader source until now. Listing 7-10 shows the vertex shader.
Listing 7-10. Our Vertex Shader
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying highp vec4 vColor;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vColor = aVertexColor;
}
</script>
In Listing 7-10, our final position of each vertex is the initial position multiplied by the modelview matrix and
then the projection matrix. The passed in vertex color is set in the vColor varying variable, which will be
passed on to the fragment shader. The matrices are constant, while color and position change with each
vertex.
Note For advanced shader information covering GLSL beyond the scope of this topic,
please refer to www.lighthouse3d.com/tutorials/glsl-tutorial/ a nd the OpenGL
Shading Language “Orange Book” (Addison-Wesley, 2009) by Randi J. Rost, et al. The
WebGL quick reference card available at www.khronos.org/files/webgl/
webgl-reference-card-1_0.pdf also has more details on GLSL.