WebGL Model Viewer

Controls
Translate X and Y:Left click + mouse
Rotate Z and X:Right click + mouse
Translate Z:Up + Down keys
Rotate Y:Right + Left keys
Reset location:R
Pause point light:P
Pause spotlight:S

Project Details

Final project for CMPT 361 - Intro to Computer Graphics

Everything here is written by me besides a couple libraries for matrix manipulation.

Overview

Lighting and Shading

  • Implemented Blinn-Phong shading for realistic lighting effects.
  • Solved specular highlight issues from overlapping lights by rewriting the specular calculation to simply add instead of overcomplicating it with various multiplication steps.

Model Loading

  • Debugged many issues with loading the demo model and calculating normals.
  • Fixed a critical issue where the depth buffer was not being cleared each frame, which caused the demo model to always load with broken vertices.

Camera and Spotlight

  • Implemented perspective camera utilizing matrix operations.
  • Overcame challenges in placing and rotating lights, particularly the spotlight, through notable trial and error.
  • Fixed a spotlight panning issue by correctly flipping both the x and z axes in the rotation matrix.

GitHub Repository

Check out the source code on GitHub.

Fourth-year Undergraduate at Simon Fraser University


2023-08-05