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.

AR project proposal form

Folks,

If you would like to propose an AR project as an alternative to progs 4 and 5 this semester, please use this form to submit it. Please do so by Friday evening.

ProfW

Program 4, 2020: Texture and Transparency (updated 10/27/20)

Partial Due: 11:59pm, Friday Monday October 23 26

Final Due: 11:59pm, Friday Monday October 30 November 2

Goal: In this assignment you will learn about rendering textured and transparent models using the WebGL rasterization API.

Submission: Submit your assignment using this Google Form.


BASIC GRADING:
The main components of this programming assignment are:
  • 5% Part 0: partial feedback
  • 5% Part 1: properly turned in assignment
  • 30% Part 2: render the input triangles and ellipsoids, textured but without lighting
  • 30% Part 3: render using both lighting and texture
  • 30% Part 4: render using lighting, texture and transparency
  • Participation: Receive participation credit (outside of this assignment) for posting images of your progress, good or bad, on the class forum!

General:
You will render triangles and ellipsoids, described in the same sorts of JSON input files used in the third assignment. We will again 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 and ellipsoids using JSON. Example input files reside at https://ncsucgclass.github.io/prog4/triangles.json and https://ncsucgclass.github.io/prog4/ellipsoids.jsonUse these URLs in hardcode as the locations of the input triangles and ellipsoids files — they 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 and ellipsoid files. These files have been improved to include texture file names and alpha values. The triangles files also contain vertex normals and uv coordinates. 

For this assignment, we have made additions to the file format supporting a transparency alpha, texture filenames and texture coordinates. All textures will reside at the same URL as the model input files. For example, if the triangles.json file makes a reference to texture1.jpg, then it will reside at https://ncsucgclass.github.io/prog3/texture1.jpg. 

When you load texture images, you can only load them from your own server (hosting both your code and your images), or from a server that explicitly allows cross-origin access, like github.com. To access images from such an allowing server, set the image's crossOrigin attribute to "Anonymous". You can find more detail hereTexture loads happen asynchronously (on a different thread from your javascript), so your texture may not appear immediately. We recommend that you load a one pixel "dummy" texture locally to avoid runtime errors in the meanwhile, as shown here.

We are providing a shell in which you can build your code. You can run the shell here, and see its code here. This shell is a correct implementation of program 3, which also loads an image (which can ultimately become a texture) as the canvas background. Default viewing parameters are the same as in program 3.

This is an individual assignment, no exceptions. You should code the core of this assignment yourself. You may not use others' code to implement texturing, blend texture with lighting, or implement transparency. You may use math, matrix and modeling 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 that the advice you want to give or the code you want to use 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 October 23. 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. We will not otherwise grade the assignment at this point, only comment on it.

Part 1: Properly turned in assignment
Remember that 10% 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 2: Render the input triangles and ellipsoids, textured but without lighting
Use WebGL to render unlit triangles and ellipsoids, giving each fragment its textured color. Do not perform lighting. You will have to use the fragment shader to find the appropriate color in the texture. UV coordinates are provided with triangle sets, but must be generated for ellipsoids. We suggest latitude and longitude be mapped to [0,1].

Part 3: Render with texture and lighting
Improve your renderer to shade fragments by mixing texture with lighting. A simple approach is modulation, which uses the lit fragment Cf to scale the texture Ct: C = CfCt. You can find more ideas hereToggle across at least two light/texture blending modes (e.g. replace and modulate) when the b key is pressed.

Part 4: Render with texture, lighting and transparency
Improve your renderer further by adding transparency (alpha) to its rendering. To avoid transparent objects occluding other objects, you will have to first render opaque objects with z-buffering on, then transparent objects with the z-write component of z-buffering off (gl.depthMask(false)).


EXTRA CREDIT GRADING: 
The extra credit components we suggest for this assignment are:
  • 461: 1%  — 561: ½% — support transparent textures
  • 461: 1%  — 561: ½% — support multitexturing
  • 461: 2%  — 561: 1% — improve transparency correctness with the painter's algorithm
  • 461: 5%  — 561: 3% — improve transparency correctness further with a BSP tree
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: support transparent textures
Make use of the alpha component in textures during rendering. Use this to given your models irregular outlines. There are textures in the assignment repo that will produce this effect.

Extra credit: support multitexturing
Combine multiple textures when performing lighting of a model. For example, you could perform light mapping. We will include a texture in the assignment repo that supports light mapping.

Extra credit: improve transparency correctness with a partial sort
Sort your transparent triangles by depth to make transparency more correct. You must sort before rendering. You may have to issue a separate draw calls to ensure gpu parallelism does not undo your ordering.

Extra credit: improve transparency correctness further with a BSP tree
Sort your transparent triangles with a BSP tree to improve transparency further. This will split triangles when they intersect.

Target output for program 3

 Hey folks,

Here is the target output for program 3, the ellipsoids url is still the same as in description, the values have been modified a bit. 





Program 3, 2020: Rasterization

Partial Due: 11:59pm, Friday Oct 2

Final Due: 11:59pm, Friday Oct 9

Goal: In this assignment you will practice basic modeling and implement transforms and lighting on 3D objects using the WebGL rasterization API.

Submission: Submit your assignment using this Google Form.


BASIC GRADING:
The main components of this programming assignment are:
  • 5% Part 0: partial feedback
  • 5% Part 1: properly turned in assignment
  • 10% Part 2: render the input triangles, without lighting
  • 20% Part 3: model and render the input ellipsoids, without lighting
  • 20% Part 4: light the ellipsoids and triangles
  • 15% Part 5: interactively change view
  • 5% Part 6: interactively select a model
  • 20% Part 7: interactively transform the ellipsoids and triangles
  • Participation: Receive participation credit (outside of this assignment) for posting images of your progress, good or bad, on the class forum!

General:
You will only render triangles and ellipsoids 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 and ellipsoids using JSON. Example input files reside at https://ncsucgclass.github.io/prog3/triangles.json and https://ncsucgclass.github.io/prog3/ellipsoids.json. When you turn in your program, you should use these URLs in hardcode as the locations of the input triangles and ellipsoids files — they 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 and ellipsoid 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 without any model or view transform, and how to parse the input triangles.json file. It also shows how to use animation callbacks to render multiple image frames.

The default view and light are as in the first assignment. The eye is 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 (-0.5,1.5,-0.5).

This is an individual assignment, no exceptions. You should code the core of this assignment yourself. You should code the core of this assignment yourself. You may not use others' code to transform or project models or perform Blinn-Phong lighting. You may use math, matrix and modeling 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 the advice you want to give or code you want to use 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 October 2. 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 1: Properly turned in assignment
5% of your assignment grade is just for correctly submitting your work! For more information about how to correctly submit, see this page on the class website.

Part 2: Render the input triangles, without lighting
Use rasterization to render unlit triangles, giving each triangle its unmodified diffuse color (e.g, if the diffuse color of the triangle is (1,0,0), every pixel in it should be red). You will have to use vertex shaders to perform viewing and perspective transforms, and fragment shaders to select the diffuse color. We recommend the use of the glMatrix library for creating these transforms.

Part 3: Render the input ellipsoids, without lighting
Use rasterization to render unlit ellipsoids, giving each ellipsoid its unmodified diffuse color. There are no ellipsoid primitives available in WebGL, so you will have to build an ellipsoid out of triangles, then transform it to the right location and size. You can do this statically with a hardcoded sphere model, or procedurally with a latitude/longitude parameterization. You then scale this sphere to match its ellipsoidal parameters. Again you will have to use vertex shaders to perform viewing and perspective transforms, fragment shaders to select color.

Part 4: Light the ellipsoids and triangles
Shade the ellipsoids and triangles using per-fragment shading and the Blinn-Phong illumination model, using the reflectivity coefficients you find in the input files. Use triangle normals during lighting (which will reveal faceting on your ellipsoids). Your fragment shaders will perform the lighting calculation.

Part 5: interactively change view
Use the following key to action table to enable the user to change the view:
  • a and d — translate view left and right along view X
  • w and — translate view forward and backward along view Z
  • and e — translate view up and down along view Y
  • A and D — rotate view left and right around view Y (yaw)
  • W and — rotate view forward and backward around view X (pitch)
To implement these changes you will need to change the eye, lookAt and lookUp vectors used to form your viewing transform.

Part 6: Interactively select a model
Use the following key to action table to interactively select a certain model:
    • left and right — select and highlight the next/previous triangle set (previous off)
    • up and down — select and highlight the next/previous ellipsoid (previous off)
    • space — deselect and turn off highlight
    A triangle set is one entry in the input triangle array. To highlight, uniformly scale the selection by 20% (multiply x y and z by 1.2). To turn highlighting off, remove this scaling. You will have to associate a transform matrix with each ellipsoid and triangle to maintain state, and apply this transform in your vertex shaders. glMatrix will also be helpful here.

    Part 7: Interactively transform models
    Use the following key to action table to interactively transform the selected model:
    • k and ; — translate selection left and right along view X
    • o and — translate selection forward and backward along view Z
    • and p — translate selection up and down along view Y
    • K and : — rotate selection left and right around view Y (yaw)
    • O and — rotate selection forward and backward around view X (pitch)
    • and P — rotate selection clockwise and counterclockwise around view Z (roll)
    Translate the model after you rotate it (so the model rotates around itself), and after the highlighting scale (see above, so the model doesn't translate as it scales).


    EXTRA CREDIT GRADING: 
    The extra credit components we suggest for this assignment are below:
    • 461: 1% — arbitrarily sized viewports
    • 461: 1% — off-axis and rectangular projections
    • 461: 1% — multiple lights at arbitrary locations
    • 461: 3% — 561: 1% — smooth shading with vertex normals
    Students in 561 should not perform components that will not earn extra credit. Other components are 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 viewports 
    Accept a new square canvas (viewport) width/height through your UI. Size your canvas to match.

    Extra credit: Support off-axis and rectangular projections 
    Accept new window parameters in viewing coordinates through your UI (left, right, top, bottom). Adjust your projection matrix to this new window, and render the scene.

    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 all of these 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: Smooth shading with vertex normals 
    Using only triangle normals, your ellipsoids and other curved shapes will look disappointingly faceted. To represent curvature more accurately, you need vertex normals. As you generate ellipsoids from spheres, create vertex normals by subtracting the surface point from the sphere center. When you read in triangles, check for vertex normals in the input file. As you apply the composited modeling, viewing and projection matrices to your vertices, apply the inverse transpose of the modeling transform to your vertex normals. During lighting, use these normals rather than the face normal. The rasterizer will interpolate them for you.