MP3 Frequently Asked Questions (IN OFFICE HOURS)

The MP3 Frequently Asked Questions (IN OFFICE HOURS) cover various topics such as clarifications on displaying environments in scenes, loading shaders, extracting vertices from teapot files, and loading 2D textures in WebGL. The content provides detailed instructions and images to guide users through these processes.

• MP3
• FAQs
• Office Hours
• Shaders
• Textures

keeler_n Follow

Uploaded on Feb 26, 2025 | 0 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.

Presentation Transcript

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 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