Game Development Reference
In-Depth Information
•
Type
: This specifies the type of element indices stored in indices. Valid values
are
UNSIGNED_BYTE
,
UNSIGNED_SHORT
, and
UNSIGNED_INT
.
•
Offset
: This is the starting vertex index in the enabled vertex array.
Drawing using vertex buffer objects
Please open the file
01-SquareWithDrawArrays.html
in your favorite text editor.
The HTML page has three script sections:
•
The script section marked with
id="shader-fs"
and
type="x-shader/x-
fragment"
contains the fragment shader code
•
The script section marked with
id="shader-vs"
and
type="x-shader/x-
vertex"
contains the vertex shader code
•
The script section marked
type="text/JavaScript"
contains the
control code
The HTML code invokes the
start()
function on loading its body. The
start()
function performs the following functions :
•
Gets the canvas object using the
document.getElementById("squareWithD
rawArrays");
function.
•
Invokes the
initGL(canvas)
function that obtains the WebGL context using
the
canvas.getContext()
function and stores it in a global variable,
gl
. All
WebGL API functions are accessed through the context.
•
Invokes the
initShaders()
function, which in turn invokes the
getShader(context, type)
function. The
getShader()
function
loads both scripts in by parsing the document object. It loads the script
in a string object, compiles it, and returns the shader object. Then, the
initShaders()
function creates a program object. It then attaches both the
shaders (fragment and vertex) to the program object. Then, the program
object is linked to the WebGL context and activated using the context's
useProgram(shaderProgram)
function. Then, the
aVertexPosition
shader
attribute provides the location that is requested in the control code using
the
gl.getAttribLocation (shaderProgram, "aVertexPosition");
function. This location is stored in the
vertexPositionAttribute
variable of
the
shaderProgram
object. This
vertexPositionAttribute
is then activated
using the
gl.enableVertexAttribArray()
function. Then the location and
both uniforms (ModelView transformation and projection transformation) are
stored in the shader program object.
