1. MP3.

2. Start at the very beginning. Almost. Either start from nothing yourself, or use the empty template for this MP. Run through the provided files are understand to understand what they do. You won’t need to understand how the Resource Loader actually works, as long as you can load the files using it. Suggested: Use objects (or functions) to nicely separate the functions so you can debug better.

3. Tutorials on sampling Textures.  https://www.khronos.org/webgl/wiki/Tutorial https://www.khronos.org/webgl/wiki/Tutorial  http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamenta ls/ http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamenta ls/  https://developer.mozilla.org/en- US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL These tutorials are fairly straight-forward, and by looking through them you will be able to easily create a textured square.

4. Using a Texture as a HeightMap  A HeightMap is simply a texture that we use to scale the vertices along the up axis  So, instead of using the texture to assign the color per vertex, use the texture to scale the coordinate along the up vector.  Create the 2D array of vertices and faces, similar to how the HelloTerrain was in MP2, and use the texture values to create the heightmapping.  You won’t easily be able to create the normal… but guess what? You don’t have to! (Since the Terrain only has to be lit by an ambient light.)

5. Multiple Shaders  Create a shader as normal.  Create, bind and fill the arrays for this shader.  Create another shader as normal.  Create, bind and fill the arrays for this shader.  Then, in every render frame:  Bind and update the buffers, as needed, for the first shader.  Render all the objects for the first shader.  Switch the shader program.  Bind and update the buffers, as needed, for this second shader.  Render all the objects for the second shader.  http://stackoverflow.com/questions/11387062/web-gl-mulitple-fragment-shaders-per-program http://stackoverflow.com/questions/11387062/web-gl-mulitple-fragment-shaders-per-program  http://learningwebgl.com/blog/?p=1523

6. Suggested Workflow.  There are many ways to complete the MP. You could hire an infinite number of monkeys, for instance. An alternative workflow is suggested.  Write more than one shader!  Make a copy of a working shader before you edit it - it is easy to break the flow.  Create the basic 2D Flat Terrain.  Then, do the Height Map.  Write a shader to just texture the Terrain – so that you know that you have correctly loaded the texture.  Then make a quick edit to convert it to a Height Map!

7. Suggested Workflow.  Then create the camera.  Use the terrain to make sure the roll and pitch of the camera looks okay.  Stop rendering the terrain, and create the environment.  Use the camera to make sure the environment looks okay, by looking around.  Once you do this, make sure the terrain renders over the environment.

8. Suggested Workflow  Stop rendering both the terrain and the environment, and then load the object model.  Make sure the object model looks okay – rotate it around any axis.  Make sure that the object model renders nicely over the environment.  Start adding in the reflection.  Then start adding in the diffuse lighting.  Then start adding the specular lighting.

9. Environment Mapping  Cube Map: Panoramic view of the scene mapped to the inside of the cube.  You can find images to be mapped inside the cube here: http://www.pauldebevec.com/Probes/http://www.pauldebevec.com/Probes/  For more details on Environment mapping: http://antongerdelan.net/opengl/cubemaps.html http://antongerdelan.net/opengl/cubemaps.html

10. Creating a Cube map Texture var texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);  gl.TEXTURE_CUBE_MAP define 6 textures for a cube.  Each texture is defined as gl.TEXTURE_CUBE_MAP_dir_axis  dir (direction) is POSITIVE or NEGATIVE  axis is X, Y or Z  Ex: gl.TEXTURE_CUBE_MAP_POSITIVE_Z is the front face of the cube

11. Define texture parameter  gl.texParameteri(target, pname, param) target: The target texture for the current texture unit. pname: The name of the texture parameter. param: The value of pname. Examples: gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

12. Assign image to each face of the cube  Use following to load different images to 6 different faces gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture); gl.texImage2D( face, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image ); gl.bindTexture(gl.TEXTURE_CUBE_MAP, null);

13. Pseudo-code to load texture  Step 1: Create a texture  Step 2: Bind the texture as a cube map  Step 3: Define required texture parameter  Step 4: for each six faces  Load images to each faces of the cube  Faces={gl.TEXTURE_CUBE_MAP_POSITIVE_X, gl.TEXTURE_CUBE_MAP_NEGATIVE_X, gl.TEXTURE_CUBE_MAP_POSITIVE_Y, gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, gl.TEXTURE_CUBE_MAP_POSITIVE_Z, gl.TEXTURE_CUBE_MAP_NEGATIVE_Z }  Step 5: Return texture.

14. Reflect texture in Shader Program  Use GLSL function called reflect.  reflect (I, N): For the incident vector I and surface orientation N, returns the reflection direction. vec3 lookup = reflect(eyeDirection, normal);  Find the corresponding texture on the cube map  uniform samplerCube uCubeSampler;  fragmentColor = textureCube(uCubeSampler, -lookup);  Note: If the object has a texture of it’s own, then  fragmentColor = fragmentColor * textureValue;  Finally assign your texture onto the object that is reflecting the environment.  gl_FragColor = vec4(fragmentColor.rgb * lightWeighting, fragmentColor.a);