GRAPHICS SYSTEMS

AND
INTERACTION
Assignment

Abstract
Assignment description
Assignment details

João Paulo Pereira

jjp@isep.ipp.pt
Table of Contents
Assignment description ................................................................................................................................ 1
Assignment details ........................................................................................................................................ 1
References .................................................................................................................................................... 3

i
Table of Tables
Table 1 – Assignment details ........................................................................................................................ 1

iii
Assignment description
The assignment consists in the development of the Graphics Systems and Interaction (SGRAI) module
defined within the scope of Laboratory/Project V (LAPR5) course unit.

This component can be implemented in WebGL [1] [2] [3], or in a higher-level API such as three.js [4]
(recommended) or Babylon.js [5]. The graphical user interface and animations may rely on dedicated APIs
such as lil-gui [6] [7] and tween.js [8], respectively. The use of APIs other than these must be previously
and explicitly approved by SGRAI teachers.

The assignment should focus on the following aspects: modeling/importing 3D models, viewing, user
interaction, animation/logic, lighting, and texture mapping. The originality, the gameplay (if applicable)
the realism, the aesthetics and the technical quality of the work are, of course, important factors to
consider in the evaluation. Also, the use of advanced Computer Graphics techniques – for example,
multiple viewports, menus, picking, transparencies, overlays, billboarding (if applicable), shadows (if
applicable), fog (if applicable), among others – and the inclusion of audio (background music and sound
effects, if applicable) will be taken into account.

The delivery of the component must be accompanied by a short report in PDF format – two pages at most
and only in the final delivery – containing a brief description of the assignment, the identification of the
technologies used, the interaction adopted (identification of keys being used and of mouse actions, if
applicable) and any other peculiarities considered worthy of reference.

Assignment details
The following table summarizes the assignment accomplishment mode, delivery mode and deadlines, and
dates and places of presentations.
Table 1 – Assignment details

Accomplishment mode Groups of 4 elements. Mandatory execution and presentation for

Delivery mode
Delivery deadline (first iteration)
Date and place of presentation
(evaluation of the first iteration)
Delivery deadline (final iteration)
Date and place of presentation
(final evaluation)
Weight, minimum grade required
all students. Individual assessment
File submission in SGRAI Moodle, with the name
“SGRAI_studentNumber1_ studentNumber2_ studentNumber3_
studentNumber4.zip”
04-12-2022 (Sunday) at 23:55
Week of 05-12-2022, in lab classes
08-01-2023 (Sunday), at 23:55
Week of 09-01-2023, in lab classes
70%, 8.0

1
References

[1] Wikipedia, "WebGL," [Online]. Available: https://en.wikipedia.org/wiki/WebGL. [Accessed 12

October 2021].

[2] Khronos Group, "WebGL Public Wiki," [Online]. Available:

https://www.khronos.org/webgl/wiki/Main_Page. [Accessed 12 October 2021].

[3] Khronos Group, "WebGL Overview," [Online]. Available: https://www.khronos.org/webgl. [Accessed

12 October 2021].

[4] Three.js, "Three.js – JavaScript 3D Libray," [Online]. Available: https://threejs.org. [Accessed 25 July
2021].

[5] Babylon.js, "Babylon.js: Powerful, Beautiful, Simple, Open – Web-Based 3D At Its Best," [Online].
Available: https://www.babylonjs.com. [Accessed 12 October 2021].

[6] GitHub, "lil-gui: Makes a floating panel for controllers on the web. Works as a drop-in replacement
for dat.gui in most projects," [Online]. Available: https://github.com/georgealways/lil-gui. [Accessed
01 September 2022].

[7] G. M. Brower, "lil-gui 0.17.0," [Online]. Available: https://lil-gui.georgealways.com/. [Accessed 01

September 2022].

[8] GitHub, "tween.js: JavaScript/TypeScript animation engine," [Online]. Available:

https://github.com/tweenjs/tween.js. [Accessed 23 October 2021].