3D Model Viewer

Project Overview

Browser-based 3D model viewer built using WebGL and JavaScript. Demonstrates fundamental computer graphics concepts including 3D transformations, Phong lighting, and interactive camera controls, all implemented without high-level 3D libraries like Three.js.

The viewer was developed as part of my computer graphics coursework, where I learned the low-level details of how 3D rendering works. Building everything from the ground up gave me a deep understanding of the graphics pipeline, shader programming, and real-time rendering techniques.

Key Features

• Phong Lighting Model - Point light source creates realistic lighting effects by combining three components:
  • Ambient - Base lighting that illuminates all surfaces equally
  • Diffuse - Directional lighting based on surface normal and light direction
  • Specular - Shiny highlights based on viewing angle and light reflection
• Trackball Camera Controls - Quatternion based camera rotation and navigation
• Shaders - GLSL vertex and fragment shaders
• Transformation Controls - Scale, Rotate, and Translate controls for the 3D model

Takeaways

Building this viewer from scratch taught me:

• How the WebGL graphics pipeline works at a low level
• Writing and debugging GLSL shader code
• 3D mathematics including matrix transformations and vector operations
• The fundamentals that power modern 3D engines and frameworks

Technologies Used

Project Links

View on GitHub →

Try Live Demo →