[SOLVED] Tutorial 5 Drawing Methods

Tutorial 5 Drawing Methods
This tutorial introduces drawing gl.LINE_STRIP, gl.TRIANGLES, and gl.TRIANGLE_STRIP using vertex indices (gl.ELEMENT_ARRAY_BUFFER). The shapes to draw are shown on the left in the figure the below:
The hexagon is drawn as a line strip. Because it is a line primitive, the shape is not filled with any colour.
The triangle is drawn as a triangle array, as you did in the last week.

Copyright By Assignmentchef assignmentchef

The two triangular strips on the lower half of the canvas are drawn as gl.TRIANGLE_STRIP using drawElements(). Two buffers are used: one for the vertex coordinates, stripVertexBuffer, and one for the vertex indices, stripElementBuffer. Although shown as two separate strips, they are actually drawn as a single strip in a single call to gl.drawElements() method (to save a function call to save CPU time, which may not be significant in this tutorial). To facilitate this, degenerated triangles are required to link them together (see lecture note for details). The vertices of the two strips are shown on the right in the figure above.
To help visualising the boundaries of the triangular strips, lines are also drawn from the vertex indices using the specified colour:
gl.vertexAttrib4f(shaderProgram.vertexColorAttribute, 0.0, 0.0, 0.0, 1.0);
// Draw line for the upper strip using index 0-10 gl.drawArrays(gl.LINE_STRIP, 0, 11);
// Draw line for the lower strip using index 11-21 gl.drawArrays(gl.LINE_STRIP, 11, 11);
In draw() function, pay attention to the calling order of the following methods: gl.disableVertexAttribArray(),
gl.bindBuffer(), and
gl.vertexAttribPointer().
If a constant is used for an attribute, e.g., vertex colour attribute, we have to disable the attribute in the vertex shader by calling gl.disableVertexAttribArray(). If we need to use the attribute values stored in the attribute buffer afterwards, we must enable the attribute. The method call to gl.bindBuffer() make a buffer current (active). The call to the method gl.vertexAttribPointer() links the current buffer to the attribute in the vertex shader.
If have finished the last weeks tutorial, you can amend your program to accommodate the newly added statements or blocks. Otherwise, download the UNFINISHED program (unfinished program.doc) from Moodle and start from there.

Exercise: Amending the last weeks program to accommodate the new features. Pay attention to the statement/functions shown in bold case.