Solved:Programming assignment #8 Solution

Your task will be to create a 3D scene, visualized using the WebGL drawing API, very similar to what was requested of you for Programming Assignment #7. As before it will be your own responsibility to write your own vertex/fragment shader pair(s), compile/link them into a "program", defne vertex attributes, send them (via buffer objects) to the GPU, and establish the necessary transforms (lookAt, projection, etc) as "uniforms" that are dispatched to the GPU.

The difference between this assignment and the previous one (#7) is that this week you will be required to use texture mapping somewhere in your scene. Specifcally, you should satisfy the following requirements (some of which overlap with those of assignment #7):

Your scene should include at least one “polyhedral” object with multiple shaded (as opposed to be drawn as “wireframe”, only by their edges) polygonal facets. Those will be typically be comprised of triangles. Your entire object cannot be all fat! (unless if you include several objects in your world, in which case it’s ok for at least one of them to not be fat). We would like to be able to visually appreciate that the Z-buffer visibility algorithm is actually working … “front facing” triangles/polygons, should hide parts of the objects that are located behind them.

You should use at least one texture somewhere in your scene. It is perfectly fne to re-use some of the textures that are included in the in-class examples (see the JSBin demos or the ones in the GitHub repository from Week11). In our in-class lecture, we discussed (verbally, for those that were present) the process for serving an image texture through Flickr (these  (https://live.staticfickr.com/5564/30725680942_0c6e60a13f_o.jpg) are  (https://live.staticfickr.com/65535/50641871583_78566f4fbb_o.jpg) some  (https://live.staticfickr.com/5323/30998511026_c90053af9c_o.jpg) of  (https://live.staticfickr.com/5726/30206830053_87e9530b48_b.jpg) the  (https://live.staticfickr.com/65535/50642695166_9c28ba57e8_o.jpg) examples  (https://live.staticfickr.com/65535/50641908943_f6ebfef28d_o.jpg) from your instructor's Flickr collection, which area ready-to-use for you if you wish - those links are already of the right "type and size" - or you can upload and use your own). Expect to see a piazza posting soon with a verbal review of the process. You should have a texture coordinate vertex attribute for your model (or whichever model in your scene actually uses a texture), and correspondingly Sampler2D variables in your shaders.

Texture look-ups should occur in the fragment shader (as in our in-class examples), not in the vertex shader.



https://canvas.wisc.edu/courses/320922/assignments/1760459    2/3
12/8/22, 11:43 AM    Programming assignment #8

At least one such texture should "wrap around" multiple triangles/polygons in your object. For example, having the cube model from our in-class examples where each square face of the cube has a complete copy of the texture image would not be appropriate; instead consider if the texture image was stretched/wrapped around 4 square faces surrounding the cube.

You should have a textured model (or at least one of your models) that's substantially different from the cube model shown in class. A "minimally acceptable" possibility could be for example a "house" model, with a cube as its main part, and a square-based pyramid as its roof (it would be nice in such case to have a texture wrapping around the 4 triangles that make up the roof!). You are not required to use MipMapping, but it is recommended.


The simplest way that you can use this texture to create a visual appearance is to use the color resulting from the texture look-up as the "diffuse color" of the object, as in our early examples [JSBin]  (https://jsbin.com/zivofw) . Note that, if you already used textures in your programming assignment #7, it could very well be the case that your previous submission already satisfes the requirements of assignment #8 as well! In this case (if you used textures that satisfy the above requirements) you can simply resubmit the same, and obtain a "3" for this assignment as well! But if you want to be more competitive and aim for a higher grade, consider being more ambitious along the following lines:


Use multiple textures, and multiple objects with interesting shapes.


Use more "advanced" texture mapping effects. Decal textures and normal mapping would probably be the easiest ones to attempt. More advanced effects that use render-to-texture would also be very welcome, but please consider that those can be signifcantly more diffcult (but success will be rewarded).



































https://canvas.wisc.edu/courses/320922/assignments/1760459    3/3