Lab 1a

Due: Sunday, Nov 1th 2020, 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.




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.


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.

Pre-requirement: Lab 0

Set up a basic WebGL program, which initializes the drawing window.

T1: Camera position and 3D-shapes (20%)

Create a scene with 9 3D shapes which can be seen from the camera.

T2: Add user interaction to move camera (20%)

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.

T3: Add user interaction with the objects

Respond to more user interaction from the keyboard. The following actions should be implemented:

T4: Use 3D-models (20%)

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.



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):

Therefore, 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.