Due: 11:59pm, Monday Sept 30
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:
- 20% Part 1: attempt to display all triangles using index buffers
- 25% Part 2: display all input triangles in correct positions with index buffers
- 20% Part 3: attempt to display varying triangle colors using shader parameters
- 25% Part 4: display triangles with correct colors using shader parameters
- 10% Part 5: make it your own
- Participation: Receive participation credit (outside of this assignment) for posting images of your progress, good or bad, on the class forum! Please tag pretty but wrong imagery with #cool-bugs-and-stuff.
You may (optionally) work with one partner on this assignment. You should each turn in the same code.
You will only render triangles in this assignment, described in JSON input files similar to first programming assignment. 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.
We are using webGL's default view setup, with the eye at the origin, and the window from -1 to 1 horizontally and vertically.
This is an individual or partnered assignment, no exceptions. That said, we encourage you to help one another. 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 or your single partner's (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 the help you want to give or the code you want to use 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: Use index buffers to display all triangles in their correct positions
For these parts of the assignment, your goal is to display all input triangles in the correct position using index buffers. The shell renders only the first set of triangles using only vertex buffers and the call DrawArrays. You must change the code to display all the triangles, using not only vertex but also index buffers and the call DrawElements. If you make a solid attempt at adding index buffers, you will receive full credit for Part 1. If you render all the triangles their correct positions in white using DrawElements, you will earn full credit for Part 2.
Parts 3 & 4: Improve the shader to render triangle input colors correctly
For these parts of the assignment, your goal is to color the input triangles with their diffuse color. The shell includes basic fragment shader code that renders everything in white, and basic shader code that does not manage color. You must improve the fragment shader to accept and use a color parameter, the vertex shader to accept and use vertex colors as well as positions, and the javascript code to send the vertex shader color buffer as well as a position buffer. 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.
Part 5: Make it your own
In Parts 1-4, you strove to make your image look "correct". Now you should use the techniques you have learned (triangles and WebGL rasterization) to make a new image that is "interesting". To earn full credit for Part 5, all that you must achieve is to make your image substantially different from that produced by the shell repo input, and from the imagery of your fellow students. Your "interesting" image should appear after you press the space bar.
Here is a sample output for the triangle.json given in the shell
