Game Development Reference
In-Depth Information
Understanding WebGL - a state machine
WebGL does not render or work on multiple buffers at a single point in time. When
we load multiple objects, we will have multiple buffers. To render all those buffers,
we will have to activate each one of them one by one. WebGL is like a state machine;
you can always retrieve the active buffer information and the state of the rendering
pipeline using functions such as
getParameter
,
getBufferParameter
, and
isBuffer
as shown in the following code:
gl.getParameter(gl.ARRAY_BUFFER_BINDING)// It retrieves a
reference to the currentlyâbound VBO
gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING)// It retrieves a
reference to the currently bound IBO
gl.getBufferParameter(gl.ARRAY_BUFFER,gl.BUFFER_SIZE);//Get is the
size of the requested buffer
gl.getBufferParameter(gl.ARRAY_BUFFER,gl.BUFFER_STATUS);//Get is
the status of the requested buffer
The functions can be used for vertex and index buffer objects. Hence, the preceding
functions can be used with
gl.ELEMENT_ARRAY_BUFFER
as a parameter.
Using mvMatrix states
Since we will have multiple objects in the scene, each object will have their own
local transformations. Hence, we will not like to lose our initial mvMatrix's state.
Our initial
mvMatrix
has our viewer's transformation, which will be applied to
each object and then each of their local transformation will be applied. We store our
object's local transformation in the
StageObject
class' variables' location with the
x
,
y
, and
z
values as
rotationX
,
rotationY
, and
rotationZ
respectively. Before
applying these transformations, we push our matrix to a stack and pop it once the
rendering of the object has finished, as shown in the following diagram:
Push on
s
tack
Drawn
e
lements
New
ransformation
Update
Uniforms
MV
m
atrix
t
(Rotation, Translation)
Pop from
s
tack
