Project 2 : Modeler

Assigned : Tuesday, January 29, 2013
Due : Tuesday, February 12, 2013, 06:00 PM
Artifact Due: Friday, February 15, 2013, 11:59 PM
How to turn in!
Direct link to Catalyst for turnin

Quick Links

1. Skeleton code
2. Sample solution
   Note: If modeler sample program reports error about hardware, it means your current hardware or graphics driver does not support glsl, which will be used in writing shaders. Try (1) not working through remote desktop; (2) updating the graphics driver. If it still reports error, the problem is hardware related and there isn't much we can do other than using another computer.
3. ">Installer for FLTK
4. Sample models (also check out the winners from previous quarters linked below)
5. Download Curve Editor
   Note: If you want to test a curve in the sample solution, please draw the curve in a top-down fashion. I.e., suppose V is a vector pointing from a control point p(n) to p(n+1). Rotating V by 90' counter-clockwise should give us a vector that points outward.
6. Official OpenGL documentation
7. Some great OpenGL tutorials
8. Help Session Slides: .pdf format

Examples of Past Models

• Spring 2011
• Autumn 2011
• Spring 2010
• Spring 2009
• Autumn 2008
• Autumn 2007
• Spring 2007
• Autumn 2006
• Spring 2006
• Autumn 2005
• Spring 2005

Part 1: Surface of Revolution

In OpenGL, all scenes are made of primitives like points, lines, triangles and quadrilaterals. In this project, we implemented surface of revolution by using glDrawElements with GL_TRIANGLES to make a 3D surfaces.

For each mesh, you send a list of vertices (the points that make up the primitive), their normal directions, texture coordinates, and an array indices to specify triangles. A simple example can be found in the helping slides.

You can read more about OpenGL here.

Surface of revolution is a powerful tool of generating 3D geometries. We encourage you to create more interesting shapes.

Your Task

1. have appropriate texture coordinates for each vertex;
2. have appropriate per-vertex normals;
3. have surfaces drawn using only glDrawElements with GL_TRIANGLES as its primitive type input;
4. use the divisions variable that already exists in drawRevolution() to determine how many bands your surface is sliced into.

Texture Mapping

Texture mapping allows you to "wrap" images around your model by mapping points on an image (called a texture) to vertices on your model. For each vertex, you indicate the coordinate that vertex should apply to, where u is the X-coordinate and v is the Y-coordinate of the point on the texture that should line up with the vertex. For how to pass texture coordinates using glDrawElements, please refer to the helping slides.

Surface Normals

Surface normals are perpendicular to the plane that's tangent to a surface at a given vertex. Surface normals are used for lighting calculations, because they help determine how light reflects off of a surface.gl

In OpenGL, we often want to approximate smooth shapes like spheres and cylinders using only triangles and quadrilaterals. One way to make the lighting look smooth is to use the normals from the shape we're trying to approximate, rather than just making them perpendicular to the polygons we draw. This means we calculate the normals for each vertex (per-vertex normals), rather than each face (per-face) normals. Shaders allow us to get even smoother lighting, calculating the normals at each pixel. You can compare these methods below:

In your sphere, you will need to use this trick: calculate your normals from the shape you're trying to model, rather than the polygons you're using to model it.

Part 2: The Hierarchical Model

A hierarchical model is a way of grouping together shapes and attributes to form a complex object. Parts of the object are positioned relative to each other instead of the world. Think of each object as a tree, with nodes decreasing in complexity as you move from root to leaf. Each node can be treated as a single object, so that when you modify a node you end up modifying all its children together. Hierarchical modeling is a very common way to structure 3D scenes and objects, and is found in many other contexts. If hierarchical modeling is unclear to you, you are encouraged to look at the Hierarchical Modeling lecture notes.

Your Task:

You must come up with a character that meets these requirements:

1. Uses glTranslate(), glRotate(), and glScale() in meaningful ways.
2. Has at least two levels of branching - There must be at least two instances in your model where you draw something, save the current matrix, apply an affine transformation such as glTranslate(), glRotate() or glScale(), draw something else, then return to your previous matrix, apply a new transformation, and draw something else. You must also use glPushMatrix() and glPopMatrix() to nest your matrix transformations (see below for details). Here's a pseudocode example of a minimal solution, along with a scene graph:

   draw geometry
   push matrix
     translate up
     draw geometry
   
     push matrix
       translate left
       draw geometry
     pop matrix
   
     push matrix
       translate right
       draw geometry
     pop matrix
   pop matrix
   push matrix
     translate down
     draw geometry
   pop matrix
       

3. Has at least 1 multiple-joint slider that controls multiple joints or components of your model. For example, you might have your character waving, which would require that you control the shoulder and elbow joints simultaneously.

Making a Model

You will want to make a model to draw your character, by extending the Model class in model.h:

class MyModel : public Model {
public:
  // Constructor for MyModel
  MyModel() {
  }

  // Draws the model onscreen
  void draw() {
    // ... call your drawing functions here ...
  }
};

The easiest way to get started is to just modify the existing Scene class in sample.cpp. It extends Model, and in the main() method at the bottom, an instance of it is given to ModelerUserInterface to be displayed onscreen. Later on, you can create your own Model subclass and add it to the Scene class, much like the PointLight and DirectionalLight Models are added. See sample.cpp for details.

Adding Properties To Your Model

A property is an aspect of your model that the user can control. Modeler represents different types of properties with Property classes in model.h:

	RangeProperty stores a single number that's within a continuous range.
	RGBProperty stores a color's red, green, and blue components. Modeler lets you set it with a color picker.
	BooleanProperty is either true or false. Modeler lets you set it with a checkbox, making it useful for showing or hiding parts of your model.
	ChoiceProperty has an integer value from 0 to N - 1, where N is the number of choices it has. You can assign names to each choice, and Modeler will show the names in the control panel.

To add a property to your model class, do the following:

class MyModel : public Model {
Make sure protected: comes before properties, unless you want to be able to access them from other classes (in that case, use public:).
protected:
Add the property here:
  RangeProperty height;
public:
  MyModel() :
put constructor here, after the above colon
    height("Height", 0.0f, 10.0f, 0.0f, 0.1f)
  {
Add the property to the model's GroupProperty, which is a group of properties that's a property of every Model.
    properties.add(&height);
  }

  void draw() {
Use your new property's value for something:
    glScalef(0, height.getValue(), 0);
  }
};

Now, when you open Modeler, a control for your property appears on the left panel.

For further details on each property class, look in model.h. To see how they are added to models, look at the skeleton code's sample model in sample.cpp.

WARNING: If you try to set the value of a property of your model by calling setValue(), setRed(), etc., the slider, color picker, or checkbox corresponding to that property will not be updated to show that property's new value. This problem is an oversight in the design of the new Modeler, but will not prevent you from completing the project requirements. If you find yourself needing to set your model's properties, consult your TA's, because you might not be using the Model class the way it was intended to be used.

Affine Transformations in OpenGL

The graphics primitives you have (box, sphere, and cylinder) only accept parameters that define their dimensions. That means you can draw a box, sphere, or cylinder of any size, but it will always be at the origin with the same orientation. What if you want to move it somewhere else, or rotate it to a different orientation -- and you can't edit the primitive's drawing code?

In OpenGL, every vertex is multipled by the modelview matrix, then by the projection matrix:

• Modelview Matrix - transforms a point into eye / camera space, where the camera's eye is at the origin, looking down the -z axis, with its up-vector aligned with the +y axis.
• Projection Matrix - transforms a point from eye / camera space into normalized device space, which is a 2D plane that represents your screen surface. Its coordinates go from -1 to 1 on each axis, and conversion to pixels is done depending on the size of your OpenGL window.

Since Modeler takes care of projection, you'll modify the modelview matrix. OpenGL has several functions that create matrices for common transformations, then multiply them by the modelview matrix:

• glRotatef(degrees, x, y, z) - Rotates all vertices by degrees degrees around a line with slope vector <x, y, z> that passes through the origin. Use the right-hand rule with the vector to determine the direction of rotation.
• glTranslatef(x, y, z) - Add <x, y, z> to all vertices.
• glScalef(x, y, z) - Multiplies all vertices by <x, y, z>, producing a scaling effect relative to the origin.

If you called glTranslatef(1, 0, 0), then called drawSphere(1), the sphere would be drawn centered around (1, 0, 0) because all of its vertices had 1 added to their X-coordinates. Each transformation has the effect of creating a "model space" with its own origin and axes. The sphere was drawn at the origin of a model space created by glTranslatef(1, 0, 0).

Hierarchical Transformations in OpenGL

Once you have applied a transformation to the modelview matrix, it will be applied to EVERY point sent to the graphics card forever! To undo the transformation, you need to remember the matrix's contents.

• Use the glPushMatrix() function to push the current modelview matrix onto OpenGL's internal stack.
• Then, use glPopMatrix() to pop the last pushed matrix off that stack and copy it into the modelview matrix.

Make sure you match each glPushMatrix() with a corresponding glPopMatrix(), so that your modelview matrix is returned to its original state. This makes it easy to "nest" your transformations:

// Here, modelview matrix is in world space
glPushMatrix(); // save world space matrix
  // Still in world space
  glTranslate(1, 0, 0);
  // Now in model space (everything translated left by 1).
  drawSphere(1);

  // Here's a "nested" transformation.  After the corresponding glPopMatrix(),
  // we'll be back in model space.
  glPushMatrix(); // save model space matrix
    // Still in model space
    glTranslate(3, 0, 0)
    // Now in "model space 2"
    drawSphere(1);
  glPopMatrix(); // copy model space matrix into modelview matrix
  // Back in model space
glPopMatrix(); // copy world space matrix into modelview matrix
// Back in world space

Using Textures In Your Model

When you want to use a texture, you'll need to do the following:

1. Add a Texture2D field to your model class
2. In your model class's load() method, call the field's load() method

class MyModel : public Model {
 
  Texture2D checkers;
public:
  // Constructor for MyModel
  MyModel() :
 
  checkers("checkers.png")
  {
  }

  // Your load method
  void load() {
   
    checkers.load();
  }

  // Your draw method
  void draw() {
    // all geometry after this point will have the checkers texture
   
    checkers.use();
  }
};

If you want to get the texture's ID for more advanced stuff:

GLuint textureID = texture.getID();

If you want to use another texture, just call that texture object's use() method. To stop using textures, call:

gglBindTexture(0);

 Part 3: Point Light Blinn-Phong Shader

A shader is a program that controls the behavior of a piece of the graphics pipeline on your graphics card.

• Geometry shaders can turn a single point into multiple points. They are useful for advanced modeling, e.g., refining a coarse triangle mesh into a smooth surface with many triangles, but require very recent graphics hardware and are not part of the core requirements of this project.
• Vertex shaders are run once for each vertex in your model. They transform it into device space (by applying the modelview and projection matrices), and determine what each vertex's properties are.
• Fragment (or pixel) shaders are run once for every pixel to determine its color.

Shaders determine how the scene lighting affects the coloring of 3D surfaces. In OpenGL, there are two basic kinds of lights:

• Point Light - a light that is emitted from a point in world space. The intensity of the light is attenuated (reduced) based on how far it travels from this point. In the physical world, the intensity of a point light decreases with the square of the distance. We can model this with quadratic distance attenuation: dividing the intensity by some function a*r^2+b*r+c, where r is the distance from the light source and a, b, and c are chosen arbitrarily.
• Directional Light - a light that always hits a surface from a certain direction, no matter where it is. It has no attenuation.

A shading model determines how the final color of a surface is calculated from a scene's light sources and the object's material. We have provided a shader that uses the Blinn-Phong shading model for scenes with directional lights. See lecture notes for details on the Blinn-Phong shading model.

Your Task:

Add support for the scene's point light, by editing the files shader.vert and shader.frag. You need to include quadratic distance attenuation. Please open these files and read the comments for details.

• gl_LightSource[1].position stores the point light's position.
• gl_FrontLightProduct[1] is a structure that contains the material properties of the object (ambient, specular, and diffuse colors) multiplied by the point light's ambient, specular and diffuse colors.
• You can visit this site for a helpful tutorial with code included!
• Hint: you may not have to edit one of the files.

We have provided the sample solution, which lets you compare your shader to the (correct) sample solution shader. To choose which shader to show, click on "Scene" and click the radio button for the shader you want to use. The sample solution also contains both a point light and a directional light for you to manipulate. Click the "Point Light" or "Directional Light" on the list in the top left corner to edit a light's properties or move it around. The difference feature in the sample solution will compare your shader to the solution shader for you. To use it, select "Difference" under "Shader To Use." Any differences between your shader and the solution shader will become highlighted in the display window. Differences are highlighed by color channel, so if the red is different, then you'll see a bright red pixel, if the green is different, you'll see a bright green pixel, etc. If there are no differences between the two shaders, the entire image should appear black. If there are a few thin highlights along the edges, that is ok since it is probably due to differences in rounding and you will not be counted off for it in grading.

Part 4: Yet Another Shader

You can use the sample solution Modeler to develop some of these shaders, but others require texture maps to be provided -- which the sample solution may not provide to your shader.

Using Shaders In Your Model

Shader files are loaded, compiled, and linked by ShaderProgram objects. If you want to add a shader:

1. Add a ShaderProgram field to your model.
2. Call its constructor after the colon for your model's constructor.

The ShaderProgram constructor takes three filenames:

1. Vertex shader
2. Pixel shader
3. Geometry shader (omit this parameter unless you actually have one)

class MyModel : public Model {
public:
  Texture2D texture;
 
 
 
  ShaderProgram shader;

  // Your model constructor
  MyModel() : // after this colon go the constructors for your shaders,
              // textures, and properties:
    texture("checkers.png"),
   
   
   
    shader("shader.vert", "shader.frag")
  {}
};

If you have an error in your shader code, YOU DON'T HAVE TO RESTART MODELER! Instead, fix your shader, then go to File->Reload Textures And Shaders.

Now, if you made a ShaderProgram field called shader, you could use that shader in your draw() method like this:

shader.use();

This shader will be applied to all subsequent geometry.

If you want to use another shader, just call that shader object's use() method. To stop using shaders, call:

glUseProgram(0);

If you want to get the shader program's ID for more advanced stuff:

GLuint shaderProgramID = shader.getID();

Turn-In Procedure

 Turn-In instructions here. Please prepare a turnin folder with a source and a binary sub-folder in it. And submit the package through Catalyst.

Source Folder

Binary Folder

1. Build your program in Release mode by choosing "Release" in the dropdown menu next to the play button at the top of the Visual Studio screen.
   
2. Copy modeler.exe from the Release folder of your project to turnin/binary.
3. Copy your part 3 shader files, which should be named "shader.frag" and "shader.vert", so we can load them into the sample solution and compare. You may name your other shaders as you like, but we recommend that the fragment shaders end in .frag and the vertex shaders end in .vert.
4. Also copy all of your shaders, textures, and other files needed to run your program -- you should be able to run it right out of the turnin/binary folder.

The modeler application itself is the artifact. To submit it, you will need to do a few special steps you didn't need to do for the binary submission. Basically, you'll encrypt your Modeler shaders and embed them in your program.

1. Make sure your shaders are compliant with the GLSL standard, by checking them with the GLSL Validator tool. Otherwise, some people might not be able to run your artifact.
2. Build your Modeler application in Debug mode.
3. Run your Modeler application. On its File menu, click Generate shaders.cpp. This will bundle all your shaders into a file named shaders.cpp, which was previously empty. It also encrypts your shaders, making it more difficult for future students to steal your hard work.
4. Recompile your application in Release mode. This will cause shaders.cpp to be included in your binary, and in Release mode, the Generate shaders.cpp menu option will be hidden. If you don't compile in Release mode, many people may not be able to run your artifact. Also, we may take down your submission at the end of the quarter (since future students could generate their shaders.cpp files from your submission).
5. Create a zip file containing only your Modeler application, its textures, and any other files it needs to run. Do not include shaders, as they were "built into" your Modeler binary file when you compiled it with shaders.cpp.
6. Extract your zip file to your desktop, and make sure that you can run Modeler (i.e. you aren't missing any files, and the most recent versions of your shaders are being used).
7. Take a screenshot using File->Save Image... from inside your app.
8. Turn in your screenshot, zip file, and any comments or directions on how to use your Modeler here.

#include "vault.h"
const char* SHADER_KEY = NULL;
int SHADER_COUNT = 0;
const char* SHADER_FILENAMES[1];
const char* SHADER_DATA[1];