To create the graphics, WebGL (a JavaScript library) was used. This library provides web support for a popular graphics API - OpenGL.

The basics of how the graphics are created are listed below but more information can be found here.

• The model is split into components; in this case, doors, wheels, a roof and a plane to drive on
• For each componenet, a set of coordinates is produced that defines the shape of the component
• These coordinates go through a series of matrix multiplications that scale, rotate and translate the component to put it in the correct position on the model
• The full model then goes through its own series of matrix multiplications that scale, rotate and translate the model into a position in the real-world coordinates
• These real-world coordinates then go through a final few matrix multiplications to convert them into pixel locations on the screen

Scene graphs are often created to show which order the scale, rotate, and translate functions should be applied to each component and how the overall scene should be built. The scene graph for this scene with a Car and a Plane to drive on is shown below:

Scene Graph for Car and Plane

Details the order of operations on each component that makes up the scene.

The second part of this project involves applying lighting to the models. Three forms of lighting were implemented in the project: ambient lighting, directional/diffuse lighting and point/specular lighting. Brief descriptions are given below but more information can be found here:

• Ambient: This is a constant colour applied to each component.
• Directional/Diffuse: This simulates light which comes from a light source very far away such that the light rays are parallel and impact all parts of a surface in the same way; surfaces that are facing the light source will be lighter than those facing away from it. An example of directional lighting is the light from the Sun.
• Point/Specular: This simulates light which comes from a light source closer to the object such that the light rays radiate outwards from the source; this results in shiny spots on certain surfaces of the object, depending on the direction the surface in relation to the location of the point light source. An exmaple of a point light source is a torch.

This video shows the graphic running in a web-page. The recording shows the camera moving, followed by the car moving along the plane and the doors opening and closing, and finishes with the lighting effects mentioned earlier.