Solved:Programming Assignment #7 Solved

our task will be to create a 3D scene, visualized using the WebGL drawing API (as opposed to the “Canvas” 2D drawing API we have used up to and including homework assignment #5). We have seen several examples, in-class, about using this interface, which you can find in subdirectories Week10/ and Week11/ of our GitHub repository  (https://github.com/sifakis/CS559F22_Demos) (check out this  (https://jsbin.com/feqibunoyu/) and this  (https://jsbin.com/zivofiw) URL for JSBin versions of some of these examples). When authoring such three-dimensional visualizations, it will be your responsibility to do the following, among others (while online tools like shdr.bkcore.com would do many of these things for you) :

Write your own vertex shader and fragment shader; a relatively clean and straightforward way to do this would be to include them in the body of <script> blocks in the HTML code, as we saw in the examples above. You could, in fact, write more than a single pair of fragment/vertex shaders, if you chose to, if you have several objects, each of which requires a different shader.

You should compile and link the two shaders into a “program”, as we saw in our examples. You can create more than one “program”, if you wish to use a different shader routine for different objects you are drawing.

You should define your own vertex attributes, and uniform variables as we saw in our examples. This involves keeping pointers to attribute/uniform variables by querying the


https://canvas.wisc.edu/courses/320922/assignments/1754483?module_item_id=5563924    2/5
12/4/22, 11:57 PM    Programming Assignment #7

linked program (as we saw in our examples), and also defining the data associated with vertex attributes (and uniforms), dispatching that data to the GPU, and taking any other necessary operations to do the drawing.
You should define the geometry of the model(s) being used, by providing a indexed set of vertices that make up triangles. This should also be buffered to the GPU as we saw in class, and used in a drawElements() call inside the draw loop.

You should create all necessary transforms that the shaders might need, and dispatch those to the GPU (typically, as “uniforms”).

You should use the Z-buffer visibility mechanism to leverage the GPU’s capability for performing visibility queries.

[This is only optional! We will have one more assignment where this will be the focus, you don't have to use textures in this one] You could choose load texture images (if you chose to include texture mapping in your implementation), and furnish texture coordinates for your models.


In order to secure at least a “satisfactory” (“3”) grade in this assignment, you can think at a minimum of the world you created in your Programming Assignment #5, and ask yourself how you could implement a similar appearance, but using WebGL this time (ideally, this appearance would be significantly richer!). The minimum requirements will be as follows :

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 flat! (unless if you include several objects in your world, in which case it’s ok for at least one of them to not be flat). 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 include diffuse and/or specular shading in your objects (ideally both). It will not be acceptable to have the entire polygonal object (or objects) show up as a single color, without any variation due to lighting. It is perfectly fine to use vertex colors to customize the coloration of different parts of the model.

We would like to see you use at least three different vertex attributes in your shader. Those could be, for example position/color/normal, position/normal/texture-coordinates, etc. If you use more than one shader pairs in your implementation, this restriction is relaxed to: at least one of the shader pairs should use at least 2 vertex attributes.

There should be a way to enact some change in the scene, different than just controlling the camera position. This would typically be some modeling transform that moves some


https://canvas.wisc.edu/courses/320922/assignments/1754483?module_item_id=5563924    3/5
12/4/22, 11:57 PM    Programming Assignment #7

part of the scene with respect to the world coordinates, some motion along a curve, a hierarchical modeling apparatus, etc. But at the very mininum, some modeling transform should be applied (in our in-class examples, this was done by a “rotation” transform applied to the cube model).
There should be some way to affect the placement of the camera relative to the scene. In our examples, we have a slider that spins the camera around the scene … similar requirements were stated in programming assignment #5.


Of course, we would like to think you will extend beyond these bare-minimum requirements. Here is a list of possible embellishments that you might wish to consider … doing several of them, or doing them in particularly creative and aesthetically interesting ways will make you competitive for an “above and beyond” (“4”) grade.

Use some non-trivial lighting. Maybe use multiple lights, maybe make some of them moving.

Consider modeling several different objects, subject to different modeling transformations, maybe implementing a hierarchical model, and maybe using different shader programs (i.e. multiple pairs of vertex/fragment shaders, each compiled into its own “program” and used via the useProgram() call before drawing this component). Think whether it makes sense to have multiple modeling transforms for a hierarchical model (separate “uniforms” if using a single shader?), or if you want to use different programs altogether to draw those.

Consider using texturing to improve the complexity of your appearance (since this will be a focus of the next programming assignment, "simple" texturing will be given a bit less priority as one of the factors that would help your assignment compete for a "4" ... but more complex uses of texturing might).

Implement some complex objects, or objects with intricate motion.


Implement some interesting camera motion.


Supplemental readings

The following supplemental/optional readings can be used to complement our in-class discussion. As far as the exams go, you will only be asked for concepts that were covered in-lecture, but the following readings could be useful in your review, or if you want to go into greater depth on some of these topics than we explicitly discussed in class.

From Foundations of Computer Graphics :




https://canvas.wisc.edu/courses/320922/assignments/1754483?module_item_id=5563924    4/5
12/4/22, 11:57 PM    Programming Assignment #7

From Chapter 4 [Link] : (https://canvas.wisc.edu/courses/320922/files/27976429/download)


The most relevant sections are : Introduction, Section 4.1, 4.5, 4.8.

From Chapter 8 [Link] (https://canvas.wisc.edu/courses/320922/files/27976433/download) :


Focus on Sections 8.1 (mostly subsection 8.1.2), 8.2, and 8.3.

From Chapter 11 [Link (https://canvas.wisc.edu/courses/320922/files/27976433/download) ]


    • This is all good information. You may skip 11.1, and 11.3.1. For sections 11.4 through 11.7 don’t worry about the formulas.

From The Big Fun Graphics Book :

From Chapter 15 [Link (https://canvas.wisc.edu/courses/320922/files/27976510/download) ]


    • All good material – you may skip Section 15.2. The explanations are more technical and in-depth than what we covered in class; don’t worry about this, for the exam you will just need the depth of exposition we covered in lectures.
From Chapter 16 [Link (https://canvas.wisc.edu/courses/320922/files/27976511/download) ]


    • This is all useful and accessible (too bad the chapter is incomplete!). Again, this gets more technical with deeper mathematical foundations of the techniques, which is informative if you want to understand more about the concepts, but just the level of coverage we had in our lectures will be well sufficient for the exam.

From Real Time Rendering :

Chapter 6 [Link] (https://canvas.wisc.edu/courses/320922/files/27976526/download) is a fantastic reference for texturing, although it includes substantially more detail than we covered (or will cover) in class (or needed for your exam). It’s a great read if you want to learn more about these techniques though. You can very safely skip Summed Area Tables (p. 167) and Anisotropic Filtering (p. 168), as well as Sections 6.2.3, 6.2.5, 6.2.6, 6.3, 6.4, 6.5, 6.6., 6.7.4 and 6.7.5.






















https://canvas.wisc.edu/courses/320922/assignments/1754483?module_item_id=5563924    5/5