1. MP3 Frequently Asked Questions (IN OFFICE HOURS)

2. Q1: MP3 Clarifications  You are not required to display the environment in the scene, although it is nice if you do. The idea of environment mapping is that you see the reflection of the environment in your teapot. If you choose not to display the environment, you will have a teapot floating over a terrain which is reflecting an environment that isn’t present in the scene.  You are not required to reflect the terrain in the teapot model.  You are only required to have ambient lighting on the terrain.

3. Q2: How do I load my shaders?  To load in shaders, please see piazza post for updated starter code files.

4. Q3: How do I load the teapot?  To load in the teapot, have a look at the file format for the teapot. What does it have in it? Vertices? Faces? Normals? If you use the resource loader, and read it in as text, you will have the file as a string. Your goal? Extract vertices, faces, and normals from the string. When you have done that, you will be able to display a teapot.

5. Q4: How do I load a 2D texture (1)?  Request loading the texture. See example.js  this.RL = new ResourceLoader(this.resourcesLoaded, this);  …  this.RL.addResourceRequest(“IMAGE”, “JS/Assets/IMAGE/Test.jpg”);  this.RL.loadRequestedResources();  Have a look at ResourceLoader.js … Where does the data go?

6. Q4: How do I load a 2D texture(2)?  Check out this tutorial, or other tutorial on textures: https://developer.mozilla.org/en-US/docs/Web /API/WebGL_API/Tutorial/Using_textures_in_WebGL https://developer.mozilla.org/en-US/docs/Web /API/WebGL_API/Tutorial/Using_textures_in_WebGL  Step1: create the texture (handleTextureLoaded gets called when the image loads) myTexture = gl.createTexture(); myImage = new Image(); myImage.onload = function() { handleTextureLoaded(cubeImage, cubeTexture); } myImage.src = ”mytexture.png";

7. Q4: How do I load a 2D texture(3)?  Step2: Bind the texture in WebGL function handleTextureLoaded(image, texture) { gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); gl.bindTexture(gl.TEXTURE_2D, null); }

8. Q4: How do I load a 2D texture(4)?  Map the texture coordinates to the vertices in the model // Make a buffer to hold the object’s text coordinates myVerticesTextureCoordBuffer = gl.createBuffer(); // Now bind the buffer Gl.bindBuffer(gl.ARRAY_BUFFER, myVerticesTextureCoordBuffer); // These are the texture coordinates corresponding to each vertex Var textureCoordinates = [… fill this with your texture coordinates…]; // Now map the texture coordinates to the ARRAY_BUFFER gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(textureCoordinates), gl.STATIC_DRAW);

9. Q5: How do I load a cube map (1)?  What makes up a cube map? 6 square images.  STEP 1: Create the texture. Define it as a CUBE MAP. Define parameters for your cube map. Bind the 6 images to faces in the cube map. var cubeTexture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_CUBE_MAP, cubeTexture); // Set TEXTURE_WRAP_S, TEXTURE_WRAP_T, TEXTURE_MIN_FILTER, // TEXTURE_MAX_FILTER

10. Q5: How do I load a cube map (2)?  Bind the 6 images to the 6 faces in the cube map. For each face : gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); gl.bindTexture(gl.TEXTURE_CUBE_MAP, cubeTexture); gl.texImage2D(cube_face, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); gl.bindTexture(gl.TEXTURE_CUBE_MAP, null); // When you are done with that… gl.bindTexture(gl.TEXTURE_CUBE_MAP, cubeTexture); gl.generateMipmap(gl.TEXTURE_CUBE_MAP);

11. Q5: Should I use multiple shaders?  YES

12. Q6: What kind of shaders should I build?  There are many ways you could do this. But… you could consider these:  Vertex and Fragment shaders for the terrain.  Translate texture data into color.  Use ambient light.  Vertex and Fragment shaders for the environment (if you choose to show it in your scene).  Vertex and Fragment shaders for the teapot  Consider writing multiple of these to test out each stage of your work. Maybe one that just shades with light. One that just reflects the enironment. One that does both, etc.

13. Q7: How do I manage all of these shaders (1)?  Consider having some sort of rendering function that draws each part of the scene, and switches the shaders in and out to do so. Maybe some JS functions like this:  DrawMyTerrain  DrawMyEnvironment  DrawMyTeapot

14. Q7: How do I manage all of these shaders (2)?  Then, each one of these JS functions would have to set things up for its corresponding shader in the rendering cycle … something like this:  gl.useProgram(Shader1)  Bind and update buffers (pass in the data to the shader)  Draw things