CS4406 Computer Graphics: Programming Assignment 1 Notes and

Explanations

[Link] provides the same functionality as the GLUT library, a library typically used in computer
graphics courses. We are using [Link] and WebGL in this course because it provides access to the same
functionality but does not require C++. Our [Link] approach provides an API supported by JavaScript,
one of the languages introduced previously within the computer science curriculum.

When you click on the Development Environment link on the course's main page, you will see our
example program for this week’s exercise. This assignment is not graded but should be completed and submitted.
In an HTML (or JavaScript) window within Codepen, you should see the code that produces the graphics
image for this assignment: a rotating sphere.

The following instructions will explain some of the more critical elements of the code:

This first code segment checks to see if the browser is capable of WebGL acceleration of graphics. It
does this by using the Detector library, which we included in our code using the following script
directive.

<script src="[Link]

If the detector confirms that the browser supports acceleration through WebGL, then the WebGL
renderer will be assigned to the object renderer. Otherwise, the native canvas rendered will be used
and will be much slower.

if ( [Link] )
var renderer = new [Link]();
else
var renderer = new [Link]();

The next line of code creates the scene. Please think of the scene as a 3D world that we are making and
then peering into using a camera. var scene = new [Link]();

The clock object creates a handy clock because we can use it to refresh the graphics scene. If you make changes
in your program, you will need to refresh the screen for changes to take effect. JS Bin has an option to check a
box that will allow the screen to refresh automatically.

var clock = new [Link]();

The camera object is how we view the scene. Imagine that you have a digital camera where a screen in the back
of the camera displays the image, similar to a smartphone camera. As you move the camera to different
locations, the image displayed on the screen changes. That is essentially how 3D graphics systems work. It’s as
though we are holding a camera to capture the scene and then projecting that image back to a display. Using
the [Link] library, we can create two kinds of cameras a Perspective camera and an Orthographic camera.
Notice, in the perspective view, the object's size narrows to provide the illusion of distance where the
orthographic view does not. Each of these effects is implemented using [Link] and by using the appropriate
camera.

var camera = new [Link](VIEW_ANGLE,ASPECT,NEAR,FAR);

fov — Camera frustum vertical field of view.

aspect — Camera frustum aspect ratio. near
— Camera frustum near plane. far —
Camera frustum far plane.

var camera = new [Link](left, right, top, bottom, near, far);

left — Camera frustum left plane. right

— Camera frustum right plane. top —
Camera frustum top plane. bottom —
Camera frustum bottom plane. near
— Camera frustum near plane.
far — Camera frustum far plane.

In the program, there is exists code that sets the Z position of the camera. Keep in mind that all graphics are
plotted in 3 dimensions X, Y, and Z where X spans left and right, y spans up and down and z spans nearer and
further, from our perspective camera. The following code sets the position of the camera in terms of the z
dimension.

// the camera starts at 0,0,0 so pull it back [Link].z = 30;

NOTE: Each of the objects created using the [Link] library includes many methods and attributes. The
best way to understand what methods and attributes are available and supported by a particular object
is to look at the DOM.

The Document Object Model (DOM) is the data representation of the objects that comprise the
structure and content of a document on the web. It is also considered a programming interface for
HTML and XML documents. It represents the page so that programs can change the document
structure, style, and content. The DOM is an object-oriented representation of the web page, modified
with a scripting language such as JavaScript.

Accessing the DOM

You don't have to do anything special to begin using the DOM. Different browsers have different
implementations of the DOM. These implementations exhibit varying degrees of conformance to the
actual DOM standard (a subject we try to avoid in this document). Still, every web browser uses some
document object model to make web pages accessible via JavaScript.

The firebug library is used for debugging our code. One of its features is it allows us to see all the
objects within the DOM structure. The following screenshot shows the camera object in DOM with the
Mozilla Firefox browser from JS Bin IDE.

Note: Different browsers may interpret the DOM differently, so your image may look different from
this one if you do not use Mozilla.

In the next line of code, we add the camera object that we created into the scene. It is the camera that
provides our perspective for viewing the scene.

// add the camera to the scene [Link](camera)

For this assignment, we will use some camera controls. The following lines of code initiate the camera controls
within the program. Essentially the camera controls establish a ‘listener’ method that will capture movements
or clicks on the mouse. The mouse movements are used to move the camera. In this example, the object (the
sphere) remains stationary in 3D space. It rotates but doesn’t move in terms of its X, Y, Z position. What can
move is the camera, which can move closer to the object (making it look larger) or further from the object
(making it look smaller). The camera can also change position around the object to view the object from
different angles or positions.

var cameraControls = new [Link](camera, [Link]);

[Link]( 'mousemove', renderer ); [Link] = true;

The next line of code initiates the renderer method. The renderer generates the frames, which are then made
visible as graphics. Keep in mind that a graphics image's generation determines which pixels in the frame buffer
must be lit. Think of the frame buffer as a motion picture. When you view a film, you see a picture that is
projected. Each picture is static and doesn’t change. These pictures are projected rapidly in films with as many
as 30, 60, or even 70 frames per second. This rapid projection gives the illusion of motion. Computer graphics
does the same thing. Rather than an image on film, the computer will generate a picture or ‘frame’ by
populating a frame buffer.

Suppose you were to look at the display settings of the computer on which you are working. In that case, you
will notice that it has a resolution expressed in terms of the horizontal and vertical pixels in the display. A pixel is
simply a dot that is illuminated with a specific color and intensity. If your display supports 1024x768, this means
that the display has 1,024 pixels across the screen (left to right) and 768 pixels down the screen. Think of the
screen as a broad two-dimensional array with 1,204 columns and 768 rows. Of course, this means that the array
has 786,432 cells in it. This array is the frame buffer. The graphics system must determine which of these cells
or pixels to illuminate and determine the color and intensity. When the frame buffer is populated, the output
appears on the computer display. This process of populating the buffer and outputting it to the display repeats
many times in one second. The rate at which the frame buffer populates and outputs to the display is called the
frame rate. Frame rate is measured in frames per second (FPS). If you check out some of the examples in the
[Link] site, you will see that many of them will display the screen's FPS rate.

// start the renderer [Link](WIDTH, HEIGHT);

The following is a screenshot of one of the examples in the [Link] site. In the upper left corner of the
graphic display, the number of FP reported.
Now that we have created a rendered object, we need to associate the renderer with the canvas on the
webpage where it can render images. The following line of code does this.

$[Link]([Link]);

At this point, we get into creating our actual graphics images. First, we define a material used to cover our
object. All graphics objects are called meshes. A mesh is formed when we connect polygons to form a shape.
Recall from your geometry classes; a polygon is an object created by connecting a series of points (the technical
name for a point plotted on a graph is called a vertex). The points must form an enclosed shape or image. The
following figure shows points plotted on a graph and then connected by lines.

Of course, polygons can assume many shapes. A polygon where you can draw a straight line through ONLY two
points on a line is called a convex polygon (Figure 1 below). A polygon where you can draw a straight line and
intersect more than two points on a line is called a non-convex polygon (Figure 2 below).
Figure 1.
 A mesh is constructed by creating polygons and putting them together as shown in the following diagram.

Figure 2.

To create more complex shapes, you must combine more polygons. For example, to create a simple box, you
would need to have six polygons, one for each surface. However, if you want to create a mesh representing a
more complex object, such as these elephants, more polygons are required. To get a more realistic shape, one
that has smoother curves, even more polygons are needed.

In [Link] we can either create a mesh by defining polygons (which themselves must be specified by
identifying each X,Y,Z point and connecting them with lines) and then putting all of these polygons
together into a mesh object or we can use some of the features of [Link] to generate the polygons for
common shapes such as a Box, Sphere, Cylinder, etc.
We should recognize that the mesh only defines the points and the lines between the points. To see the object's
surface that we have created with the mesh, we need to cover it with a material. The material must describe
how it will interact with light. Keep in mind that what we see is actually the reflection of light from an object. To
see a graphic object, we need to define a material and how the light will reflect from it. The following line of
code defines a normal material in which we will wrap our mesh.

var sphereMaterial = new [Link]();

You might want to review the [Link] documentation to get more details on different types of materials and
how to ‘color’ an object by controlling what color of light it will reflect. In the next section of code, we define
some parameters that the SphereGeometry method will use to generate the polygons of a spherical mesh in
shape. We can define the sphere's radius, the number of segments (the rings that extend up and down), and the
rings (rings that extend left and right).

var radius = 50, segments = 32, rings = 32; var sphere = new [Link](new
[Link](radius, segments, rings), sphereMaterial);

In the above example, we are generating a spherical mesh in shape that has a radius of 50 pixels (starting at the
point of origin 0,0 each of the points in the sphere will extend out 50 pixels from this point). The sphere also has
32 segments and 32 rings, which means that the mesh will have a total of 1,024 polygons. The following
provides an example of a sphere constructed of polygons.

After we have defined our mesh, we can place it into the scene by adding it using the following line of code.

[Link](sphere);

We see objects because we perceive the light reflected from them. We see color because some objects only
reflect some of the light. For example, light is measured in wavelengths. Different colors have different
wavelengths. Without a light source in our scene, we see nothing because there would be no light to reflect
from the object. So how do we add light? The [Link] library provides several different kinds of light. You might
have ambient light, which means that it comes from every direction, or you may have a more specific light
source that is more directed. Lights directed will often create shadows, and of course, our graphics system must
take this into account.

For this part of the assignment, we will add a simple light source, as illustrated by the following lines of code.
First, we define a light, and then we add it to the scene.
var pointLight = new [Link](); [Link](pointLight);

Congratulations! You have created a graphics program which displays a sphere. Now all that we need to do is
set up to display and render the image. We already defined the render, which will execute the process of
rendering frames, but what we still need is to find a way to execute the renderer.

We also want to poll our camera controls to see if the mouse has been moved or clicked to take the appropriate
action to move the camera. The following section of code accomplishes these tasks. The render() function does
two things. First, it makes a call to cameraControls, which updates the camera's position based upon the
movement of the mouse or any clicks. Then it makes a call to the renderer. The render function does the
processing necessary to display a frame. However, we need to display frames repeatedly. Perhaps many times
every second. To accomplish this, we will use the animate() function. We can see that the animate function
does two things. First, it calls to the requestAnimationFrame using an argument of animate, which raises an
event as soon as a frame has rendered. We are telling the system to call the animate function as soon as a
frame has rendered. As soon as the render() function completes, the animate function will execute, which calls
render again, creating a loop. The last line of code makes the first call to the animate function initiating the
loop.

function animate() { requestAnimationFrame(animate)

; render();
}

function render() {
[Link]();
[Link](scene, camera);
}
animate();