VU Graphics

Lab 1a

3D Transformations and Interaction

Due: Sunday, Oct 28th 2018, 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 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.

(25%) Set up a drawing window and draw a simple box
Set up a basic WebGL program, which initializes the drawing window. Draw a simple triangle.
(25%) Adding 3D shapes Create a scene with 9 3D shapes which can be seen from the camera. The shapes should be 3D and not flat. For example: cubes, spheres, cones, or a combination of them. Since shading is not required for this assignment, each face should be a different colour so that transformations can more easily be seen.
(50%) Add simple user interaction with the shapes
Respond to user interaction from the keyboard. Implement the following:
- 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.
- 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
  - "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
  The center of the rotation should be the center of the coordinate system of the shape.
- 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

Extra Credit (max 10%)

(5%) Camera movement
Move the camera around the scene. Use the 'c' key to select camera movement. Press it again to go back to shape transformations.
(5%) Use 3D models
Import and use 3D models instead of basic 3D shapes. For example, these models. In order to correctly parse and use these models you will need to learn a bit about the OBJ file format.

Hints

Do not worry about intersection tests among the shapes.
Do not write all your code in one big file. Be as modular as you can.
Keep in mind what you will need for assignment 1b which directly follows this one.

Submission

Be sure to double check your final submission by unzipping it in another directory on a computer in the PC LAB and testing it. (Especially for last minute submissions.) A project that doesn't run will lose more points than one that is one day late.
Be sure to submit any comments or remarks in a 'readme.txt' file.
Submit your files on Moodle.
Include everything required by your program in your submission including: objects, textures, etc...

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)

Last modified: September 29, 2018

Manfred Klaffenboeck / manfred DOT klaffenboeck AT univie DOT ac DOT at