Flight Simulator & Terrain Generation

WebGL Graphics Render

 

Overview

This graphics project renders a randomly generated terrain to create a basic flight simulator. The purpose of this project was to experiment with fundamental building blocks in environment generation. I created this render in October 2016 by using WebGL and JavaSript.

Description

This program is a simple flight simulator. The “airplane” automatically begins moving forward at a fixed speed. The flight simulator implements a quaternion-based viewing system. A vertex shader implements Blinn-Phong reflection to render a well-lit and correctly shaded scene. I created a terrain rendering algorithm that randomly generated a terrain on every page load or page refresh. The algorithm generates a finite mesh of triangles that resembles a terrain using the diamond-square algorithm. The terrain is shaded using a colormap related to the height of the vertex.

The user will control the bank and tilt of the airplane through the arrow keys. Pressing the left or right arrow will make the plane roll to its left or right. Pressing the up or down arrow key will cause the airplane to pitch up or down. Pressing the Page Up or Page Down keys will make the plane yaw left or right, respectively.

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.