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.
