... Wanna learn how to make good Pizza?


Introduction to Computer Graphis (UTS)

This subject helps students develop problem solving and communication skills in the context of
computer graphics, including shape representation, manipulation and visualization. It helps students
enhance their skills to design and implement three-dimensional (3D) computer images, such as
those used in animated films, virtual reality (VR), data visualisation and computer games. This
subject aims to give students a balance of theory and practice, both of which are important to the
understanding of and efficient development with computer graphics technology. Students will learn
fundamental principles of graphical pipelines and representations and put them into practice in the
modern context of WebGL via the ThreeJS framework.

Teaching Slides

Lesson 1 (INTRO)

Lesson 2 (Basic Transformations)

Lesson 3 (Geometric Transformations)

Lesson 4 (Lighting)

Lesson 5 (Shading)

Bonus Lesson (Summary)


Lesson 6 (Models)

Lesson 7 (Shapes)

Lesson 8 (Textures)
code (loading OBJ with textures)

Lesson 9 (Graphics Pipeline)

Lesson 10 (Shaders)

Additional Videos

A Short Video Showing How to Add a Model to your Scene

A Short Video Showing How to Interact with a Model and add Normal Map

A Short Video Showing How to Change a Mesh Dynamically
A Short Video Showing How to Change Camera Dynamically

Programming in Three.js (Check it is cool!!! )

Starting Base Code for Exercise

basic scene with small interaction (download code)
adding a simple GUI (download code)

adding transformations (download code)
Meshes (download code)

basic lightening (download code)
Texture (download code)

animation (download code)
Shaders (download code)

For running examples that requires loading texture or meshes you should follow this instructions to make the browser allows for data loading

run php -S from project's folder .. then just open a browser and type



The Lab Project

Possible Tracks for Course Final Project:

VIRTUAL MUSEUM : An interactive exploration of a museum. The user should move towards some rooms (by clicking or by using the keyboard or using some user interface)
  • The floor and the walls must have textures (even simple periodic one)
  • The museum shows various sculptures (3D meshes), the user can click on the sculpture to see some information
  • The user can change the lighting environment using the interface
  • Usage of Shaders is optional but may increase the final score.

: A virtual house that is customizable
  • change tilings
  • change lighting
  • change position of the objects
  • Usage of Shaders is optional but may increase the final score.

  • VIRTUAL CITY : Flying through a virtual city
    • Generate the terrain randomly
    • Place house and three models randomly
    • Possibility of changing the position of houses through clicking and repositioning
    • The light and the position the sun can can be controlled through a simple interface
    • Usage of Shaders is optional but may increase the final score.

  • PROPOSE YOUR OWN IDEA : With Following Constraints
    • Possibility of exploring interactively
    • Change the light environment interactively
    • Interact with the scene and with main parameters of the applications

ThreeJS Useful Links

Video Tutorials on ThreeJS

Software Development Studio 1 and 2

This studio subject focuses on aspects of practical software development. The overall aim of this studio is to provide a rich and attractive practice-based learning environment for software development students to deeply learn and become professionally competent. To realise these aims the studio focuses on the methods of reflective design practice, teamwork, mentoring, and deep learning techniques, including immersion in difficult problems within a complex environment. The subject allows students to move towards senior roles in teams, expects students to become accomplished in reflection, and demonstrate application of software development skills, with an accent on design.


Computing Science Studio

Physically-Plausible Animation of Deformable Bodies

Click On The Image to Download PPTX Slides

Physically based simulation is an active research area in computer graphics, with applications to computer games, virtual reality systems, and movie special effects. Efficient numerical methods for simulating a variety of visually interesting physical phenomena will be discussed in the context of interactive simulation.

The scope of this Project is to create a framework for the real-time simulation of deformable bodies by modelling the physics using Position Based Dynamics and by modelling the deformable energy using PriMo: Coupled Prisms for Intuitive Surface Modeling - LGG, EPFL

- Good knowledge of C++ and data structures
- Basic Knowledge of Physics, Math and Linear Algebra