Program 5 2019: putting it all together — Bezerk!

Due: by final exam time:
  • For 461: Tuesday, December 10th 8am
  • For 561: Thursday, December 12th 1pm

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

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

The main components of this programming assignment are:
  • 10% Part 0: properly turned in program (new requirements!)
  • 15% Part 1: display the playing field
  • 25% Part 2: display and animate player
  • 25% Part 3: display and animate robots
  • 25% Part 4: add shooting interactions
  • Participation credit: Receive participation credit (outside of this assignment) for posting your resulting imagery and video, good or bad, on the class forum!

Our suggested game is a 3D version of Bezerk. If you are not familiar with the game, you can play it online here, here or here, view some historic gameplay here, 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 Tuesday November 26. To obtain that approval, send an email to Prof. Watson (and copy our TA) with a short description of your proposed game and begin a dialog. Small teams are also acceptable, but the scope of the project must increase to match. Again, obtain approval for teams from your instructor, to increase project scope.

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, to earn 90% of the assignment credit. For full credit, use only WebGL. You may not use code from any implementation of Bezerk you find online.

Part 0: Properly turned in program
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. 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 YouTube itself to capture the video, then download the video and upload it for turnin.
Assignment material is due online by the time of your final. You must also demo your game in class during the final. In exceptional circumstances, earlier demonstrations may be arranged. Late demos are not possible. Late online turn in of assignments will be accepted through December 13. In 461, you will lose 3% if your assignment is turned in by 12/12, and 9% by 12/13. In 561, you will lose 3% if you turn your assignment in on 12/13.

During the final exam period, you may optionally demo your assignment in front of the class. 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 1: Display the playing field
Create and render the playing environment needed for the game. You should display a roughly planar terrain surrounded by walls, and with other walls dividing the space. Models should be 3D, though the projections may be orthogonal. Fancy modeling is not necessary; cubes and spheres are enough. No motion is required for credit in this part.

Part 2: Display and animate the player
Model and animate the player. It moves north, south, east or west when the user presses a key (wasd and/or arrows). The player dies if it hits a wall.

Part 3: Display and animate the robots
Model and animate multiple robots. They move north, south east or west automatically, and do not pass through walls or each other. If they collide with the player, the player dies.

Part 4: Add shooting interactions
Players can shoot in the (cardinal) direction they are moving by pressing the space bar. Robots will also automatically shoot at the player in cardinal directions. If robot shots hit the player, the player dies. Similarly, robot shots can kill other robots. Shots are not instant: they move slowly toward their target.

Extra credit opportunities include the following, with values in format (461, 561)%:
  • (1, ⅓)% — track and display score. You can choose any scoring scale you want.
  • (1, ⅓)% — add an optional over-the-shoulder view (of the player).
  • (1, ⅓)% — add animated explosions, which appear at collisions and when shots land.
  • (1, ½)% — animate the motion of the player and robots, using running keyframes
  • (2, ½)% — play music, and on game events play a sound, e.g. on collisions
  • (2, ½)% — add evil Otto, who cannot be shot and kills the player on collision
  • (2, ½)% — add at least one level, by navigating out of a door in the external wall
  • (2, ½)% — add two power ups, e.g. slow gameplay, turn off collisions
  • (2, ½)% — support a second player, either with different keys or the mouse

Target output for Program 4 (Updated)

Hey Folks,

   Here are the outputs that I am getting. Following are the inputs that I have used: 

Unlit Texture

Lighting (without Transparency)

Lighting (with Transparency)

Lightmap (without Transparency)

Lightmap (with Transparency)


Program 4 2019: texturing and transparency

Due: 11:59pm, Friday November 15

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.

The main components of this programming assignment are:
  • 10% Part 0: properly turned in assignment
  • 40% Part 1: render the input triangles, textured but without lighting
  • 10% Part 2: render using lightmaps and texture
  • 10% Part 3: render using 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!

You will render triangles, described in the same sorts of JSON input files used in the second 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 using JSON. An example input files reside at this URL in hardcode as the locations of the input triangle 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.

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 When you load the texture from github, some browsers will deem it a cross-origin risk and invalidate ("taint") your canvas. To avoid this problem set the image's crossOrigin attribute to "Anonymous". For more details click 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.

We will provide a shell in which you can build your code. You will run the shell here, and see its code here. This shell will be is a correct implementation of program 2, which also loads an image (which can ultimately become a texture) as the canvas background. Default viewing parameters are the same as in the first two assignments. We will also provide you with a solution for program 3, as soon as late turnin expires.

You should code the core of this assignment yourself. You may not use others' code to implement texturing, blend texture with lightmaps or 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 if what you are contemplating is permissible, simply ask me or the TA.

Part 0: 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 1: Render the input triangles, textured but without lighting
Use WebGL to render unlit triangles, 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.

Part 2: Render with texture and lightmaps
Improve your renderer to shade fragments by mixing texture with a second special texture, a lightmap, which describes the light cast by a specific light source. Read in the second lightmap texture, and combine the two textures by multiplying them component by component in the fragment shader: C = CtCm, where Ct is the texture color, and Cm the lightmap color. Show the unlit texture when the u key is pressed, and the lightmapped texture when the m key is pressed. Example lightmaps can be found in here and here.

Part 3: Render with texture and lighting
Improve your renderer to shade fragments by mixing texture with Blinn-Phong lighting. A simple approach is modulation, which multiplies the lit fragment Cb with the the texture value Ct: C = CbCt. Show Blinn-Phong mixed with texture when the b key is pressed, the lightmapped texture when the m key is pressed, and the the unlit texture when the u key is pressed.

Part 4: Render with texture, lighting/lightmaps and transparency
Improve your renderer again 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)). Include alpha you find in textures, and multiply it with alpha from the triangle to get the final alpha, as you did the RGB components.

The extra credit components we suggest for this assignment are:
  • 461: 1% — support ellipses
  • 461: 2% — 561: 1% — improve transparency correctness with partial sorting
  • 461: 5% — 561: 2% — improve transparency correctness further with a BSP tree
Other extra credit is possible with instructor approval. You must note any extra credit in your file, otherwise you will likely not receive credit for it.

Extra credit: support ellipses
Render ellipses as well as triangles. The new complication here is that you will have to generate uv texture coordinates. We recommend using a latitude longitude mapping.

Extra credit: improve transparency correctness with a partial sort
Now 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, improving correctness.

Target output for Program 3

Hey folks,

   Here is the output in the form of a GIF that I am getting so far for program 3. Following is the input that I have used: 
Note: Don't limit yourself with the sample input files that we have provided. Do test your program on different inputs, for example, input with more triangles, different orientation, or with an object made up of multiple triangles.


Thursday in 561: NVIDIA's David Luebke

David Luebke, VP Graphics Research at NVIDIA
Thursday's guest speaker in 561 will be David Luebke, VP Graphics Research at NVIDIA, who will speak on the use of AI in computer graphics.

David co-founded NVIDIA Research in 2006, after eight rewarding years on the faculty at the University of Virginia. He runs graphics research at NVIDIA, with his research interests including VR/AR, ray tracing, real-time rendering, GPU computing, and the intersection of machine learning with computer graphics. He was recently elevated to IEEE Fellow "for contributions to GPU computing and computer graphics."

Tuesday: NVIDIA's Josef Spjut

Josef Spjut, research scientist at NVIDIA    @josefspjut
Tuesday's guest speaker will be Josef Spjut of NVIDIA Research, who will speak on ray tracing in high framerate displays.

Josef works to improve human experience through the development of hardware and software to enable new human computer interactions, such as virtual and augmented reality. Lately, his research has begun to focus on esports. Previously, Josef worked on the “RT Core” ray tracing hardware in the Turing GPU architecture. Prior to his work at NVIDIA, Josef was a visiting professor at Harvey Mudd. He earned his PhD in Computing at the University of Utah, and his BS at UC Riverside.

Come to our next NexUX meetup Friday afternoon, and earn extra credit!

Come to the nexUX Meetup!
Leah Kaufman, Senior UX Research Manager, Lenovo Global UX eCommerce Team   Leah on linkedin
Leah Kaufman, Senior UX Research Manager, Lenovo Global UX eCommerce Team

Your Digital Wardrobe: Studying Tech Use Over Time— Friday, October 18 3PM @ Design’s Burns Auditorium

Your laptop, Alexa, phone, Nest, Roomba, baby monitor, Smart Doorbell — our devices weave in and out of our daily activities. But what happened to the ones we had five years ago? Ten years ago? Our devices mediate relationships, memories, events, and more; and every time we add, drop or change devices, the way we view ourselves shifts just a bit. During this session we’ll look at the chronology of our digital wardrobes and how to study our relationship with technology.
Please bring your questions to the meetup!
Leah Kaufman has been senior UX research manager at Lenovo since 2015, leading a team of 5 researchers who study and test the usability of Lenovo's websites world-wide. She has been UX since before it was "UX", studying cognitive psychology at U. Washington in the late 80s, working on Microsoft’s usability team through the 90s, and doing UX research in Seattle’s start-up scene and at Getty Images.
As always with our meetups, this is not a "sit back and listen" meeting, but a chance for us to bring together a cross disciplinary group of people to think about the relationship between UX, technology, and design. Mostly though, we'll get to know one another, and have some fun. If you'll come, please RSVP!
NOTE: This year’s meetups will take place at NC State’s College of Design, in its Burns Auditorium. Please see our meetups page for details.
RSVP to this Meetup
This year, our meetups happen at Burns Auditorium in Kamphoefner Hall (gmap) at the College of Design on NCSU’s Main Campus, with a few exceptions.
To get to the meetup by:
  • foot: From Pullen Road, go down the steps on either side of the columns of Brooks Hall to enter the inner courtyard, Kamphoefner Hall is across the courtyard. From Stinson Drive, enter the corner of Kamphoefner Hall. Burns Auditorium is on the first and second floors.
  • bus: Free NCSU Wolfline buses service the Hunt Library on several routes. See the full system map (PDF) or the real-time bus tracking map. Get off on Pullen Road next to Brooks Hall.
  • car: Park in an hourly lot, and pay with credit card ($2/hr). The closest lots, in order, are by the clock tower, the Ferndell lot across Hillsborough, and the across the track under the Coliseum Deck. There is also paid city parking on Hillsborough and Pullen.