WebGL Demonstrations

How to Use Demos: Keyboard and Mouse

To move around the scene for each demo, use the left mouse key to rotate the camera and the right mouse key to pan the camera. To zoom in and out, use the scroll wheel. You can move the light source in the Phong Shading demo using WASD on the keyboard, and Q to move up and E to move down.

How to Use Demos: Touchscreen

To move around the scene for each demo, use one finger to rotate the camera and two fingers to pan the camera. To zoom in and out, use two fingers to pinch.

The light cannot be moved in the Phong Shading demo on a touchscreen.

Scene Geometry

This demo shows a scene with no lighting. The objects are rendered with no shading, and so the color of each face of the objects are the textures themselves.

Phong Shading

This demo shows our scene lit with a point light source using the Phong shading model with different ambient, specular, and diffuse reflectivity for the different objects.

Ray Tracing on a Sphere

This demo shows a scene with a single sphere rendered using ray tracing, and lit with a point light source.

Move the light source using your finger or your mouse. Note that this demo was not made by me - credits are below.

Ray Tracing on the Scene

This demo shows the scene being fully lit with ray tracing. Note that it is pre-rendered, so the light cannot be moved. There are two videos - One with an area light source, and one with a point light source.

The Ray Traced - Sphere demonstration is created by Sushindhran Harikrishnan, and the link to the source code is here.