Program 2 2021: Intro to WebGL

  Due: 11:59pm, Tuesday Sep 28


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! Please tag pretty but wrong imagery with #prettybugs.

General:
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 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.

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: 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 with their diffuse color. 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.

prog1 for 2021 Fall: json and expected result update

 Hi all,


Edit(2021/9/16):

We found the bug in the solution and the pink triangle was actually facing back, thus it should be grey.

However, since the due date is approaching we would accept results showing either for full credit!

This is the latest correct result:



Edit (2021/9/8):

The original solution forgot to ignore t < 1. The image is now updated to reflect the result that ignore t<1.


Edit: To avoid confusion, I leave triangles.json as it is, and opened another json file called triangles2.json

I have updated the triangles.json in the class shell repo, here is an expected result for that input.

You are welcome to try your code with other json input to make sure it works well.

Note how the same color (e.g. the green ones) could look totally different based on the position and angle.

Also, pay attention to the occlusion as well. Good luck!


To use this, modify INPUT_TRIANGLE to point to https://ncsucgclass.github.io/prog1/triangles2.json

result:




https://ncsucgclass.github.io/prog1/triangles.json expected output
the green middle triangles are less shiny due to smaller n, otherwise it's located the same place.






Prog 1 2021: ray casting

Partial Feedback Due: 11:59pm, Friday September 3

Final Submission Due: 11:59pm, Friday September 17

Goal: In this assignment you will practice the ray casting methods that we are discussing.

Submission: Submit your assignment using this Google Form.

Introductory Refs: On javascript.


BASIC GRADING:
  • 5% Part 0: partial feedback
  • 5% Part 0.5: properly turned in assignment
  • 50% Part 1: ray cast the colored triangles in the input file without lighting
  • 40% Part 2: color the triangles with Blinn-Phong illumination
  • Participation: Receive participation credit (outside of this assignment) for posting images of your progress, good or bad, on the class forum!
Note that prior parts need not remain functional if later parts are completed well.


General:
You will only render triangles in this assignment, which are described in an input file. 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 an array of triangles using JSON. An example input file resides at https://ncsucgclass.github.io/prog1/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 triangle 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 here. The shell shows how to draw pixels without using WebGL, and how to parse the input triangles.json file. It contains three drawing functions: one that merely draws random pixels, one that loads the triangles file and draws orthographic projections of them using canvas draw functions, and one that loads the triangles file and renders some random pixels in them. The last is probably closest to what you must produce for this program. Some of our programming exercises also contain relevant code.

All vertex locations should be described in world coordinates, meaning they do not require any transformation. Locate the eye at (0.5,0.5,-0.5), with a view up vector of [0 1 0] and a look at vector of [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). Put a white (1,1,1) (for ambient, diffuse and specular) light at location (-3,1,-0.5).

Advice: be careful to implement the algorithm we described in class, which loops first over pixels, then over triangles. The code you find in our exercises implements rasterization, which loops first over triangles, then pixels.

This is an individual assignment, no exceptions. You should code the core of this assignment yourself. You may not use others' code to determine the location of pixels in the world, to do ray-triangle intersection, or to color a pixel. You may use math libraries you find, but you must credit them in comments. You may recommend libraries to one another, speak freely with one another about your code or theirs, but you may never directly provide any code to another student. If you are ever uncertain if what you are contemplating is permissible, simply ask me or the TA.


Part 0: Partial feedback
You should turn in an "ugly," incomplete version of your program by Friday of next week. If you simply turn in a copy of our shell, you will get half credit (2.5%). If you actually do something to visibly change the shell's output, you will receive full marks (5%), and receive comments on what you've done. For example, if you turn in a complete, first attempt at the assignment, we will tell you in text what is working, and what isn't, so you can raise your final score. We will not otherwise grade the assignment at this point, only comment on it.

Part 0.5: Properly turned in assignment
Remember that 5% of your assignment grade is for correctly submitting your work! For more information about how to correctly submit, see this page on the class website.

Part 1: Using ray casting, render unlit, colored triangles
Use ray casting to render unlit triangles, with every pixel in each triangle having the unmodified diffuse color of that triangle (e.g, if the diffuse color of a triangle is (1,0,0), every pixel in it should be red). You will have to test for depth, to ensure that each triangle is correctly colored. You should see flat triangles.

Part 2: Using ray casting, render lit triangles
Now you will have to perform a local Blinn-Phong lighting calculation at each intersection. As you perform that lighting calculation, don't forget to normalize your vectors. You should now see triangles with depth revealed by illumination, in the same locations and with the same silhouettes as in part 1.


EXTRA CREDIT GRADING: 
  • 461: 1% —  arbitrarily sized images (and interface windows)
  • 461: 1% — arbitrary viewing setups
  • 461: 1% — off-axis and rectangular projections
  • 461: 1% — multiple lights at arbitrary locations
  • 461: 3% — 561: 1% — shadows during ray casting
  • 461: 5%561: 3% — render spheres
Other extra credit is possible with instructor approval. You must note any extra credit in your readme.md file, otherwise you will likely not receive credit for it.

Extra credit: Arbitrarily sized images and viewports 
Accept a new canvas (viewport) width and height through your UI. Size your canvas to match, and change your ray casting interpolation to match. This should effect every part of your assignment.

Extra credit: Support arbitrary viewing setups
Accept new eye location, view up and look at vectors through your UI. Reorient the window to be normal to the new look at vector and centered around the new eye. Render the scene with these viewing parameters. Note that with bad viewing parameters, you will not see the model. This should affect every part of your assignment.

Extra credit: Support off-axis and rectangular projections 
Accept new window parameters through your UI (relative to the viewing coordinates described by the look at and up vectors, these will be two X values (left, right) and two Y values (top, bottom)). Adjust your ray casting interpolation to this new windows. Render the scene with these new projection parameters. Note that if you also perform the arbitrary viewing extra credit, these coordinates may not be in world space! Also with bad projection parameters, you will not see the model. This should affect every part of your assignment.

Extra credit: Multiple and arbitrarily located lights
Read in an additional lights.json file that contains an array of objects describing light location and color. Note that these lights will have distinct ambient, diffuse and specular colors. Render the scene with these lights. During illumination, you will have to sum the colors all the lights. You can find an example lights.json file here. Assume that the input lights file will always reside at this URL when you turn in your code.

Extra credit: Detect shadows during ray casting
When performing lighting during ray casting, shoot an additional ray toward the light to decide if only ambient light reaches the intersection. If you also support multiple lights, make sure to shoot a ray at each light! This should only affect the last part of your assignment.

Extra credit: Render spheres 
Read in an additional spheres.json file that describes the sphere center, its radius, and one material (set of reflectivity coefficients) to use with them all. Read in and render these spheres in addition to the input triangles. You will have to perform ray-sphere intersection, and must code this yourself. You can find an example spheres.json file here. Assume that the input spheres file will always reside at this URL when you turn in your code.

CG Innovators and diversity

Hey folks,

Most significant figures in computer graphics history were white men. For 1% of extra credit, you may research someone a little different, and present a 5 minute report on them in one of our studios. To present such a report, schedule the studio time for it using our report calendar (for 461, for 561). Also, prepare a short Google Slides presentation, and upload it using this form.

You can find suggestions on who you might research in my own lectures (e.g., Bui Tong PhongDorothea Jameson, and Lillian Schwarz), or in our wiki entry on women in CG — but feel free to find someone else! You may report again on someone already reported, but try to highlight something different: five minutes certainly doesn't allow a complete report. These people need not have retired, they may still be quite active in the field. If you have trouble finding someone new, don't be surprised, there weren't many. 

In your report, you need not give a full bio. Just introduce them briefly, then go into some aspect of their career in CG. For example, you can discuss an important paper or other contribution to the field. You might also reach out to them via email, have short discussion with them, and report on what you learned. 

Distance students (only) must do much the same, but may record their presentation on video, and upload it to the same innovators form. They must still reserve time for class to discuss their presentation!

I look forward to your reports!

ProfW

Final project demos

Hey everyone,

Individual project demos
By default, you will demo your project 5 on the day of the final, individually (461: Thursday Nov 19 3:30 pm; 561: Tuesday Nov 24 12 pm). We will make the link with remote appointment slots available to you on Wednesday November 18, here and via email.

Class project demos
But, you can instead volunteer to demo to class! If you do so, you can earn 0.5% extra credit, and skip the individual demo. Also, you may win a $20 Amazon gift card, if your peers vote your demo best! (Project teams may demo, but may not enter the competition.)

Extra credit for attending class demos
Also, even if you simply attend class demos, you will get 0.5% extra credit.

Final project demo links

  • Attend the class project demos using our course gmeet.
  • Volunteer to demo to the whole class with this form.
  • Or instead, you can reserve an individual demo with teaching staff using this calendar.

Program 5, 2020: Putting it all together — Tetris! (Nov 18: updated appt slots)



Due: 

  • For 461
    • Partial due: Friday, November 13 11:59pm 
    • Final due: during final period — Thursday, November 19th 3:30pm
  • For 561
    • Partial due: Tuesday, November 17 11:59pm
    • Final due: during final period — Tuesday, November 24th 12pm

Goal: In this assignment you will apply what you've learned of basic WebGL and GLSL to build a simple game.

Submission: Submit your partial and final assignment using this Google Form, and demo your assignment during the final exam period.

BASIC GRADING:
The main components of this programming assignment are:
  • 5% Part 0: partial turn in and feedback
  • 5% Part 1: properly turned in program (new requirements!)
  • 10% Part 2: display the playing field
  • 10% Part 3: display the pieces
  • 20% Part 4: animate the pieces
  • 20% Part 5: add collision detection
  • 20% Part 6: make pieces interactive
  • 10% Part 7: clear layers when full
  • Participation credit: Receive participation credit (outside of this assignment) for posting your resulting imagery and video, good or bad, on the class forum!

General:
Our suggested game is a 3D version of Tetris. If you are not familiar with the game, you can play it online herehere or here, view some historic gameplay on crt, arcade and gameboy, and find more information about the game at its Wikipedia entry here. There are also many other sources online.

If you would rather implement a different game, you may do so, providing you obtain instructor's approval by Friday November 6. To obtain that approval, submit your proposal using this form. Small teams are also acceptable, but the scope of the project must increase to match. Use the same form if you wish to propose a group project. For example, we will approve two-person teams that propose building Tetris as described below along with all extra credits to earn 100%. 

Unlike previous programs, your game is not required to load specific assets (models, textures or lighting). You are free to hard-code paths to the assets your game requires.

You may use any 3rd party game or graphics libraries you find, including three.js and Unity, to earn most  of the assignment credit. Students in 461 will lose 5% for using such libraries, while students in 561 will lose 10%. For full credit, use only WebGL. You may not use code from any implementation of Tetris you find online. We are aware of several such implementations and will be comparing them to your code.

Part 0: Partial feedback
You should turn in an "ugly," incomplete version of your program by the date noted above. If you simply turn in something that makes an image, you will receive full marks (5%), and receive comments on what you've done. We will not otherwise grade the assignment at this point, only comment on it.

Part 1: Properly turned in program
Remember that 5% of your assignment grade is for correctly submitting your work! For more information about how to correctly submit, see this page on the class website. Since we encourage variation in your games, make sure to include a readme file.

For this assignment only, you can also earn extra credit (461: 2%; 561: 1%) by allowing us to make your assignment public, and providing us with some extra material to aid us in that. We will pick a few of the best assignments and publish them on our course website. If you wish to allow us, please also deliver:
  • a description: your game in four sentences or less
  • a screencast: a video walking us through your game within a few minutes. We suggest using Google Meet to create the video, by starting a Meet with only yourself logged in through NCSU, presenting the tab with your game in it, and pressing record. The video will appear in the Meet Recordings folder of your NCSU G Drive.
Assignment material is due online by the time of your final, as noted above. You must also demo your game live to teaching staff, during one of these Google Calendar appointment slots (to appear), which you must reserve yourself. In exceptional circumstances, earlier or recorded demonstrations may be arranged with the approval of staff. Late demos are not possible. If you do not demo your game, you will forfeit the full 5% for proper turn in. For 461 only, late improvements of assignments will be accepted online through November 24, with a late penalty of 3%.

During the final exam period, you may optionally demo your game remotely in front of the class (without a separate demo to staff). If you do, you will enter the competition for a $20 Amazon gift card. You will win if your fellow students vote your game the best. Students in teams cannot enter the competition.

Part 2: Display the playing field
Create and render the playing environment needed for the game. You should display a rectangular field, roughly twice as tall as it is wide, with a small amount of depth. Models should be 3D, and the projection must be perspective. Fancy modeling is not necessary; cubes and spheres are enough. No motion is required for credit in this part. You may wish to display a faint grid on the back of the field.

Part 3: Display the pieces
Display at least five differently shaped tetrominoes, made up of a few smaller shapes (e.g. cubes, spheres). For this part, the tetrominoes may simply float inside the field. The player should also be able to change their view, using the keyboard or mouse.

Part 4: Animate the pieces
The tetrominoes should appear at the top of the field, and move toward the bottom, step by step. When they reach the bottom, they should stop moving.

Part 5: Add collision detection
The tetrominoes should also stop moving when they collide with another tetromino. We suggest modeling collision using an internal grid, with cells just containing the smaller shapes that make up the tetromino (e.g. a linear tetromino contains four cubes, each of which fits in a grid cell). If a falling tetromino would move into an occupied cell, it stops moving, and occupies the cells it spans. As soon as a cell at the top of the field is occupied, the game ends.

Part 6: Make pieces interactive
When the user presses the left or right key, the tetromino will translate one step to the left or right. When the user presses the up key, the tetromino will rotate through four orientations (0, 90, 180, 270 degrees), aligned with the playing field. The down key will advance the tetromino several steps downward at once. The space key will move the tetromino immediately to the bottom of the field (or to the topmost tetromino).

Part 7: Clear layers when full
When the smaller shapes in several tetrominoes have completely filled a row in the playing field, the smaller shapes disappear, and those above it move down. This delays the end of the game. 

EXTRA CREDIT GRADING:
Extra credit opportunities include the following, with values in format (461, 561)%. Other extra credits are possible, but must be approved by teaching staff in advance to ensure credit:
  • (1, ⅓)% — track and display score. You can choose any scoring scale you want. Typically, one scores in Tetris by clearing a layer.
  • (1, ⅓)% — add a "first-" or "third-person" view, with the camera attached to the tetromino.
  • (1, ⅓)% — add animated effects, which appear when the tetromino advances downward with the down or space keys, and when a layer is cleared.
  • (2, ½)% — play music, and on game events play a sound, e.g. on collisions and clearing layers.
  • (2, ½)% — add at least one level, which increases difficulty after an achievement. In Tetris, this typically happens when a certain number of layers are cleared, which increases speed.
  • (2, ½)% — add two power ups, e.g. briefly slow gameplay, turn off collisions or remove an inconvenient tetromino. 
  • (2, ½)% — support a second player, either with different keys or the mouse.
  • (10, 3)% — full 3D tetris: a cubic field of play, rotation in 3D and translation in 2D, 3D view control to enable 3D play.

Target output for program 4

 Hey everyone, here is the target output for program 4.