Computer Graphics and Interfaces (CGI) - NOVA FCT 🎨

Bachelor in Computer Science and Engineering (LEI) | 3rd Year - 1st Semester

This repository contains the practical projects developed for the Computer Graphics and Interfaces (Computação Gráfica e Interfaces) course at the Faculty of Sciences and Technology of the NOVA University of Lisbon (NOVA FCT).

✍️ Authors

• Tomás Alves (Student No. 68681)
• Miguel Carmo (Student No. 65871)

📌 About the Course and Projects

The CGI course introduces the foundational concepts of computer graphics, focusing on the 2D and 3D rendering pipelines, geometric transformations, viewing and projection matrices, and illumination models. All projects were developed using HTML5 Canvas, JavaScript (ES6), WebGL 2.0, and GLSL for shader programming.

The repository is divided into three main projects, demonstrating a progressive complexity in rendering techniques:

1. Project 1: 2D Parametric Curves 🎢

• Objective: Create an interactive application to draw and manipulate 2D parametric curves.
• Key Features:
  • Evaluation of curve coordinates directly inside the Vertex Shader.
  • Dynamic manipulation of curve coefficients, intervals, and rendering modes (Lines vs. Points).
  • Implementation of zooming (via mouse wheel) and panning mechanics.
• Assignment Statement (MD)
• Source Code (CODE)

2. Project 2: 3D Hierarchical Modelling (Tank Simulator) 🪖

• Objective: Build a 3D scene with hierarchical modeling and multiple projection cameras.
• Key Features:
  • Scene Graph: Tree-based data structure (loaded via JSON) to manage transformations of hierarchical object components (e.g., rotating the tank's cabin, elevating the cannon, spinning wheels).
  • Viewing & Projections: Implementation of multiple viewports featuring Orthogonal, Perspective, Axonometric, and Oblique projections.
  • Physics & Interaction: First-person and third-person camera toggles, alongside a simple physics engine using Euler integration to shoot projectiles (tomatoes) at targets.
• Assignment Statement (MD)
• Source Code (CODE)

3. Project 3: Illumination and Shading 💡

• Objective: Implement realistic 3D lighting models utilizing custom GLSL shaders.
• Key Features:
  • Phong Illumination Model: Mathematical calculation of Ambient, Diffuse, and Specular light components.
  • Light Sources: Support for up to 8 simultaneous lights, including Point Lights, Directional Lights, and Spotlights (with cutoff and attenuation).
  • Shading Techniques: Toggleable implementation of both Gouraud Shading (per-vertex calculation) and Phong Shading (per-fragment calculation).
  • Hidden surface removal using Z-Buffer (Depth Test) and Back-Face Culling.
• Assignment Statement (MD)
• Source Code (CODE)

🧠 Concepts and Acquired Skills

• Computer Graphics Pipeline: Deep understanding of the rasterization pipeline, from vertex processing to fragment coloring.
• GLSL Shader Programming: Writing custom Vertex and Fragment shaders for hardware-accelerated rendering.
• Linear Algebra for 3D: Extensive use of translation, rotation, and scaling matrices, alongside projection mathematics.
• Web Technologies: Integration of WebGL with standard web interfaces, utilizing DOM events and libraries like dat.gui for control panels.

📄 License

Copyright © 2026 Alvesss04. All Rights Reserved.