Lab 1c

Due: Sunday, May 16th 2021, 23:59

Start Early!!!

---

Individual Effort:

No team participation is really encouraged in the case of the homework or the labs.
You're are not allowed to use any libraries or extra code except gl-matrix, webgl-utils.js and some helper functions in order to initialize WebGL / load shaders. Especially Three.js is not allowed! If you're not sure or want to use some library, ask the teaching assistants before.

---

Objectives:

• To understand 3D transformations.
• To understand the 3D viewing pipeline.
• To understand different shading options.
• To understand collision detection.
• To have fun.

---

Goal:

Create a playable 3D Tetris game!

---

Tasks:

We recommend to you to lay out a plan on how to approach this lab. Again, there are two main phases - the "object" and the "grid" phase. During the "object" phase you are manipulating a 3D object (move and rotate). During the "grid" phase you will have to rasterize this 3D object and manipulate a 3D grid (i.e. test whether a whole horizontal x-z-slice can be removed.)

• T1: (10%) Render grid, setup camera
  Create an html-page with a canvas and a view of an empty grid. The default view should be a view from the top of the grid downwards (looking down the negative y axis of the grid). Your default camera should be an orthographic camera, that centers the playing field. Show the playing field bounding box as a wireframe. The wireframe should only show the wireframe on the three sides that are not obstructing the view of the tetracubes.
  Here's a screenshot to give you an idea how it should look like:
  

• T2: (20%) Object phase
  Define all eight tetracubes (see also wikipedia). Use the following key-strokes to manipulate the object (assuming a right-handed coordinate system):

  • "->" or "d": move the object drawn one unit in the positive x direction
  • "<-" or "a": move the object drawn one unit in the negative x direction
  • "/\" or "w": move the object drawn one unit in the negative z direction
  • "\/" or "s": move the object drawn one unit in the positive z direction
  • "x": rotate the object drawn 90 degrees counterclockwise around the x axis
  • "X": rotate the object drawn 90 degrees clockwise around the x axis
  • "y": rotate the object drawn 90 degrees counterclockwise around the y axis
  • "Y": rotate the object drawn 90 degrees clockwise around the y axis
  • "z": rotate the object drawn 90 degrees counterclockwise around the z axis
  • "Z": rotate the object drawn 90 degrees clockwise around the z axis
  • "p": (un)pause the game (i.e. stop/restart gravity)

  Again - the movements should be animated and gravity (down the y-axis) should be implemented. Please make sure that the game remains "playable", i.e. that the pieces don't move too fast (nor too slow).

• T3: (30%) Data structure and collision detection
  It's important that collision detection works properly (blocks should be non-overlaping, objects should not move out of the array etc.) Whenever the user hits the space bar, release the control of the current object (and have it drop down) and introduce a new object at the top of the drawing area. Make sure you delete a whole 2D slice if it is completely filled with object blocks.

• T4: (5%) Toggle grid
  Include a switch ("g") that toggles between displaying the underlying 3D grid as a wireframe or not showing this grid. Note: the wireframe mentioned in the setup section should be displayed at all times! This will be a good debugging aid for you as well.

• T5: (15%) Change the viewpoint
  It's time for a change of view! You should add the following camera-controls:

  • "j": the viewpoint should rotate counterclockwise about the Y-axis around the center of the grid.
  • "l": the viewpoint should rotate clockwise about the Y-axis around the center of the grid.
  • "i": the viewpoint should rotate counterclockwise about the X-axis around the center of the grid.
  • "k": the viewpoint should rotate clockwise about the X-axis around the center of the grid.
  • "u": the viewpoint should rotate counterclockwise about the Z-axis around the center of the grid.
  • "o": the viewpoint should rotate clockwise about the Z-axis around the center of the grid.
  • "+": zoom in
  • "-": zoom out.
  • "v": toggle between orthographic and perspective viewing.
  • Moving the mouse to the left: the viewpoint should rotate clockwise about the Y-axis around the center of the grid.
  • Moving the mouse to the right: the viewpoint should rotate counterclockwise about the Y-axis around the center of the grid.

• T6: (10%) Shading
  Include an ambient/diffuse/specular component which the user can change through the gui. All objects have the same material coefficients. However, their color is determined just like in lab one - randomly per object. Also include a switch ("f") that toggles between Gouraud and Per-Pixel-shading. The light source should be at infinity with a direction of (-1, -1, -1).

• T7: (5%) Texturing
  So far you have been using color to distinguish your tetrominos. Now, use some textures. Still at random, but on average, every fifth tetromino should use a texture to tell it apart from others. Which texture(s) you assign is up to you - be as creative as you want and as diligent as required.

• T8: (5%) Cylinders
  Include a switch ("b"), such that when you render the object, each block of the grid (belonging to the object) should be displayed as a cylinder. Pressing "b" again should reverse to the default, i.e. rendering blocks as cubes.

---

Extra Credit (max 10%)

• B1: (5%) "Game Over" Screen
  If you detect that the game is over, display a new window that displays the message "Game Over" and has a button to start a new game.

• B2: (5%) Transparent Blocks
  Blocks often will block the player's view making it difficult to navigate the current block to its destination. Detect view-blocking blocks and make them temporarily transparent.

• B3: (2.5%) Special Effects (up to two of the below)
  

  • let the last row explode when disappering
  • at random every 5th block or so should be transparent
  • let the block change their color after they have reached the ground
  • let blocks fade out before they disappear
  • anything creative you can think of

• B4: (5%) Drop-shadow
  Project a shadow onto the ground-plane by a simple projection matrix, like we discussed in class. The purpose of this drop-shadow is to predict the position where the tetracube will fall. I.e. You should create a special light source, different from the lightsource above.

---

Submission

• Be sure to double check your final submission by unzipping it in another directory, best on a different computer
• Provide a 'readme.txt' file in which you describe the following:
  1. A 'claim'-section in which you describe an overview of which tasks you actually implemented (T1, T2, T3, T4, T5, T6, etc.)
     • Provide additional remarks if you somehow implemented them only partially or if there are any noteworthy mistakes.
     • Failing to do so will lead to a worse mark.
  2. A 'tested environments'-section, describing for instance the OS of dev-computer, OS of test-computer, browsers (+version) used for testing, ...
  3. A 'additional and general remarks'-section, containing additional noteworthy comments (if applicable).
• Include everything required by your program in your submission including: objects, textures, etc...
• Submit your files on Moodle.

---

Grading Criteria

Grading the labs will be based on the correctness and the adherence to assignment specification.
Following issues will lead to point deductions (up to):

• -10%: very bad readability and structure of code, no use of comments, very bad indentation, etc.
• -10%: ignoring adherence to lab procedures (see submission section)
• -5%: very bad efficiency

In order to get a full mark, you need to do all of the assigned tasks AND adhere to to lab procedures while creating readable and efficient code. I.e. if you accomplish only 70% of the tasks correctly, but you do not adhere to lab procedures, your final mark will be 70*(1-0.05) = 66.5%.