Environment Mapping

WebGL Graphics Render

 

Overview

This graphics project renders a 3-D reflective teapot model using environment mapping. The purpose of this project was to experiment with fundamental building blocks in 3D rendering. I created this project in November 2016 by using WebGL and JavaScript.

Description

This program created the Utah teapot from a triangle mesh and rendered it using environment mapping. I built a shader to light the scene and shade the object. The user can interact with the scene by rotating the teapot or orbiting around the teapot. I moved the teapot by applying modeling transformations to the model, and I rotated the world to achieve the orbiting effect.

I created a 360-degree environment using skyboxing. I rendered a large cube surrounding the viewer by using a cube map to texture map the inside of the skybox. To create the teapot, I took the model data consisting only of vertices and triangular faces and calculated per-vertex normals for every face on the model. The teapot surface reflects the environment. I applied perspective and hidden surface removal while creating the model.

CS 418: Interactive Computer Graphics taught basic mathematical tools and computational techniques for modeling, rendering, and animating 3-D scenes. In this course I created real-time 3D graphics and computationally intensive animations such as physics simulations. These types of applications demand high performance vector and matrix math. Even though many of these applications can be created easily and quickly in a high-performance animation software, creating computer animations from scratch at a low level gave me a considerable understanding of the graphics pipeline and rendering process.