IE500217 – Computer Graphics

Assignment 4 (Practical assignment 2)

Creating an interactive 3D scene in WebGL

Due date: October 31, 2022, 23:59.

1 Objectives
The goal of this assignment is to create an interactive 3D scene in WebGL consisting of different 3D objects.
More precisely, this assignment will cover:
• Shaders;
• Attribute, uniform, and varying variables;

• Buffers;
• Model, view, and projection matrices;
• 3D objects;

• Interaction;
• Animation.

2 Requirements
Your development files should be submitted on Blackboard in a .zip file containing:
• src/
– All of your JavaScript files
• index.html

• package-lock.json
• package.json
• styles.css

The application should have the following components:

• You should create a WebGL scene.
• You should implement a perspective camera and specify the viewing direction (view and projection matrices).
The camera can be static.

• You should implement at least six of the following primitives:

– Plane.
– Cube.
– Square pyramid.
– Disc.
– Cylinder.
– Cone (circular pyramid).
– Sphere.
– Torus.

• You should add HTML elements to interact with the scene:

1
 – The user should be able to add any number of objects of each primitive type. Each object should have
a unique name and it should be possible to define the initial position/rotation/scale of the object.
– It should be possible to select any of the already created objects. This could be done simply by having
a multiple select HTML element with the object IDs.
– It should be possible to modify the currently selected object in the following manners:
∗ Move, rotate and scale the selected object with keyboard commands.
∗ Set the color of the selected object. Color can be set by typing red, green and blue values, or
by selecting from a palette of predefined colors (for example with the input type=”color” HTML
element). You should only apply one color per object.
∗ Delete the selected object.
∗ Clear the transformations of the selected object (model matrix). This could be done by clearing
all transformations at once, or by clearing translation, rotation or scaling individually.
• The scene should be rendered using a Z-buffer (depth buffer).
Optional components:

• You should apply a texture to the primitives.

• You should add a point light and an ambient light to the scene.
When programming, you should use the clean code principles detailed in Lecture 3 (variables and function names,
functions, comments, formatting).

3 Template
You can use the scene builder template to start this assignment. It is available on Blackboard at:
Learning materials/Practical Sessions/Templates/03−Scene−builder
This project allows the user to dynamically add objects (quads or cubes) to a WebGL scene. Here is a short
description:
• The src/shaders/ folder contains the vertex and fragment shaders.
• The src/scene.js file contains the Scene class. This class:

– Initialize the WebGL scene.

– Contains a list of objects (primitives) and functions to modify this list.
– Can draw the each object present in the list.
• The src/objects/ folder contains a list of objects (Quad and Cube) used by the Scene class.

• src/index.js contains the main script. It defines a Scene object and handle the user interaction.