Game Development Reference
In-Depth Information
little bit. If you remember
Chapter 4
,
Using HTML5 to Catch a Snake
, where we in-
troduced the new typed arrays, then this will look familiar to you. The way WebGL
stores vertex data is by using those typed arrays, but more specifically, 32 bit floating
point arrays.
In this particular case where we're only drawing a triangle, calculating, and keeping
track of what all the points are is a trivial task. However, 3D models are not normally
drawn by hand. After we draw a complex model using some 3D modeling software
of one kind or another, we will be exporting anywhere from a few hundred to several
thousand individual vertices that represent the model. In such cases, we will need to
calculate how many vertices our model has and it would be a good idea to store that
data somewhere. Since JavaScript allows us to add properties to objects dynamic-
ally, we take advantage of that and store these two calculations on the buffer object
itself.
Finally, let's actually draw our triangle to the screen. Of course, if we haven't written
enough boilerplate code already, let's talk about one major component of 3D pro-
gramming, and write just a little bit of extra code to allow us to finally render our mod-
el.
Without getting too deep into the topic of 3D coordinate space and transformation
matrices, one key aspect of rendering 3D shapes into a 2D screen (for instance, your
computer monitor), we need to perform some linear algebra to convert the points that
represent our models from 3D space into a simple 2D space (think x and y coordin-
ates). This is done by creating a couple of matrix structures and performing some
matrix multiplication. Then, we just need to multiply each point in our 3D model (our
triangle buffer, in this example) by a matrix called the
MVP matrix
(which is a mat-
rix composed of three individual matrices, namely the model, view, and projection
matrices). This matrix is constructed by the multiplication of the individual matrices,
each representing a step in the transformation process from 3D to 2D.
If you have taken any linear algebra classes before, you will know that multiplying
matrices is not as simple as multiplying two numbers. You will also notice that rep-
resenting a matrix in JavaScript is also not as trivial as defining a variable to type in-
teger. In order to simplify and solve this problem, we can use one of the many matrix
utility libraries available in JavaScript. The particular library we'll use in this example
is a very powerful one called
GL-Matrix
, which is an open source library created by
Brandon Jones and Colin MacKenzie IV.
