Difference between revisions of "Project6Fall11"

From Immersive Visualization Lab Wiki
Jump to: navigation, search
(New page: <!-- build flag pole and flag pole has top; done by surface of revolution; show examples from google search origin of coordinate system at top of flag post use directional light source in ...)
 
(Approach)
 
(9 intermediate revisions by one user not shown)
Line 1: Line 1:
<!--
+
=Project 6: Bezier Curves=
build flag pole and flag
+
pole has top; done by surface of revolution; show examples from google search
+
origin of coordinate system at top of flag post
+
use directional light source in world coordinates (not flag coordinates so light won't rotate with flag)
+
flag: similar to extra credit; provide US flag texture; turn backface culling off; allow trackball rotation about origin with left mouse button; allow uniform scale about origin with right mouse button and up/down for closer/farther
+
extra credit: use custom flag texture; move flag in wind, change wind intensity with number keys (1-9)
+
  
---+ Project 6: Bezier Curves
+
In this project you will create geometry with Bezier curves and patches. This project is due on <b>Friday, November 18th</b>. The assignment will be introduced in the lab by Jorge on Monday, November 7th.
  
In this project you will need to implement functionality to generate surfaces of revolution using Bezier curves. This project is due on *Friday, November 12th*. The project will be introduced in the lab by Iman on Monday, November 8th.
+
==1. Create a TV Tower with Bezier Curves (<b>60 points</b>)==
  
---+++ 1. Surface of Revolution using Bezier Curves (*60 points*)
+
TV towers are tall, skinny towers which are erected to send radio, TV, and other wireless signals over a long distance. Many TV towers have been built with observation decks high above ground. Here are a few examples:
  
---++++ Sample Bezier Curve Applet
+
[[Image:almaty.jpg]][[Image:baku.jpg]][[Image:berlin.jpg]][[Image:doordarshan.jpg]][[Image:jested.jpg]][[Image:ostankino.jpg]][[Image:shanghai.jpg]][[Image:stuttgart.jpg]][[Image:tallinn.jpg]][[Image:thessaloniki.jpg]][[Image:tianjin.jpg]][[Image:vilnius.jpg]]
  
Try out this [[http://www.cs.princeton.edu/~min/cs426/jar/bezier.html][interactive Java applet]] which will let you play with control points and see what the curves they produce look like.  You can even turn on the C1 continuity hint to see where your next control point should go to have C1 continuity.
+
You have been tasked by UCSD's administration to submit a design of a TV tower for UCSD. It is supposed to be built on the green in front of Warren Lecture Halls, and its observation deck is going to house brand new computer labs for CSE students. To serve its purpose as a TV tower, it needs to have a tall antenna on its top.  
  
---++++ Algorithm (*60 Points*)
+
Use your knowledge about surfaces of revolution and Bezier curves to create a design for the TV tower. You need to texture the surface of the TV tower at least with this [[Media:concrete.ppm | concrete texture]]. Use the following settings for your texture after your first <tt>glBindTexture</tt> for correct lighting, filtering, and to enable texture repeat mode:
  
Implement a function that generates a surface of revolution using a Bezier curve. You can read up on surfaces of revolution on [[http://mathworld.wolfram.com/SurfaceofRevolution.html][Mathworld]] or on [[http://en.wikipedia.org/wiki/Surface_of_revolution][Wikipedia]]. The main idea to generate a surface of revolution is to define a 2D curve in the _xy_ plane, called the _generatrix_, which is then rotated around the _y_ axis to produce the surface. DO NOT use any of the curve generating !OpenGL routines for this part of the assignment (i.e., glMap, glEvalCoord, glMapGrid, glEvalMesh, gluNurbsCurve).
+
<pre>
 +
// Select GL_MODULATE to mix texture with color for shading:
 +
glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);
  
You should use a piecewise cubic Bezier curve as the generatrix. To produce a mesh of triangles or quads:
+
// Use bilinear filtering:
 +
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
 +
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
  
  * Create a set of control points for the cubic Bezier generatrix that will create the object outline. Depending on how continuous you can make the curve you will get different numbers of points: C0 continuous: *5 points*; C1 continuous: *10 points*.
+
// Wrap texture over at the edges:
  * Evaluate a number of sample points along the curve in the _xy_ plane. (*15 points*)
+
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
  * Rotate the points around the _y_ axis at a set of angles, and connect the resulting points to a mesh of triangles or quads (*10 points*). The mesh needs to be closed (no gaps) (*5 points*). All visible surfaces need to pass backface culling (i.e., there should not be a visible difference between backface culling enabled and disabled) (*5 points*).
+
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
  * Generate normals and texture coordinates at the mesh vertices. (*15 points*)
+
</pre>
  
You can compute normals as follows: Given the generatrix curve %$(x(t),y(t),0)$% in the _xy_ plane, you first compute the tangent vector %$(x'(t),y'(t),0)$%. The corresponding 3D normal vector is then %$(-y'(t),x'(t),0)$%, which you rotate around the _y_ axis similar as the vertices. Don't forget to normalize the normal vectors. For the _uv_ texture coordinates, you can use the curve parameter at each vertex as the _u_ parameter. The _v_ parameter at each vertex is given by the rotation angle around the _y_ axis you applied to get the vertex, divided by 360.
+
Place at least one directional light source in world coordinates, and integrate your trackball rotation function to spin the tower around. Rotations of the tower should not rotate the light source.
 +
 
 +
<b>Note:</b>Do not use any of the curve generating OpenGL routines for this assignment (i.e., glMap, glEvalCoord, glMapGrid, glEvalMesh, gluNurbsCurve).
 +
 
 +
===Instructions for Creating a Surface of Revolution with Bezier Curves===
 +
 
 +
You will need to create a function which generates a surface of revolution with a set of Bezier curves. You can read up on surfaces of revolution at [http://mathworld.wolfram.com/SurfaceofRevolution.html | Mathworld] or at [http://en.wikipedia.org/wiki/Surface_of_revolution | Wikipedia]. The main idea to generate a surface of revolution is to define a 2D curve in the x/y plane, called the <i>generatrix</i>, which is then rotated around the y axis to produce the surface. You should use a piecewise cubic Bezier curve as the generatrix, with at least three pieces.
 +
 
 +
To produce a mesh of triangles or quads:
 +
 
 +
* Create a set of control points for the cubic Bezier generatrix which will create the object outline. The curve should be C1 continuous between its pieces. (<b>15 points</b>)
 +
* Evaluate a number of sample points along the curve in the x/y plane. (<b>15 points</b>)
 +
* Rotate the points around the y axis at a set of angles, and connect the resulting points to a mesh of triangles or quads (<b>10 points</b>). The mesh needs to be closed (no gaps) (<b>5 points</b>).
 +
* Generate normals and texture coordinates at the mesh vertices. The texture coordinates should cover a range much greater than 0 to 1 so that the texture gets repeated several times to create the effect of a higher resolution texture. (<b>15 points</b>)
 +
 
 +
You can compute normals as follows: Given the generatrix curve (x(t),y(t),0) in the x/y plane, you first compute the tangent vector (x'(t),y'(t),0). The corresponding 3D normal vector is then (-y'(t),x'(t),0), which you rotate around the y axis similar to the vertices. Don't forget to normalize the normal vectors. For the texture coordinates u/v, you can use the curve parameter t at each vertex as the u parameter. The v parameter at each vertex is proportional to the rotation angle around the y axis you applied to get the vertex.
  
 
Your function to produce the surface of revolution should have the following input and output parameters:
 
Your function to produce the surface of revolution should have the following input and output parameters:
  
*Input:*
+
<b>Input:</b>
  * Number %$n$% of Bezier segments
+
* Number n of Bezier segments
  * Array of Bezier control points in the _xy_ plane, i.e. %$(x_i, y_i, 0)$%. For %$n$% cubic segments, you will need %$(n-1)*3+4$% control points.
+
* Array of Bezier control points in the x/y plane, i.e. (xi, yi, 0). For n cubic segments, you will need (n-1)*3+4 control points.
  * Number of points to evaluate along the curve.
+
* Number of points to evaluate along the curve.
  * Angle increment for a full 360 degree rotation.
+
* Angle increment for a full 360 degree rotation.
  
*Output:*
+
<b>Output:</b>
  * Array of vertices
+
* Array of vertices
  * Array of normal vectors
+
* Array of normal vectors
  * Array of texture coordinates
+
* Array of texture coordinates
  * Index array for triangle/quad vertices
+
* Index array for triangle/quad vertices
  
---+++ 2. Demo Scene (*40 points*)
+
<b>Tip:</b> This [http://www.cs.princeton.edu/~min/cs426/jar/bezier.html interactive Java applet] will let you visually set control points and show the curves they generate.  You can turn on the C1 continuity hint to see where your next control point should go to have C1 continuity (i.e., a smooth connection between two curves). The app conveniently displays the control point coordinates numerically so that you can copy them right into your code. Note: some web browsers do not allow you to copy the values directly from the web page, so please try this out before you design the perfect curve.
  
Model a scene using surfaces of revolution, using the algorithm from part 1. Your scene should consist of at least three different objects. We propose you model a [[http://images.google.com/images?q=still+life&hl=en&client=firefox-a&rls=org.mozilla:en-US:official&hs=Amn&um=1&ie=UTF-8&sa=X&oi=images&ct=title][still life]] that consists of a round table with a few objects on it (if generated by the algorithm from part 1, the table counts as an object). You could model a wine bottle, a candle, a wine glass, a vase, an apple, a donut, a pen, or any other object you can think of, which can be created by a surface of revolution. Assign appropriate normals, textures, material properties, and colors to your objects. Use at least one light source to light your scene. All objects need to be textured to get full credit.
+
==2. Add a Flag (<b>40 points</b>)==
  
  * First object: *5 points* for texture, *5 points* for normals/colors/material
+
You decide that your TV tower proposal would have better chances at winning if there was a flag with the [[Media:ucsd-logo.ppm | UCSD logo]] attached to its antenna mast, above the observation deck(s). You can use a different flag texture if you choose.
  * Second and third object: *5 points* for control points, *5 points* for texture, and *5 points* for normals/colors/material
+
  
Note that you will only get the points for normals/colors/material if lighting is correctly set up with at least one light source.
+
===Approach===
  
---+++ 3. Extra Credit (*10 points*)
+
Create a textured cubic Bezier surface patch for the flag:
  
Implement code to generate an animated flag:
+
* Create a cubic Bezier patch with a roughly square surface area and uniform tessellation to produce a triangle mesh of sufficiently high resolution for the expected curvature. [http://www.nbb.cornell.edu/neurobio/land/OldStudentProjects/cs490-96to97/anson/BezierPatchApplet/ This Java app] might help, but unfortunately does not display the control points numerically. (<b>15 points</b>)
 +
* Compute the normals as the cross product of the partial derivatives at each vertex. (<b>10 points</b>)
 +
* Assign texture coordinates to the mesh vertices using the parameter values and map the texture to the Bezier patch. (<b>10 points</b>)
 +
* Tweak the control points and the position of the light source(s), so that the curvature of the patch is clearly visible. (<b>5 points</b>)
  
  * Create a cubic Bezier surface patch. Use uniform tessellation to produce the triangle mesh, and compute the normals as the cross product of the partial derivatives at each vertex  (*4 points*).  
+
Note: The texture for the flag will be in addition to that of the tower. In order to distinguish between the two textures at rendering time you are going to need to use the <tt>glBindTexture(GL_TEXTURE_2D, texture_id)</tt> command. <tt>texture_id</tt> is a unique ID for each texture, generated by the <tt>glGenTextures</tt> command.
  
  * Assign texture coordinates to the mesh vertices using the parameter values. Choose a country's flag, coat of arms or other suitable image. Feel free to download it from the internet, for example flags for for: [[http://en.wikipedia.org/wiki/Usa][USA]], [[http://en.wikipedia.org/wiki/Mexico][Mexico]], [[http://en.wikipedia.org/wiki/Canada][Canada]]. Make sure that your image has a resolution of at least 256x256 pixels so that it does not look fuzzy. If you need a tool to resize the image, we recommend [[http://www.irfanview.com/][IrfanView]] for Windows or [[http://www.imagemagick.org][ImageMagick]] for Linux. Map the texture to the Bezier patch. (*3 points*)
+
==3. Optional: Wind (<b>10 points</b>)==
  
  * Make sure that at least one !OpenGL light source is enabled and configured to make the flag look nice and emphasize the curvature of its surface. (*1 point*)
+
You are invited to give a live demonstration of your 3D model to the selection committee and decide that it would look great if the flag looked like it was waving in the wind. In order to achieve this effect, you need to take the following steps:
  
  * Use simple functions (e.g., linear, sin, cos) to move the control points in order to make the flag wave in the wind. Try using [[http://www.cplusplus.com/reference/clibrary/cstdlib/rand/][random numbers]] where appropriate to make the motion more realistic. Do not move the two interpolating control points at one end as this is where the flag is attached to the flag pole. (*2 points*)
+
* Add another Bezier patch to one side (horizontally or vertically) of the previous one and connect it seamlessly to the first, to allow for more interesting waving patterns. (<b>3 points</b>)
-->
+
* Use a custom flag texture which is wider/taller than the given one to match the new aspect ratio of the two connected Bezier patches. (<b>2 points</b>)
 +
* Wave the flag in the wind: Use smooth mathematical functions (e.g., sin, cos) to move the control points in order to make the flag appear to wave in wind. Use [http://www.cplusplus.com/reference/clibrary/cstdlib/rand/ random numbers] where appropriate to make the motion less repetitive. Do not move the two interpolating control points at the end where the flag is attached to the antenna mast. (<b>3 points</b>)
 +
* Support the number keys 1 through 9 to change the wind speed from slow to fast, which should speed up the waving, but could even change your waving function to create an increasingly more dramatic effect with increasing wind speed. (<b>2 points</b>)

Latest revision as of 00:50, 18 November 2011

Contents

Project 6: Bezier Curves

In this project you will create geometry with Bezier curves and patches. This project is due on Friday, November 18th. The assignment will be introduced in the lab by Jorge on Monday, November 7th.

1. Create a TV Tower with Bezier Curves (60 points)

TV towers are tall, skinny towers which are erected to send radio, TV, and other wireless signals over a long distance. Many TV towers have been built with observation decks high above ground. Here are a few examples:

Almaty.jpgBaku.jpgBerlin.jpgDoordarshan.jpgJested.jpgOstankino.jpgShanghai.jpgStuttgart.jpgTallinn.jpgThessaloniki.jpgTianjin.jpgVilnius.jpg

You have been tasked by UCSD's administration to submit a design of a TV tower for UCSD. It is supposed to be built on the green in front of Warren Lecture Halls, and its observation deck is going to house brand new computer labs for CSE students. To serve its purpose as a TV tower, it needs to have a tall antenna on its top.

Use your knowledge about surfaces of revolution and Bezier curves to create a design for the TV tower. You need to texture the surface of the TV tower at least with this concrete texture. Use the following settings for your texture after your first glBindTexture for correct lighting, filtering, and to enable texture repeat mode:

// Select GL_MODULATE to mix texture with color for shading:
glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);

// Use bilinear filtering:
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

// Wrap texture over at the edges:
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);

Place at least one directional light source in world coordinates, and integrate your trackball rotation function to spin the tower around. Rotations of the tower should not rotate the light source.

Note:Do not use any of the curve generating OpenGL routines for this assignment (i.e., glMap, glEvalCoord, glMapGrid, glEvalMesh, gluNurbsCurve).

Instructions for Creating a Surface of Revolution with Bezier Curves

You will need to create a function which generates a surface of revolution with a set of Bezier curves. You can read up on surfaces of revolution at | Mathworld or at | Wikipedia. The main idea to generate a surface of revolution is to define a 2D curve in the x/y plane, called the generatrix, which is then rotated around the y axis to produce the surface. You should use a piecewise cubic Bezier curve as the generatrix, with at least three pieces.

To produce a mesh of triangles or quads:

  • Create a set of control points for the cubic Bezier generatrix which will create the object outline. The curve should be C1 continuous between its pieces. (15 points)
  • Evaluate a number of sample points along the curve in the x/y plane. (15 points)
  • Rotate the points around the y axis at a set of angles, and connect the resulting points to a mesh of triangles or quads (10 points). The mesh needs to be closed (no gaps) (5 points).
  • Generate normals and texture coordinates at the mesh vertices. The texture coordinates should cover a range much greater than 0 to 1 so that the texture gets repeated several times to create the effect of a higher resolution texture. (15 points)

You can compute normals as follows: Given the generatrix curve (x(t),y(t),0) in the x/y plane, you first compute the tangent vector (x'(t),y'(t),0). The corresponding 3D normal vector is then (-y'(t),x'(t),0), which you rotate around the y axis similar to the vertices. Don't forget to normalize the normal vectors. For the texture coordinates u/v, you can use the curve parameter t at each vertex as the u parameter. The v parameter at each vertex is proportional to the rotation angle around the y axis you applied to get the vertex.

Your function to produce the surface of revolution should have the following input and output parameters:

Input:

  • Number n of Bezier segments
  • Array of Bezier control points in the x/y plane, i.e. (xi, yi, 0). For n cubic segments, you will need (n-1)*3+4 control points.
  • Number of points to evaluate along the curve.
  • Angle increment for a full 360 degree rotation.

Output:

  • Array of vertices
  • Array of normal vectors
  • Array of texture coordinates
  • Index array for triangle/quad vertices

Tip: This interactive Java applet will let you visually set control points and show the curves they generate. You can turn on the C1 continuity hint to see where your next control point should go to have C1 continuity (i.e., a smooth connection between two curves). The app conveniently displays the control point coordinates numerically so that you can copy them right into your code. Note: some web browsers do not allow you to copy the values directly from the web page, so please try this out before you design the perfect curve.

2. Add a Flag (40 points)

You decide that your TV tower proposal would have better chances at winning if there was a flag with the UCSD logo attached to its antenna mast, above the observation deck(s). You can use a different flag texture if you choose.

Approach

Create a textured cubic Bezier surface patch for the flag:

  • Create a cubic Bezier patch with a roughly square surface area and uniform tessellation to produce a triangle mesh of sufficiently high resolution for the expected curvature. This Java app might help, but unfortunately does not display the control points numerically. (15 points)
  • Compute the normals as the cross product of the partial derivatives at each vertex. (10 points)
  • Assign texture coordinates to the mesh vertices using the parameter values and map the texture to the Bezier patch. (10 points)
  • Tweak the control points and the position of the light source(s), so that the curvature of the patch is clearly visible. (5 points)

Note: The texture for the flag will be in addition to that of the tower. In order to distinguish between the two textures at rendering time you are going to need to use the glBindTexture(GL_TEXTURE_2D, texture_id) command. texture_id is a unique ID for each texture, generated by the glGenTextures command.

3. Optional: Wind (10 points)

You are invited to give a live demonstration of your 3D model to the selection committee and decide that it would look great if the flag looked like it was waving in the wind. In order to achieve this effect, you need to take the following steps:

  • Add another Bezier patch to one side (horizontally or vertically) of the previous one and connect it seamlessly to the first, to allow for more interesting waving patterns. (3 points)
  • Use a custom flag texture which is wider/taller than the given one to match the new aspect ratio of the two connected Bezier patches. (2 points)
  • Wave the flag in the wind: Use smooth mathematical functions (e.g., sin, cos) to move the control points in order to make the flag appear to wave in wind. Use random numbers where appropriate to make the motion less repetitive. Do not move the two interpolating control points at the end where the flag is attached to the antenna mast. (3 points)
  • Support the number keys 1 through 9 to change the wind speed from slow to fast, which should speed up the waving, but could even change your waving function to create an increasingly more dramatic effect with increasing wind speed. (2 points)