VU Graphics

Lab 1a

Due: Sunday, Mar 28th 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:

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.

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.

Pre-requirement: Prep - Lab 1

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.

The camera must initially lie on the positive z-axis and is in the beginning not allowed to be in the global center (0,0,0).
The shapes have to be 3D and not flat. For example: cubes, pyramids, cones.
You need at least two different types of shapes!
Since shading is not required for this assignment, each face should be a different colour so that transformations can be seen more easily.

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

Respond to user interaction from mouse and 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). Clicking and dragging will visually move (translate) the scene around in the world, according to the direction of the movement. Practically, this is an inverse operation to the camera movement with the arrow keys (e.g. dragging left means the camera moves right). Both interaction schemes will ultimatively have the same end results, namely moving the camera in the world. 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:

a) selection (10%)
- 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 relative to the center of 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).
b) scaling (10%)
- '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
c) rotations (10%)
- The center of the rotation should be the center of the coordinate system of the shape.
d) translations (using arrow keys) (10%)
- ">" (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

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.

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. Smart modularization can help you in later assignments.

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(a,b,c,d), T4)
  - 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

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.