Adding Features to Your Game - Learn HTML5 by Creating Fun Games - page 270

gl.enableVertexAttribArray(shader.attribVertPos);
shader.pMatrixUniform = gl.getUniformLocation
(shader, "uPMatrix");
shader.mvMatrixUniform = gl.getUniformLocation
(shader, "uMVMatrix");
})();
The next step in this process is to create a vertex and fragment shader, which are
then combined into a single shader program. The entire job of the vertex shader is to
specify the position of a vertex in the final rendered model and the fragment shader's
job is to specify the color of each pixel between two or more vertices. Since these
two shaders are needed for any rendering to take place, WebGL combines them into
a single shader program.
After the shader program is successfully compiled, it will be sent to the GPU where
the processing of fragments and vertices take place. The way we can send input into
our shaders is through pointer locations that we specify in the shader program before
sending it to the GPU. This step is done by calling the get*Location method on
the gl object (the WebGLRenderingContext object). Once we have a reference to
those locations, we can later assign a value to them.
Notice that our shader scripts declare variables of type vec4 and mat4 . In strongly
typed languages such as C or C++, a variable can have a type of int (for integers),
float (for floating point numbers), bool (for Boolean values), or char (for charac-
ters). In GLSL, there are a few new data types that are native to the language, which
are specially useful in graphics programming. These types are vectors and matrices.
We can create a vector with two components by using the data type vec2 , or vec4
for a vector with four components. Similarly, we can create a 3 x 3 matrix by calling
mat3 , which essentially creates an array-like structure with three vec3 elements.
function initTriangleBuffer(gl) {
// Step 1: Create a buffer
var buffer = gl.createBuffer();
// Step 2: Bind the buffer with WebGL
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);