HTML and CSS Reference
In-Depth Information
Field of view
The angle at which we will view the 3D scene (
25
degrees).
Width-to-height ratio
The radio of width to height of the current size of the canvas (
500×500
).
Minimum units
The smallest unit size away from our viewport we want to display (
0.1
).
Maximum units
The furthest unit size away from our viewport that we want to see (
100.0
).
function drawScreen() {
webGLContext.viewport(0, 0, webGLContext.viewportWidth,
webGLContext.viewportHeight);
webGLContext.clear(webGLContext.COLOR_BUFFER_BIT |
webGLContext.DEPTH_BUFFER_BIT);
perspective(25, (webGLContext.viewportWidth / webGLContext.viewportHeight),
0.1, 100.0);
Next, we move to the center of the 3D scene, calling
loadIdentity()
so we can start
drawing. We then call
mvTranslate()
, passing the locations on the x, y, and z axes to
draw the cube. To rotate the cube, we call a function named
mvPushMatrix()
, and
later
mvPopMatrix()
, which is similar to how we called
context.save()
and
con
text.restore()
when rotating objects on the 2D canvas. The call to
mvRotate()
then
makes the cube rotate from the center, tilted up and to the right:
loadIdentity();
mvTranslate([0, 0.0, -10.0])
mvPushMatrix();
mvRotate(rotateCube, [0, .5, .5]);
Next, we draw the cube by binding the buffers that hold the vertices and color infor-
mation that we set up earlier for the cube's sides. We then draw each side, made up of
two triangles each:
webGLContext.bindBuffer(webGLContext.ARRAY_BUFFER, cubeVertexPositionBuffer);
webGLContext.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
cubeVertexPositionBuffer.itemSize, webGLContext.FLOAT, false, 0, 0);
webGLContext.bindBuffer(webGLContext.ARRAY_BUFFER, cubeVertexColorBuffer);
webGLContext.vertexAttribPointer(shaderProgram.vertexColorAttribute,
cubeVertexColorBuffer.itemSize, webGLContext.FLOAT, false, 0, 0);
webGLContext.bindBuffer(webGLContext.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
setMatrixUniforms();