Time for action — working on the wall

  1. Open the file ch3_Wall.html in your HTML5 browse. You will see something similar to the following screenshot:
    Time for action — working on the wall
  2. Now, open the file again, this time in your favorite text editor (for example, Notepad ++).
  3. Go to the vertex shader (Hint: look for the tag<script id="shader-vs" type="x-shader/x-vertex">). Make sure that you identify the attributes uniforms and varyings that are declared there.
  4. Now go to the fragment shader. Notice that there are no attributes here (Remember: attributes are exclusive of the vertex shader).
  5. Go to the runWebGLApp function. Verify that we are calling initProgram and initLights there.
  6. Go to initProgram. Make sure you understand how the program is built and how we obtain references to attributes and uniforms.
  7. Now go to initLights. Update the values of the uniforms, as shown here.
    gl.uniform3fv(prg.uLightDirection, [0.0, 0.0, -1.0]);
gl.uniform4fv(prg.uLightAmbient, [0.1,0.1,0.1,1.0]);
gl.uniform4fv(prg.uLightDiffuse, [0.6,0.6,0.6,1.0]);
gl.uniform4fv(prg.uMaterialDiffuse, [0.6,0.15,0.15,1.0]);
  8. Please notice that one of the updates consists of changing from uniform4f to uniform4fv for the uniform uMaterialDiffuse.
  9. Save the file.
  10. Open it again (or reload it) in your HTML5 Internet browser. What happened?
  11. Now let's do something a bit more interesting. We are going to create a key listener so every time we hit a key, the light orientation changes.
  12. Right after the initLights function, write the following code:
    var azimuth = 0; var elevation = 0;
document.onkeypress = processKey;
function processKey(ev){
var lightDirection = gl.getUniform(prg,prg.uLightDirection);
var incrAzimuth = 10;
var incrElevation = 10;
switch(ev.keyCode){
case 37:{ // left arrow
azimuth -= incrAzimuth;
break;
}
case 38:{ //up arrow
elevation += incrElevation;
break;
}
case 39:{ // right arrow
azimuth += incrAzimuth;
break;
}
case 40:{ //down arrow
elevation -= incrElevation;
break;
}
}
azimuth %= 360;
elevation %=360;
var theta = elevation * Math.PI / 180;
var phi = azimuth * Math.PI / 180;
//Spherical to Cartesian coordinate transformation
lightDirection[0] = Math.cos(theta)* Math.sin(phi);
lightDirection[1] = Math.sin(theta);
lightDirection[2] = Math.cos(theta)* -Math.cos(phi);
gl.uniform3fv(prg.uLightDirection, lightDirection);
}

    This function processes the arrow keys and changes the light direction accordingly. There is a bit of trigonometry (Math.cos, Math.sin) Mat.sin) there but do not worry. We are just converting the angles (azimuth and elevation) calculated by the entered arrow keys into Cartesian coordinates.

    Please notice that we are getting the current light direction using the function: 

    var lightDirection = gl.getUniform(prg,prg.uLightDirection);

    After processing the key strokes, we can save the updated light direction with: 

    gl.uniform3fv(prg.uLightDirection, lightDirection);
  13. Save the work and reload the web page:
    Time for action — working on the wall
  14. Use the arrow keys to change the light direction.
  15. If you have any problem during the development of the exercise or you just want to verify the final result, please check the file ch3_Wall_Final.html that contains the completed exercise.

What just happened?

In this exercise, we have created a keyboard listener that allows us to update the light orientation so we can move it around the wall and see how it reacts to surface normals. We have also seen how the vertex shader and fragment shader input variables are declared and used. We understood how to build a program by reviewing the initProgram function. We also learned about initializing uniforms on the initLights function. We also studied the getUniform function to retrieve the current value of a uniform.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.218.55.14