WebGL Graphics Projects

WebGL Graphics Projects is a course project for CS360: Introduction to Computer Graphics, conducted during the 2024-25 Semester I under the guidance of Prof. Soumya Dutta.

---

Table of Contents

• Project Overview
• Assignments
  • Assignment 1: 2D WebGL Animation
  • Assignment 2: 3D Rendering and Shading
  • Assignment 3: Ray Tracing
  • Assignment 4: Cel Shading
  • Assignment 5: Advanced Ray Tracing
• Technologies Used

---

Project Overview

This repository is a curated collection of assignments designed to explore the power of WebGL in creating dynamic and interactive graphics. It spans a range of topics from basic 2D animations to advanced ray tracing techniques, offering hands-on experience with:

• WebGL programming and optimization.
• Shader development (GLSL).
• Realistic lighting and shading models.
• Interactive and visually stunning 2D and 3D graphics.

Each assignment is crafted to build a deep understanding of graphics programming, making this repository an excellent resource for both beginners and advanced learners.

---

Assignments

Assignment 1: 2D WebGL Animation

Objective:
Dive into the basics of WebGL by creating simple 2D animations, including initializing the WebGL context and rendering basic shapes.

Key Features:

• Setting up the WebGL rendering context.
• Writing vertex and fragment shaders for 2D rendering.
• Animating shapes using requestAnimationFrame.
• Interactive controls for rendering modes (point, wireframe, solid).

Files:

• index.html
• script.js
• glMatrix-0.9.5.min.js

---

Assignment 2: 3D Rendering and Shading

Objective:
Learn the fundamentals of 3D graphics by implementing shading techniques and texture mapping.

Key Features:

• Creating and manipulating 3D models.
• Implementing flat shading, Gouraud shading, and Phong shading.
• Texture and environment mapping.
• Responsive design for multi-device compatibility.

Files:

• index.html
• script.js
• stylesheet.css
• glMatrix-0.9.5.min.js

---

Assignment 3: Ray Tracing

Objective:
Simulate realistic lighting and shadows using ray tracing techniques.

Key Features:

• Implementing basic ray tracing algorithms.
• Calculating ray-object intersections.
• Rendering scenes with realistic lighting and shadows.
• Optimizing performance for large scenes.

Files:

• index.html
• ray_tracing.js
• Additional assets.

---

Assignment 4: Cel Shading

Objective:
Create a stylized, cartoon-like appearance for 3D models using cel shading.

Key Features:

• Custom shaders for cel shading.
• Adding outline effects for enhanced edge visibility.
• Adjustable shading and outline parameters.
• Interactive controls for real-time shading adjustments.

Files:

• index.html
• celShading.js
• webgl-utils.js
• webgl-debug.js
• stylesheet.css
• Model files in .json format.

---

Assignment 5: Advanced Ray Tracing

Objective:
Enhance ray tracing with advanced features for a more realistic rendering experience.

Key Features:

• Recursive ray tracing for reflections and refractions.
• Phong illumination model for realistic lighting.
• Support for multiple light sources and soft shadows.
• Performance optimizations for handling complex scenes.

Files:

• index.html
• advanced_ray_tracing.js
• Additional enhanced resources.

---

Technologies Used

• WebGL 2.0: For rendering high-performance 2D and 3D graphics.
• JavaScript: Core language for WebGL programming.
• glMatrix: High-performance library for matrix and vector operations.
• HTML5 & CSS3: For web structure and styling.
• GLSL: Custom shaders for vertex and fragment transformations.

---