Loading the Game Scene - WebGL Game Development - page 102

To show the use of animation in our scene, we have added a little effect by blinking the
first light. This will also clearly show you which objects are affected by the positional
light. If you notice in the setLightUniform function, we did not give a constant
value to our uPositionalColor uniform but we added a variable lightColor . The
value of the color changes after every two seconds. The totalElapsedTime variable
is calculated in the animate function. The animate function is invoked from the tick
function, as shown in the following code:
var lastTime = 0;
var totalElapsedTime=0;
function animate() {
var timeNow = new Date().getTime();
if (lastTime != 0) {
totalElapsedTime+= (timeNow - lastTime);
if(totalElapsedTime>=2000){
if(lightColor[0]==0.5){
lightColor=[0.0,0.0,0.0];
}
else{
lightColor=[0.5,0.5,0.5];
}
totalElapsedTime=0;
}
}
lastTime = timeNow;
}
function tick(){
requestAnimFrame(tick);
drawScene();
animate();
}
Multiple lights and shaders
The provided solution in the previous section to add lights to our scene is not a
scalable solution because if we wanted to add four or more lights, we would have
had to add more uniforms to our shader. WebGL limits the amount of storage for
uniforms. If we exceed the limit, we would get a compile-time or a runtime error.
You can query the number of allowed uniforms using the following functions:
gl.getParameter(gl.MAX_VERTEX_UNIFORM_VECTORS);
gl.getParameter(gl. MAX_FRAGMENT_UNIFORM_VECTORS);