Applying Textures and Simple Animations to Our Scene - WebGL Game Development - page 199

The preceding screenshot has a diffuse map of four objects: terrain, railing, lamp, and
dump. Why do we do this? Basically, we know that the texture file has to be in a size
of power of 2, for example, 128 x 128, 128 x 64, 256 x 256, 256 x 128, and 512 x 512.
If we create all files in the mentioned sizes, then we might waste precious memory
space because you might have to keep empty areas in the files. Hence, in order to
reduce the memory footprint of textures, we generally use this technique. Also, we
can have only 32 active texture objects. For this reason as well, if we have many
objects in our game, we generally create packed texture files.
We know one thing that multiple objects can have a single texture file, and we do not
want to allocate space for the same texture for each object. Hence, we hold references
to these textures in our Stage object and not the individual StageObject . Open
the Stage.js file from the primitive folder of the code bundle in your favorite
text editor.
We have added a simple array that holds references to the texture objects using the
following code:
this.textures=new Object();
We also added a new function to add the loaded texture to the stage object, as shown
in the following code:
addTexture:function(index,name,img){
var texture=new Object();
texture.fileName=name;
texture.img=img;
texture.index=index;
texture.texture=this.gl.createTexture();
this.gl.bindTexture(this.gl.TEXTURE_2D, texture.texture);
this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA,
this.gl.UNSIGNED_BYTE, img);
this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER,
this.gl.NEAREST);
this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER,
this.gl.NEAREST);
this.gl.bindTexture(this.gl.TEXTURE_2D, null);
this.textures[index]=texture;
}
The preceding function takes three parameters which are as follows:
• index : This is a key to index the texture
• fileName : This is the name of the file from which the texture was loaded
• img : This is the pixel data of the loaded texture