Lab 2: WebGL and Geometry CS 445: Computer Graphics, Fall 2017

---

Goals

• Understand the high level structure of a basic WebGL program
• Understand how to generate geometry for primitive shapes.
• Understand how to create vertex buffer arrays for storing geometry on the GPU
• Create three solid geometric shapes.

As you probably noticed, the code can be very confusing. In each lab, you will be asked to focus on only a few parts of the code and to mostly ignore the rest. I realize that this can be frustrating but there isn't really another option if we want to get something up and running right away. In this lab, we focus our attention on the geometry.

Directions

• You will be randomly assigned a partner for this lab. Get together with them, tell them about yourself, and show them what you did in Lab 1.

• Begin by downloading CS445Lab2start.zip. It contains several subfolders:

  • Square: Rotating red square program (will go over in class)
  • Cube: Rotating cube program (will go over in class)
  • Shapes: Starter code for implementing several additional types of geometry, e.g. a cylinder or cone. This program is very similar to the rotating cube program except that it is set up so that it is easier to add additional geometry. You will be adding to this program.

    Rotating Red Square	Rotating Cube	Incomplete code for displaying multiple types of geometry.

• Run all 3 of the programs to see what they do. Look through the code and talk to your partner about what each program does. Try to understand how the rendering loop works, but mostly focus on what is happening in Cube.js and Shapes.js.

• Generate Three New Shapes: Following what is done in Cube.js, you and your partner should create three new primitives such as a disk, cylinder and cone (do something else if you want but please first run it by the instructor). Note, a cone is just 2 disks where the center of one of the disks is shifted. You could work side by side with your partner to do the disk and then divide up the remaining two shapes. Each partner should take the lead on at least one of the primitives.

  Use more than one color per shape. Set the colors in the color vertex arrays to be whatever you want but be deliberate, that is, don't just randomly generate a different color for each vertex. Think about what you want to object to look like and figure out how the vertex colors should be assigned in order to achieve that look. For example, in the cone, each triangle has the same coloring and that coloring is achieved by setting each vertex to 3 different colors. Because the vertex colors within a triangle are different, the colors are interpolated across the triangle. In the disk and cylinder, each triangle is a single color with no interpolation. Do you see why this happens? If not, discuss it with your partner and examine the code.

  Your new shape files (e.g. Cone.js) should be placed in the geometry folder. To incorporate these shape files into the rest of the code, look for the "TO DO: ..." comments in the files start_here.html, render_scene.js, and Shapes.js.

  Disk	Cone	Cylinder

• Also:

  • The number of slices for the cone or cylinder should be an input so that you can vary the smoothness of the boundary. Given the number of slices, make sure you know how many total vertices will need to be stored.

  • Since we do not yet have shading implemented, it can be difficult to see the shape of the object if the shape is all one color. To solve this problem, we overlay a wireframe version of the geometry on top of the solid version as shown in the images above for the cone and cylinder. To draw lines, you need to use gl.LINES in the gl.drawArrays function (see Shapes.js). See here to figure out how the lines are created from the vertices in the vertex array buffer.

  • In general, there are different ways of drawing the primitives depending on how you connect-up the vertices. For example, to draw a disk, one could use either gl.TRIANGLES or gl.TRIANGLE_FAN. The full set of choices are shown here. But be careful because newer versions of openGL eliminate most of these options. Depending on what you use, the number and order of the vertices will be different. gl.TRIANGLE_FAN is a much more efficient way of storing the vertices. However, one cannot have each triangle colored distinctly because adjacent triangles share vertices and a single vertex can't have more then one color. For this lab, it is safest to use gl.TRIANGLES for the solid shapes and gl.LINES for the black outlines.

Extra Credit Option

If you and your partner want more of a challenge (and have completed the lab and have demonstrated it to the instructor) you can try to generate geometry for steiner surfaces. Look at the equations that describe the function in terms of 2 parameters, u and v. You will need a nested loop over these 2 variables. For each (u,v), calculate the vertex.

To Hand In

Demonstrate your program in lab on the due date no later than the end of lab. Zip together the entire project that contains the running code for the Shapes program (please remove the Square and Cube folders which are not needed for the Shapes program). One partner should submit to WISE. Add standard JS comments and also comments containing the name of both partners at the top of all files (if you want to guarantee credit!).

Creating More Complex Shapes

One generally does not generate complex organic models directly in WebGL. Instead the models are either scanned (e.g. see The Stanford 3D Scanning Repository) or are modeled in programs such as Maya (and exported, e.g. to obj format). The ply and obj formats can then be read into your WebGL program. One can try to find Javascipt code to read ply and obj files, or you can write your own.

Dragon

Bunny

Buddha

Dog

Bust

---