Loading the Game Scene - WebGL Game Development - page 89

The addModel function does two things; it pushes the stageObject to the array
and also initializes the buffers by invoking the createBuffers function of the
stageObject :

addModel:function(stageObject){

if(!(this.gl===undefined)) {
stageObject.createBuffers(this.gl);

}
this.stageObjects.push(stageObject);
},

The following are a few changes that we performed in the preceding code:

• The parseJSON function now returns the Geometry object instead of the

faces array.

• The geometry object calculates normal data from the vertexNormals array

stored in the faces array. The StageObject class holds the reference of the
Geometry object and is responsible for creating buffers for the object.

• The Stage class holds references to all the stageObjects .

Using the architectural updates
Open the 03-Loading-Object-Architectural-Updates.html file in your favorite
editor. Let's now look at the changes in our main code to use the previous changes.
The end result is not any different than the output of Chapter 2 , Colors and Shading
Languages . But, the code changes will now enable us to load multiple models that we
will see in the next section.

In this section, we have just reconstructed our code to handle multiple JSON objects.
Hence, there are no changes in the shader script.

Understanding the main code
The functions initGL , initShaders , and getShaders have no changes. The start
function initializes the Stage object and invokes the addStageObject function to
load our JSON model, as shown in the following code:

function start() {
var canvas = document.getElementById("squareWithDrawArrays");
initGL(canvas);
initShaders();