Physics and Terrains - WebGL Game Development - page 242

We also pass the name of the texture to be associated with the UV map of
the geometry.
Open the 07-New-Terrain.html file in your favorite editor. In this code, we simply
initialize our PlaneGeometry object and set the corresponding material file name:
function start() {
...
var plane=new StageObject();
plane.geometry=new PlaneGeometry(7500,7500,63,63,null);
plane.materialFile="terrain_1024.jpg";
loadTexture(plane,clampToEdge);
...
}
The function, loadTexture() , is another refactoring attempt. We have moved the
code to load textures from the loadStageObject function. This function is now
invoked from the start() function as you saw in the preceding code and also from
the loadStageObject() function:
function loadTexture(stageObject,clampToEdge){
if(stageObject.materialFile!=null){
if((textureList[stageObject.materialFile.trim()]===undefined))
{
var currentDate=new Date();
var textureIndex=currentDate.getMilliseconds();
stageObject.textureIndex=textureIndex;
textureList[stageObject.materialFile.trim()]=textureIndex;
initTextures(stageObject.materialFile.trim(),
textureIndex,bool);
}
else{
stageObject.textureIndex=textureList[stageObject.
materialFile.trim()]
}
}
}
We have also modified our Stage.js file's code located in the primitive folder
to accommodate a new parameter, clampToEdge . It is a Boolean value to decide
whether the wrapping mode ( this.gl.CLAMP_TO_EDGE ) has to be set for this texture
if the UV coordinates fall outside the range of 0 to 1. For terrains, we want to make
sure that if the UV map exceeds the range, then the texture is not repeated and
it covers the geometry. The texture parameters have been explained in Chapter 4 ,
Applying Textures .