Game Development Reference
In-Depth Information
• Invokes the
initBuffers()
function. This function creates the vertices
array with four vertices, creates a vertex buffer object, makes it the current
buffer using the API function
gl.bindBuffer (gl.ARRAY_BUFFER,
vertexPositionBuffer)
, and creates the actual memory to store the
vertices in the GPU memory using the API function
gl.bufferData(gl.
ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW)
. Then,
it clears or paints the canvas using the
gl.clearColor(red,green,blue,al
pha)
function. It also enables depth-testing (this will be discussed shortly).
• The final drawing happens in the
drawScene()
function. First, it sets
the size of the viewport equal to the size of the canvas object using the
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
API
function. Then, it clears the
COLOR
and
DEPTH
framebuffers (to be discussed
shortly). It initializes the projection perspective matrix using the
mat4.
perspective(40, gl.viewportWidth / gl.viewportHeight, 0.1,
1000.0, pMatrix)
function.
•
The
drawScene()
function then initializes the ModelView matrix
mat4.
identity(mvMatrix);
and applies a translation transform to the ModelView
matrix. The matrix now contains one transformation which would move an
object to
z = -7
in the world coordinate.
•
The
drawScene()
function then makes the
vertexPositionBuffer
parameter the current buffer using the
gl.bindBuffer(gl.ARRAY_BUFFER,
vertexPositionBuffer)
function and associates the current buffer object
to the shader attribute using the
gl.vertexAttribPointer()
function.
The
setMatrixUniforms()
function associates the ModelView matrix and
projection matrix to the corresponding shader program uniforms using the
gl.uniformMatrix4fv()
function.
Finally, we invoke the
drawArrays()
function, which basically draws the square
with two triangles using the vertices [v0, v1, v2] and [v2, v0, v3] since the drawing
mode was
TRIANGLE_STRIP
.
Hence, for every WebGL application, the basic program flow would be similar to
the following:
•
Create the WebGL context
•
Load, compile, link, and attach shaders
•
Initialize vertex buffers and index buffers
•
Apply transform and associate buffer objects to shader attributes
•
Call the
drawArrays
or
drawElements
functions
