Lab 1c

Due: Sunday, May 28th 2023, 23:59

---

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.
  The baseplate of the grid must be at least 4x4 fields big. You can choose any size between 4x4 and 8x8 fields, depending on your preference.
  The height of the grid has to be at least 10 fields.
  Here's a screenshot to give you an idea how it could 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%.