Project 4 — Scene Management

Overview

Project 4 does not develop any new WebGL usage. Instead, it is a programming exercise that entails a generalization of the previous project. This time, we'll have multiple objects and multiple shaders. You'll have to create abstractions to keep all of their WebGL state separate.

Specifics

• As always, copy forward the four WebGL utility libraries and your implementation of Project 3, renaming them for Project 4.

  • prog4.js
  • prog4.html

  Most of the work in Project 4 will entail restructuring that existing code to function in more general ways.

• First, we have multiple shader programs. Structure your code with a Shader object capable of handling a variety of different shader programs. Its constructor should receive as arguments the IDs of the HTML elements giving the vertex and fragment shader sources. It should encapsulate all of the state associated with a program: the program object and its uniform and attribute location state.

  Include the lighting shader from project 3, and also implement a simple rainbow shader and Gooch shader, as shown in class and in the notes.

• Next, we have three objects to deal with. Each includes vertex positions and normals along with triangle indices. Unlike the previous project, the normals are calculated for you, and you should not recalculate them yourself.

  • teapot.js
  • plane.js
  • cow.js

  Structure your code with a Model object capable of handling such a variety of different models. The constructor should receive the model object as an argument and encapsulate the vertex buffer object state associated with that model. A draw method should receive the model object along with a shader object as defined above, using the shader to draw the model.

  With these functions in hand, your application initialization should consist three Model instantiations and three Shader instantiations. Your application draw should consist of three calls to Model.draw.

• Finally, each of our previous projects placed the object at the center of the world. However, the teapon, plane, and cow are all placed at the center, then they will all appear on top of one another. Instead, introduce a modelMatrix uniform to each shader to translate each model to a different position.

• As always, upload your project files to your prog4 directory on classes.csc.lsu.edu and p_copy them before the deadline. This procedure is documented here.