- Individual Effort:
- No team participation is really encouraged in the case of the
homework or the labs.
You're 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 the development of graphics programs.
- To understand transformations.
- To investigate basic interactive programming.
- To create a simple user interface.
- To become closely familiar with the WebGL rendering pipeline.
- To become experts in debugging graphics code.
- To have fun.
Do the following before you proceed:
- Make sure you have read and understood the background and
became familiar with the working environment that you should
have gotten to know in
Lab 0.
- You have a fridge full of nutritious food.
Goal
The goal of this lab is to create a simple, interactive 3D application. The focus
is on the development of a graphics program and how to handle geometry,
rotation, translation, and user interaction. Most of the concepts
are laid out in the book as well as in class with example programs.
Tasks
Follow this guideline step-by-step. Make sure that you thoroughly test
your program after each step so that you can find bugs easier and quicker.
(10%) Drawing Window
Set up a basic WebGL program, which initializes the drawing
window.
(15%) Adding 3D-shapes
Create a scene with 9 3D shapes which can be seen from the camera.
The shapes have to be 3D and not flat. For example: cubes, pyramids, cones.
Since shading is not required for this assignment, each face should be a different colour so that transformations can be seen more easily.
(15%) Add user interaction to move camera
Respond to user interaction from the keyboard.
The arrow keys move (translate) the camera in the scene. (left and right in the x-coordinate, up and down in the y-coordinate).
Please note: if done correctly, this step should ensure that you have a correct implementation of OCS, WCS and VCS.
(40%) Add user interaction with the objects
Respond to more user interaction from the keyboard.
The following actions should be implemented:
- selection
-
The user should be able to select the active shape by pressing the number keys between '1' and '9'.
Show the highlighted shape by displaying its local coordinate system overlaid on it.
Only the selected shape should move when performing transformations, the transformations should apply to the local coordinate system of the shape.
- Pressing the '0' key should select all shapes and transformation should apply to the global coordinate system.
- Clicking the 'c' button should activate the camera movements (after clicking 'c', interaction with arrow keys will move (translate) the camera).
- scaling
- 'x': decrease the width of the shape by a factor of 0.9
- 'X': increase the width of the shape by a factor of 1.1
- 'y': decrease the height of the shape by a factor of 0.9
- 'Y': increase the height of the shape by a factor of 1.1
- 'z': decrease the depth of the shape by a factor of 0.9
- 'Z': increase the depth of the shape by a factor of 1.1
- rotations
-
The center of the rotation should be the center of the coordinate system of the shape.
- "w": rotate the current shape clockwise about the x-axis
- "s": rotate the current shape counterclockwise about the x-axis
- "e": rotate the current shape clockwise about the y-axis
- "q": rotate the current shape counterclockwise about the y-axis
- "d": rotate the current shape clockwise about the z-axis
- "a": rotate the current shape counterclockwise about the z-axis
- translations (using arrow keys)
- ">" (right): move the shape to the right
- "<" (left): move the shape to the left
- "/\" (up): move the shape up
- "\/" (down): move the shape down
- "," (comma): move the shape forward
- "." (period): move the shape backward
(20%) Use 3D-models
Import and use 3D models in addition to the basic 3D shapes.
For example, these models.
In order to correctly parse and use these models you will have to learn about the OBJ file format.
Please note: Without proper lighting, the results will appear flat. This is ok for this step though, lighting will be applied in the next part of the lab.
Hints
- Do not worry about intersection tests among the shapes.
- Once you have proof-of-concept, do not write all your code in one big file. Early modularization can help you in later assignments.
Submission
Grading Criteria
Grading the labs will be based on the following:
- 80%: Correctness and adherence to assignment specification.
- 10%: Readability and structure of code, use of comments, indentation, etc.
- 5%: Efficiency and speed (only an issue if its very inefficient)
- 5%: Adherence to lab procedures (submitting, naming conventions, etc)