Interactive Graphics Projects

Six self-contained, browser-based computer graphics assignments that implement core rendering and simulation techniques from scratch in JavaScript and GLSL.

Overview

This repository collects six coursework projects from the Interactive Graphics course of the MSc in Robotics and Artificial Intelligence at Sapienza University of Rome. Each project is a standalone web page that supplies the user interface and scaffolding, while the graphics algorithm itself is implemented in an accompanying script. Together they progress from 2D raster image compositing to 3D mesh rendering, shading, GPU ray tracing, and physically based animation. The course assignments are adapted from the University of Utah CS4600 graphics projects.

Features

• Alpha compositing (Project 1): A composite function that blends a foreground image over a background image at a given opacity and pixel offset, operating directly on ImageData RGBA buffers with per-channel weighted averaging and bounds clipping.
• 2D transformations (Project 2): Construction of 3x3 transformation matrices in column-major order (GetTransform) and matrix composition (ApplyTransform), applying scale, then rotation, then translation, to animate a UAV scene.
• Triangular mesh rendering (Project 3): A WebGL MeshDrawer that uploads vertex and texture-coordinate buffers, applies a model-view-projection matrix, supports texture mapping with REPEAT wrapping and linear filtering, and offers an optional Y/Z axis swap. Includes an OBJ parser (obj.js) and the GetModelViewProjection matrix builder.
• Shading (Project 4): Extends the mesh renderer with per-fragment Blinn-Phong shading. Adds vertex normals, a normal matrix, a normalized directional light (setLightDir), adjustable specular exponent (setShininess), and optional texture-driven diffuse color.
• GPU ray tracing (Project 5): A GLSL fragment shader implementing ray-sphere intersection (IntersectRay), Blinn-Phong shading with hard shadow rays (Shade), and recursive specular reflections with an environment cube map fallback (RayTracer), bounded by a configurable bounce limit.
• Mass-spring simulation (Project 6): A SimTimeStep integrator that accumulates spring (Hooke), gravity, and velocity-damping forces, advances particle velocities and positions with semi-implicit Euler integration, and resolves collisions against a unit bounding cube (-1 to 1) with a restitution coefficient.

Architecture

Each project follows the same structure and runs entirely client-side in the browser:

1. An HTML file provides the page layout, controls, asset loading, and the WebGL or Canvas context.
2. A per-project JavaScript file implements the graphics algorithm (the part completed in this repository) and is wired into the HTML.
3. Where 3D models are used, a shared obj.js parses Wavefront OBJ files into vertex, texture-coordinate, and normal arrays.

The rendering approach varies by project: Projects 1 and 2 manipulate pixel buffers and 2D transforms on the CPU; Projects 3 and 4 use the WebGL rasterization pipeline with GLSL vertex and fragment shaders embedded as template strings; Project 5 performs ray tracing inside a GLSL fragment shader on the GPU and supports rasterization, ray-traced, and hybrid rendering modes; Project 6 runs a CPU physics integration loop and renders the deformable mesh through WebGL. There is no build step, package manager, or server-side component.

Tech Stack

Category	Details
Languages	JavaScript, GLSL, HTML
Graphics APIs	WebGL, HTML5 Canvas 2D ImageData
Techniques	Alpha compositing, affine matrix transforms, OBJ mesh rendering, Blinn-Phong shading, ray-sphere intersection, recursive reflection ray tracing, mass-spring physics with semi-implicit Euler integration
Assets	PNG/JPG textures, Wavefront OBJ models, environment cube map
Dependencies	None (no package manager or build tooling)

Getting Started

No installation or build is required. Clone the repository and open the HTML file of any project directly in a modern browser (Chrome is recommended for full WebGL support); keep each project's files in the same directory so relative asset paths resolve.

git clone https://github.com/Ed0C97/marr-interactive-graphics-projects.git
# then open, for example:
# project-n-1-alpha-blending-Ed0C97-main/project1.html

Some projects support pressing F4 to reload the script without refreshing the page, which speeds up iteration on the JavaScript and GLSL code.

Project Structure

.
├── project-n-1-alpha-blending-Ed0C97-main/   # Alpha compositing (Canvas ImageData)
│   ├── project1.html / project1.js
│   └── background.png, teapot.png, u.png, star.png
├── project-n-2-transformations-Ed0C97-main/  # 2D matrix transforms (UAV scene)
│   ├── project2.html / project2.js
│   └── uav.png, propeller.png, shadow.png, ground.jpg
├── project-n-3-triangular-meshes-Ed0C97-main/ # Textured mesh rendering (WebGL)
│   ├── project4.html / project4.js / obj.js
│   └── teapot.obj, nyra.obj, bricks.png, nyra.png
├── project-n-4-shading-Ed0C97-main/          # Blinn-Phong shading (WebGL)
│   └── project5.html / project5.js / obj.js
├── project-n-5-ray-tracing-Ed0C97-main/      # GPU ray tracing (GLSL)
│   └── project6.html / project6.js
└── project-n-6-animations-Ed0C97-main/       # Mass-spring simulation
    ├── project7.html / project7.js / obj.js
    └── teapot-low.obj

Each subdirectory also contains its own README describing the assignment specification.

Status

Completed coursework: a collection of finished, working university assignments rather than a maintained library. The top-level README states the project is distributed under the MIT License, but no LICENSE file is present in the repository.