Difference between revisions of "Project4F18"

From Immersive Visualization Lab Wiki
Jump to: navigation, search
(6. Extra Credit (10 Points max.))
(4. Control Handles (20 Points))
 
(12 intermediate revisions by 2 users not shown)
Line 12: Line 12:
 
* Parametric curves (to be covered in lectures 11 and 12)
 
* Parametric curves (to be covered in lectures 11 and 12)
  
==1. Sky Box==
+
==1. Sky Box (15 Points)==
  
 
Create a sky box for your roller coaster scene. A sky box is a large, square box which is drawn around your entire scene. The inside walls of the box can have pictures of a sky and a horizon, as well as the terrain below. Sky boxes are typically cubic, which means that they consist of six square textures for the six sides of a cube. [http://learnopengl.com/#!Advanced-OpenGL/Cubemaps Here] is a great tutorial for sky boxes in modern OpenGL.
 
Create a sky box for your roller coaster scene. A sky box is a large, square box which is drawn around your entire scene. The inside walls of the box can have pictures of a sky and a horizon, as well as the terrain below. Sky boxes are typically cubic, which means that they consist of six square textures for the six sides of a cube. [http://learnopengl.com/#!Advanced-OpenGL/Cubemaps Here] is a great tutorial for sky boxes in modern OpenGL.
Line 30: Line 30:
  
 
<pre>
 
<pre>
  // Make sure no bytes are padded:
 
  glPixelStorei(GL_UNPACK_ALIGNMENT, 1); // Deprecated in modern OpenGL - do not use!
 
  
   // Select GL_MODULATE to mix texture with polygon color for shading:
+
   // Make sure no bytes are padded:
   glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE); // Deprecated in modern OpenGL - do not use!
+
   glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
  
 
   // Use bilinear interpolation:
 
   // Use bilinear interpolation:
Line 46: Line 44:
 
</pre>
 
</pre>
  
==2. Sphere with Environment Mapping==
+
'''Grading:'''
 +
* -5 if sky box works but is not seamless
 +
 
 +
==2. Sphere with Environment Mapping (20 Points)==
  
 
Use the sphere code you used for the bounding spheres in project 3 to render a solid sphere. It will represent the roller coaster car. Its surface should look like polished metal, so you need to use environment mapping on it.
 
Use the sphere code you used for the bounding spheres in project 3 to render a solid sphere. It will represent the roller coaster car. Its surface should look like polished metal, so you need to use environment mapping on it.
Line 52: Line 53:
 
The [http://learnopengl.com/#!Advanced-OpenGL/Cubemaps Cube map tutorial] explains how environment mapping is done with a sky box as the environment. Feel free to follow it and use the code from the site to make it work. The goal is to have the sky box reflect on the sphere, to give the impression of the sphere's surface being polished metal (i.e., act like a perfect mirror).
 
The [http://learnopengl.com/#!Advanced-OpenGL/Cubemaps Cube map tutorial] explains how environment mapping is done with a sky box as the environment. Feel free to follow it and use the code from the site to make it work. The goal is to have the sky box reflect on the sphere, to give the impression of the sphere's surface being polished metal (i.e., act like a perfect mirror).
  
==3. Track==
+
'''Grading:'''
 +
* -10 if reflection looks somewhat like the skybox but isn't correct
 +
 
 +
==3. Track (30 Points)==
  
 
* Create 8 connected cubic Bezier curves (i.e., 4 control points per curve).
 
* Create 8 connected cubic Bezier curves (i.e., 4 control points per curve).
Line 61: Line 65:
 
Note that the screen shots are samples - your curves do not need to match the ones in these images exactly.
 
Note that the screen shots are samples - your curves do not need to match the ones in these images exactly.
  
==4. Control Handles==
+
'''Grading:'''
 +
* -5 if line is not continuous (eg, dotted, dashed)
 +
* -5 if curve does not loop back to beginning
 +
 
 +
==4. Control Handles (20 Points)==
  
 
Make your control points editable by the user with the keyboard. You need to support both the interpolating and the approximating control points.  
 
Make your control points editable by the user with the keyboard. You need to support both the interpolating and the approximating control points.  
  
====Interpolating control points====
+
====Interpolating control points (5 Points)====
  
 
These are the control points which the curve goes through, also called anchor points (points p0 and p3 for a given curve).
 
These are the control points which the curve goes through, also called anchor points (points p0 and p3 for a given curve).
Line 73: Line 81:
 
[[Image:Anchor_Points_P4_S16.png|400px]]
 
[[Image:Anchor_Points_P4_S16.png|400px]]
  
====Approximating control points====
+
====Approximating control points (5 Points)====
  
 
These control points "pull" on the curve but the curve does not go through them (points p1 and p2 for a given curve).
 
These control points "pull" on the curve but the curve does not go through them (points p1 and p2 for a given curve).
Line 82: Line 90:
 
[[Image:Control_Points_P4_S16.png|400px]]
 
[[Image:Control_Points_P4_S16.png|400px]]
  
====C1 Continuity====
+
====C1 Continuity (5 Points)====
  
 
To ensure C1 continuity, you will need to support control handles like in the video. They connect the two last control points from one curve with the first two control points of the neighboring curve, and ensure that they lie on a straight line. Draw the control handles as lines.
 
To ensure C1 continuity, you will need to support control handles like in the video. They connect the two last control points from one curve with the first two control points of the neighboring curve, and ensure that they lie on a straight line. Draw the control handles as lines.
Line 88: Line 96:
 
[[Image:Handles_P4_S16.png|400px]]
 
[[Image:Handles_P4_S16.png|400px]]
  
====Control Point Manipulation====
+
====Control Point Manipulation (5 Points)====
  
 
* Support keyboard keys to manipulate the control points. Cursor right should switch to the next control point, cursor left goes to the previous point. The x, y, and z keys should move the control point in the respective coordinate axis direction, shift-x/y/z should move them in the opposite direction
 
* Support keyboard keys to manipulate the control points. Cursor right should switch to the next control point, cursor left goes to the previous point. The x, y, and z keys should move the control point in the respective coordinate axis direction, shift-x/y/z should move them in the opposite direction
 
* Update the shape of the Bezier curve in real-time, as you manipulate the control points.
 
* Update the shape of the Bezier curve in real-time, as you manipulate the control points.
  
==5. Sphere Movement==
+
==5. Sphere Movement (15 Points)==
  
 
Unlike in the video, move the sphere along the track at a constant velocity. Pick a speed that makes the sphere go around the track in about 10-20 seconds.
 
Unlike in the video, move the sphere along the track at a constant velocity. Pick a speed that makes the sphere go around the track in about 10-20 seconds.
Line 114: Line 122:
  
 
* '''Virtual Reality:''' Render your application to a virtual reality head set, and control the track's control points with the Touch controllers. Support two viewpoints: one from the point of view of the sphere, one from a vantage point that overlooks the entire track. You can use the Oculus Rifts in the CSE VR lab (room B210). Email the instructor to get access to a Rift and controllers. If you choose this option, we will grade your project in room B210. (10 Points)
 
* '''Virtual Reality:''' Render your application to a virtual reality head set, and control the track's control points with the Touch controllers. Support two viewpoints: one from the point of view of the sphere, one from a vantage point that overlooks the entire track. You can use the Oculus Rifts in the CSE VR lab (room B210). Email the instructor to get access to a Rift and controllers. If you choose this option, we will grade your project in room B210. (10 Points)
 +
 +
<!--
 +
Next time add:
 +
* '''Improved interaction:''' Instead or in addition to keyboard controls, allow moving the control points with the mouse. (5 Points)
 +
-->

Latest revision as of 14:27, 16 November 2018

Contents

Project 4: Roller Coaster

In this project, you need to create a track editor for a simple roller coaster. The roller coaster will consist of a 3D curve representing the track, and a sphere as a car. The track editor should look similar to the one in this video.

Start with code to manipulate the camera with keyboard or mouse, you can use your project 3 for that. We recommend that you your scene graph engine for this project, it will make the project easier.

Note that there is a VR option for extra credit. If you think you want to do it you should start your project with starter code that supports the Oculus Rift.

This project covers the following topics:

  • Sky boxes (see lectures 7 and 10)
  • Environment mapping (see lecture 10)
  • Parametric curves (to be covered in lectures 11 and 12)

1. Sky Box (15 Points)

Create a sky box for your roller coaster scene. A sky box is a large, square box which is drawn around your entire scene. The inside walls of the box can have pictures of a sky and a horizon, as well as the terrain below. Sky boxes are typically cubic, which means that they consist of six square textures for the six sides of a cube. Here is a great tutorial for sky boxes in modern OpenGL.

Here is is a nice collection of textures for sky boxes, and here is an even bigger one.

Draw a cubic sky box and make it extremely big. For instance, by giving it coordinates from -1000 to +1000.

Make sure single-sided rendering (backface culling) is enabled with these lines somewhere in your code to ensure that you will never see the outside of the box (this assumes that your sky box is defined with the triangles facing inward):

glEnable(GL_CULL_FACE); 
glCullFace(GL_BACK); 

Use the following settings for your texture after your first glBindTexture(GL_TEXTURE_CUBE_MAP, id) for correct lighting and filtering settings:


  // Make sure no bytes are padded:
  glPixelStorei(GL_UNPACK_ALIGNMENT, 1);

  // Use bilinear interpolation:
  glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
  glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

  // Use clamp to edge to hide skybox edges:
  glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
  glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

Grading:

  • -5 if sky box works but is not seamless

2. Sphere with Environment Mapping (20 Points)

Use the sphere code you used for the bounding spheres in project 3 to render a solid sphere. It will represent the roller coaster car. Its surface should look like polished metal, so you need to use environment mapping on it.

The Cube map tutorial explains how environment mapping is done with a sky box as the environment. Feel free to follow it and use the code from the site to make it work. The goal is to have the sky box reflect on the sphere, to give the impression of the sphere's surface being polished metal (i.e., act like a perfect mirror).

Grading:

  • -10 if reflection looks somewhat like the skybox but isn't correct

3. Track (30 Points)

  • Create 8 connected cubic Bezier curves (i.e., 4 control points per curve).
  • Draw the Bezier curves by approximating them with at least 150 straight OpenGL line segments each.

Curve P4 S16.png

Note that the screen shots are samples - your curves do not need to match the ones in these images exactly.

Grading:

  • -5 if line is not continuous (eg, dotted, dashed)
  • -5 if curve does not loop back to beginning

4. Control Handles (20 Points)

Make your control points editable by the user with the keyboard. You need to support both the interpolating and the approximating control points.

Interpolating control points (5 Points)

These are the control points which the curve goes through, also called anchor points (points p0 and p3 for a given curve).

  • Highlight the points with spheres or otherwise to make it easy to see where they are.

Anchor Points P4 S16.png

Approximating control points (5 Points)

These control points "pull" on the curve but the curve does not go through them (points p1 and p2 for a given curve).

  • Highlight these points in a similar way as the interpolating points.
  • Use a different color or shape to distinguish them from the anchor points.

Control Points P4 S16.png

C1 Continuity (5 Points)

To ensure C1 continuity, you will need to support control handles like in the video. They connect the two last control points from one curve with the first two control points of the neighboring curve, and ensure that they lie on a straight line. Draw the control handles as lines.

Handles P4 S16.png

Control Point Manipulation (5 Points)

  • Support keyboard keys to manipulate the control points. Cursor right should switch to the next control point, cursor left goes to the previous point. The x, y, and z keys should move the control point in the respective coordinate axis direction, shift-x/y/z should move them in the opposite direction
  • Update the shape of the Bezier curve in real-time, as you manipulate the control points.

5. Sphere Movement (15 Points)

Unlike in the video, move the sphere along the track at a constant velocity. Pick a speed that makes the sphere go around the track in about 10-20 seconds.

Note that to maintain a constant speed you need to factor in the length of the curve segment the sphere is on. Measure the wall clock time since the last update (delta_time), then move the sphere according to this equation: distance_traveled = current_speed * delta_time.

Support keyboard key 'p' to pause/unpause the movement of the sphere.

6. Extra Credit (10 Points max.)

There are multiple options for extra credit. Each will get you up to 10 points, but you can only get a combined maximum of 10 points of extra credit.

  • Rider's View: Create a mode in which the camera is located on top of the sphere and always points forward along the track, simulating the view from the first row of a rollercoaster car. Support keyboard key 'c' to switch between the regular camera and this special action camera. (5 Points)
  • Physics simulation: Instead of constant velocity, move the sphere along based on a friction-less energy preservation model: the sum of the potential energy (proportional to the height the sphere is at) and the kinetic energy (determined by its velocity) remains constant. In other words: the lower the sphere is the faster it goes. This way, when the sphere starts at the highest point of your roller coaster, it should go through the entire track and end up at the highest point again without getting stuck. The movement should look like the ring in the video. (5 Points)
  • Add friction: Requires that you already created the physics simulation above. Add friction to your physics equation, gradually slowing down the sphere as it moves along the track. To keep it from coming to a standstill, make one of your Bezier curves an "accelerator segment", which gradually adds speed to the sphere as it moves along it. Draw this Bezier segment in a different color than the rest of them. (5 Points)
  • Improved Reflections: Make the environment map more realistic by reflecting the track in it, in addition to the sky box. Do this by placing a virtual camera in the middle of the sphere, with a square image and a 90 degree field of view. Then take six pictures with the camera, facing in perpendicular directions to cover all six faces of a cube. These pictures now make up your sky box from this perspective. Then use environment mapping on the sphere using this temporary sky box. This process has to be repeated for every frame rendered. (10 Points)
  • Virtual Reality: Render your application to a virtual reality head set, and control the track's control points with the Touch controllers. Support two viewpoints: one from the point of view of the sphere, one from a vantage point that overlooks the entire track. You can use the Oculus Rifts in the CSE VR lab (room B210). Email the instructor to get access to a Rift and controllers. If you choose this option, we will grade your project in room B210. (10 Points)