Description
Synopsis: You get to use WebGL to create a 3-dimensional scene, with your own shaders, models, and associated data (vertex attributes, colors, normals, textures, etc). Learning Objectives: To familiarize yourselves with the complexities of using the WebGL API and the GLSL shading language to craft a 3-dimensional scene. This includes defining vertex attributes, dispatching them to the GPU and using them within shaders, using vertex colors, normals and texture coordinates (when applicable). Also, using textures to create a more rich appearance, if desired (optional) Evaluation: Based on our 4-point grading scheme, as discussed in our introductory lecture. You get a check (“3”) if you turn in a viable, and complete submission (even if it just draws a rectangle like the example in the tutorial). “Above and beyond” grades (i.e. a “4”) will be awarded for people who have crafted something particularly cool. As a general rule, no more than 1/3 of all assignments turned in (the very best ones, that is) will be considered for a “4” grade. Collaboration policy: This is an assignment to be done individually. Code not written by you needs to include proper attribution (see this post (https://canvas.wisc.edu/courses/320922/pages/collaboration-policy) here). It is always ok to use code provided in our in-class examples as a starting point, but you need to add your own effort to raise those examples (or other sources) to what is asked by the programming assignment (i.e. finding some code on some online forum that does all the job for you that is 12/4/22, 11:57 PM Programming Assignment #7 https://canvas.wisc.edu/courses/320922/assignments/1754483?module_item_id=5563924 2/5 needed to satisfy the assignment is not the intent, if you haven’t added any of your own effort to it). If you use somebody else’s code (other than our GitHub examples), make sure to clarify in your submission notes what you did, and what you repurposed from the external source. Hand-in: Electronic turn-in on Canvas. Make sure that you turn in all files needed for your program to run. It is acceptable to turn in a single HTML file with your program, but even preferable to separate your code into an .html file and a separate .js file containing the JavaScript code, similar to the examples in our GitHub repository (https://github.com/sifakis/CS559F22_Demos) (see, e.g. Demos in Week10/ Week11/). If you submit anything else than a single HTML file, please put everything in a single ZIP archive. Feel free to use the copy of the glMatrix library included in our examples in the GitHub repository (or use them as a starting point) if it’s convenient. It is not acceptable to submit a link to JSbin for this assignment! Description 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