Goal: In this assignment you will focus on gaining basic understanding of the WebGL rasterization API, by learning how to render and manage a few triangles.
Submission: Submit your assignment using this Google Form.
GRADING:
This assignment is a forgiving introduction to WebGL, with correspondingly forgiving grading. The main components of this programming assignment are:
- 25% Part 1: attempt improvement of vertex and index arrays
- 25% Part 2: render input triangles correctly
- 25% Part 3: attempt improvement of shader to handle parameters
- 25% Part 4: triangles in input color
- Participation: Receive participation credit (outside of this assignment) for posting images of your progress, good or bad, on the class forum!
You will only render triangles in this assignment, described in the same sorts of JSON input files used in the first. We will test your program using several different input files, so it would be wise to test your program with several such files. The input files describe arrays of triangles using JSON. An example input file resides at https://ncsucgclass.github.io/prog2/triangles.json. When you turn in your program, you should use this URL in hardcode as the location of the input triangles file — it will always be there. While testing, you should use a different URL referencing a file that you can manipulate, so that you can test multiple triangles files. Note that browser security makes loading local files difficult, so we encourage you to access any input files with HTTP GET requests.
We provide a small shell in which you can build your code. You can run the shell here, and see its code and assets here. The shell shows how to draw triangles using WebGL, treating them all the same way. It also shows how to parse the input triangles.json file.
The default view is as in the first assignment. The eye is at (0.5,0.5,-0.5), view up of [0 1 0], look at vector [0 0 1]. Locate the window a distance of 0.5 from the eye, and make it a 1x1 square normal to the look at vector and centered at (0.5,0.5,0), and parallel to the view up vector. With this scheme, you can assume that everything in the world is in view if it is located in a 1x1x1 box with one corner at the origin, and another at (1,1,1).
We encourage you to help one another with this assignment, and will reserve a class for you to do so. Feel free to suggest how other students might solve problems, and to help them debug their code — just don't write their code for them. The code you turn in should still be your own (except for the shell). This is a simple assignment, and should not need other third party libraries. As always, if you are ever uncertain if what you are contemplating is permissible, simply ask me or the TA. For information about how to correctly submit, see this page on the class website.
Parts 1 & 2: Attempt to improve vertex and index array, and render triangles correctly
For these parts of the assignment, your goal is to display the input triangles in the correct position. The shell only renders the first set of triangles, in solid white. You must change the code to display all the triangles, improving two arrays: one that describes the vertices and their attributes, and another that describes the triangles by listing their vertex indices. If you make a solid attempt at improving these arrays, you will receive full credit for Part 1. If you correctly render all the triangles in white, you will earn full credit for Part 2.
Parts 3 & 4: Attempt to improve the shader, and render the input colors correctly
For these parts of the assignment, your goal is to color the input triangles correctly. The shell includes basic shader code that renders everything in white. You must change the shader to accept and use a parameter, and the code to send the shader a different value for the parameter for each triangle set. If you make a solid attempt at this, you will receive full credit for Part 3. If you correctly render each triangle set with its unique color, you will earn full credit for Part 4.
