http://ivl.calit2.net/wiki/api.php?action=feedcontributions&user=Ajh018&feedformat=atom Immersive Visualization Lab Wiki - User contributions [en] 2024-03-29T06:27:03Z User contributions MediaWiki 1.21.1 http://ivl.calit2.net/wiki/index.php/Project4F18 Project4F18 2018-11-05T23:12:50Z <p>Ajh018: /* 1. Sky Box */</p> <hr /> <div>=Project 4: Roller Coaster=<br /> <br /> 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 [https://www.youtube.com/watch?v=hlDYJNEiYvU this video].<br /> <br /> 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.<br /> <br /> Note that there is a VR option for extra credit. If you think you want to do it you should start your project with [https://github.com/wangtim1996/MinimalVR starter code that supports the Oculus Rift].<br /> <br /> This project covers the following topics:<br /> * Sky boxes (see lectures 7 and 10)<br /> * Environment mapping (see lecture 10)<br /> * Parametric curves (to be covered in lectures 11 and 12)<br /> <br /> ==1. Sky Box==<br /> <br /> 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.<br /> <br /> [http://www.f-lohmueller.de/pov_tut/skyboxer/skyboxer_3.htm Here is is a nice collection of textures for sky boxes], and [http://www.custommapmakers.org/skyboxes.php here is an even bigger one]. <br /> <br /> Draw a cubic sky box and make it extremely big. For instance, by giving it coordinates from -1000 to +1000.<br /> <br /> 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):<br /> <br /> &lt;pre&gt;<br /> glEnable(GL_CULL_FACE); <br /> glCullFace(GL_BACK); <br /> &lt;/pre&gt;<br /> <br /> Use the following settings for your texture after your first &lt;code&gt;glBindTexture(GL_TEXTURE_CUBE_MAP, id)&lt;/code&gt; for correct lighting and filtering settings:<br /> <br /> &lt;pre&gt;<br /> <br /> // Make sure no bytes are padded:<br /> glPixelStorei(GL_UNPACK_ALIGNMENT, 1);<br /> <br /> // Use bilinear interpolation:<br /> glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER, GL_LINEAR);<br /> glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR);<br /> <br /> // Use clamp to edge to hide skybox edges:<br /> glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);<br /> glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);<br /> <br /> &lt;/pre&gt;<br /> <br /> ==2. Sphere with Environment Mapping==<br /> <br /> 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.<br /> <br /> 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).<br /> <br /> ==3. Track==<br /> <br /> * Create 8 connected cubic Bezier curves (i.e., 4 control points per curve).<br /> * Draw the Bezier curves by approximating them with at least 150 straight OpenGL line segments each.<br /> <br /> [[Image:Curve_P4_S16.png|400px]]<br /> <br /> Note that the screen shots are samples - your curves do not need to match the ones in these images exactly.<br /> <br /> ==4. Control Handles==<br /> <br /> Make your control points editable by the user with the keyboard. You need to support both the interpolating and the approximating control points. <br /> <br /> ====Interpolating control points====<br /> <br /> These are the control points which the curve goes through, also called anchor points (points p0 and p3 for a given curve).<br /> <br /> * Highlight the points with spheres or otherwise to make it easy to see where they are.<br /> <br /> [[Image:Anchor_Points_P4_S16.png|400px]]<br /> <br /> ====Approximating control points====<br /> <br /> These control points &quot;pull&quot; on the curve but the curve does not go through them (points p1 and p2 for a given curve).<br /> <br /> * Highlight these points in a similar way as the interpolating points.<br /> * Use a different color or shape to distinguish them from the anchor points.<br /> <br /> [[Image:Control_Points_P4_S16.png|400px]]<br /> <br /> ====C1 Continuity====<br /> <br /> 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.<br /> <br /> [[Image:Handles_P4_S16.png|400px]]<br /> <br /> ====Control Point Manipulation====<br /> <br /> * 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<br /> * Update the shape of the Bezier curve in real-time, as you manipulate the control points.<br /> <br /> ==5. Sphere Movement==<br /> <br /> 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.<br /> <br /> 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.<br /> <br /> Support keyboard key 'p' to pause/unpause the movement of the sphere.<br /> <br /> ==6. Extra Credit (10 Points max.)== <br /> <br /> 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.<br /> <br /> * '''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)<br /> <br /> * '''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)<br /> <br /> * '''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 &quot;accelerator segment&quot;, 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)<br /> <br /> * '''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)<br /> <br /> * '''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)</div> Ajh018 http://ivl.calit2.net/wiki/index.php/Project4F18 Project4F18 2018-11-05T23:01:41Z <p>Ajh018: /* 1. Sky Box */</p> <hr /> <div>=Project 4: Roller Coaster=<br /> <br /> 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 [https://www.youtube.com/watch?v=hlDYJNEiYvU this video].<br /> <br /> 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.<br /> <br /> Note that there is a VR option for extra credit. If you think you want to do it you should start your project with [https://github.com/wangtim1996/MinimalVR starter code that supports the Oculus Rift].<br /> <br /> This project covers the following topics:<br /> * Sky boxes (see lectures 7 and 10)<br /> * Environment mapping (see lecture 10)<br /> * Parametric curves (to be covered in lectures 11 and 12)<br /> <br /> ==1. Sky Box==<br /> <br /> 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.<br /> <br /> [http://www.f-lohmueller.de/pov_tut/skyboxer/skyboxer_3.htm Here is is a nice collection of textures for sky boxes], and [http://www.custommapmakers.org/skyboxes.php here is an even bigger one]. <br /> <br /> Draw a cubic sky box and make it extremely big. For instance, by giving it coordinates from -1000 to +1000.<br /> <br /> 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):<br /> <br /> &lt;pre&gt;<br /> glEnable(GL_CULL_FACE); <br /> glCullFace(GL_BACK); <br /> &lt;/pre&gt;<br /> <br /> Use the following settings for your texture after your first &lt;code&gt;glBindTexture(GL_TEXTURE_CUBE_MAP, id)&lt;/code&gt; for correct lighting and filtering settings:<br /> <br /> &lt;pre&gt;<br /> <br /> // Use bilinear interpolation:<br /> glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER, GL_LINEAR);<br /> glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR);<br /> <br /> // Use clamp to edge to hide skybox edges:<br /> glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);<br /> glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);<br /> <br /> &lt;/pre&gt;<br /> <br /> ==2. Sphere with Environment Mapping==<br /> <br /> 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.<br /> <br /> 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).<br /> <br /> ==3. Track==<br /> <br /> * Create 8 connected cubic Bezier curves (i.e., 4 control points per curve).<br /> * Draw the Bezier curves by approximating them with at least 150 straight OpenGL line segments each.<br /> <br /> [[Image:Curve_P4_S16.png|400px]]<br /> <br /> Note that the screen shots are samples - your curves do not need to match the ones in these images exactly.<br /> <br /> ==4. Control Handles==<br /> <br /> Make your control points editable by the user with the keyboard. You need to support both the interpolating and the approximating control points. <br /> <br /> ====Interpolating control points====<br /> <br /> These are the control points which the curve goes through, also called anchor points (points p0 and p3 for a given curve).<br /> <br /> * Highlight the points with spheres or otherwise to make it easy to see where they are.<br /> <br /> [[Image:Anchor_Points_P4_S16.png|400px]]<br /> <br /> ====Approximating control points====<br /> <br /> These control points &quot;pull&quot; on the curve but the curve does not go through them (points p1 and p2 for a given curve).<br /> <br /> * Highlight these points in a similar way as the interpolating points.<br /> * Use a different color or shape to distinguish them from the anchor points.<br /> <br /> [[Image:Control_Points_P4_S16.png|400px]]<br /> <br /> ====C1 Continuity====<br /> <br /> 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.<br /> <br /> [[Image:Handles_P4_S16.png|400px]]<br /> <br /> ====Control Point Manipulation====<br /> <br /> * 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<br /> * Update the shape of the Bezier curve in real-time, as you manipulate the control points.<br /> <br /> ==5. Sphere Movement==<br /> <br /> 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.<br /> <br /> 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.<br /> <br /> Support keyboard key 'p' to pause/unpause the movement of the sphere.<br /> <br /> ==6. Extra Credit (10 Points max.)== <br /> <br /> 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.<br /> <br /> * '''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)<br /> <br /> * '''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)<br /> <br /> * '''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 &quot;accelerator segment&quot;, 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)<br /> <br /> * '''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)<br /> <br /> * '''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)</div> Ajh018 http://ivl.calit2.net/wiki/index.php/Project2F18 Project2F18 2018-10-10T19:34:03Z <p>Ajh018: /* 2. 3D Model Loader (20 Points) */</p> <hr /> <div>=Project 2: 3D Models and Lighting=<br /> <br /> In this homework assignment you're going to practice how to:<br /> <br /> * load polygonal OBJ files<br /> * render 3D models in modern OpenGL<br /> * control objects using the mouse<br /> * set up light sources and material properties<br /> <br /> [https://youtu.be/OseU4-1cTYc Watch a demo] that includes some extra credit work.<br /> <br /> ==1. Rendering using modern OpenGL (5 Points)==<br /> <br /> Download and build the [[BasecodeCSE167F18|starter code for project 2]], which renders a spinning cube with modern OpenGL, through the use of a VAO (Vertex Array Object), VBOs (Vertex Buffer Object), and EBOs (element buffer object). In order to make the use of the programmable pipeline possible, a shader class was added to the starter code, along with a sample vertex and fragment shader. At the moment, the sample fragment shader causes all objects to be colored pink. You will be fixing this later when you begin working with lights.<br /> <br /> '''Notes:'''<br /> * [http://learnopengl.com/ This] is a good resource for learning modern OpenGL.<br /> <br /> ==2. 3D Model Loader (20 Points)==<br /> <br /> You already know how to load point clouds. It turns out that the 3D model files from project 1 (Bunny, Bear, Dragon) contain surface descriptions as well, by means of triangle connectivity.<br /> <br /> Besides vertices and vertex normals you are going to have to parse the files for connectivity. It is defined with the letter 'f' for face. Each line starting with the letter 'f' lists three sets of indices to vertices and normals, which define the three corners of a triangle. The numbers are indices into the vertex and vertex normal lists. Note that the indices are 1-based (start with index 1). Example: &lt;br&gt;&lt;pre&gt;f 31514//31514 31465//31465 31464//31464&lt;/pre&gt;<br /> <br /> Copy your OBJ loader code from project 1 into the new project, and add parsing the 'f' lines to load triangles. Then modify your code to display the OBJ models with triangles instead of the cube. Allow switching between them just like in project 1 with the F1, F2 and F3 keys. <br /> <br /> Make sure you copy your centering and resizing code from project 1 so that the models more or less fill your graphics window.<br /> <br /> ==3. Mouse control (25 Points)==<br /> <br /> If you still have your spin-while-idle code, now is the time to disable it. From now on we support the mouse to control your 3D models. Add functionality to allow the following operations on the displayed 3D model:<br /> <br /> ===Scaling the model (10 Points)===<br /> Support the mouse wheel to scale the model up or down, using matrix transformations (not by modifying each of the vertex positions like in project 1). If you don't have a mouse wheel, use the right mouse button. If you don't have that, use two-finger drags on the touch pad. If your computer doesn't support that either, use the 's'/'S' keys to scale.<br /> <br /> ===Rotating the model (15 Points)===<br /> While the left mouse button is pressed and the mouse is moved, rotate the model about the center of your graphics window. We will refer to this operation as &quot;trackball rotation&quot;. [[Media:cube.mpg|This video]] shows how this should work. <br /> <br /> The figure below illustrates how to translate mouse movement into a rotation axis and angle. m0 and m1 are consecutive 2D mouse positions. These positions define two locations v and w on an invisible 3D sphere that fills the rendering window. Use their cross product as the rotation axis a = v x w, and the angle between v and w as the rotation angle.<br /> <br /> [[Image:Trackball.jpg]]<br /> <br /> Horizontal mouse movement exactly in the middle of the window should result in a rotation just around the y-axis. Vertical mouse movement exactly in the middle of the window should result in a rotation just around the x-axis. Mouse movements in other areas and directions should result in rotations about an axis a which is not parallel to any single coordinate axis, and is determined by the direction the mouse is moved in.<br /> <br /> Once you have calculated the trackball rotation matrix for a mouse drag, you will need to multiply it with the object-to-world transformation matrix of the object you are rotating.<br /> <br /> For step by step instructions, take a look at [http://web.cse.ohio-state.edu/~crawfis/Graphics/VirtualTrackball.html this tutorial]. Note that the tutorial was written for Windows messages, instead of GLFW mouse events. This means that you'll need to replace the &quot;CSierpinskiSolidsView::OnLButtonDown&quot;, &quot;CSierpinskiSolidsView::OnMouseMove&quot;, etc. with an appropriate GLFW equivalent.<br /> <br /> To help you understand the code better, here is a line-by-line commented version of the trackBallMapping function:<br /> <br /> &lt;pre&gt;<br /> Vec3f CSierpinskiSolidsView::trackBallMapping(CPoint point) // The CPoint class is a specific Windows class. Either use separate x and y values for the mouse location, or use a Vector3 in which you ignore the z coordinate.<br /> {<br /> Vec3f v; // Vector v is the synthesized 3D position of the mouse location on the trackball<br /> float d; // this is the depth of the mouse location: the delta between the plane through the center of the trackball and the z position of the mouse<br /> v.x = (2.0*point.x - windowSize.x) / windowSize.x; // this calculates the mouse X position in trackball coordinates, which range from -1 to +1<br /> v.y = (windowSize.y - 2.0*point.y) / windowSize.y; // this does the equivalent to the above for the mouse Y position<br /> v.z = 0.0; // initially the mouse z position is set to zero, but this will change below<br /> d = v.Length(); // this is the distance from the trackball's origin to the mouse location, without considering depth (=in the plane of the trackball's origin)<br /> d = (d&lt;1.0) ? d : 1.0; // this limits d to values of 1.0 or less to avoid square roots of negative values in the following line<br /> v.z = sqrtf(1.001 - d*d); // this calculates the Z coordinate of the mouse position on the trackball, based on Pythagoras: v.z*v.z + d*d = 1*1<br /> v.Normalize(); // Still need to normalize, since we only capped d, not v.<br /> return v; // return the mouse location on the surface of the trackball<br /> }<br /> &lt;/pre&gt;<br /> <br /> ==4. Define Lights and Materials (20 Points)==<br /> <br /> In order to render the 3D models as realistically as possible, write shaders to render them with the '''Phong illumination model''' and '''per pixel lighting'''. Per pixel lighting means that you have to do all of your light reflection calculations in the fragment shader. For the shader to work, you will have to define light sources as well as different materials for each of your 3D models. Write vertex and fragment shaders to support the features listed below. In this part of the project, you should use fixed positions for the lights and all other lighting parameters. But know that in part 5 you're going to have to make some of these parameters user modifiable, so you may want to already introduce variables instead of using constant values.<br /> <br /> ===Materials (10 Points)===<br /> <br /> Assign each of the 3D model files different material properties, following the instructions below. Each object should have a different color of your choice. <br /> <br /> * One of the models (your pick) should be very shiny (ie, high specular component), with no diffuse reflection.<br /> * Another model should only use diffuse reflection, with zero shininess.<br /> * The third object should have significant diffuse '''and''' specular reflection components.<br /> <br /> Support keyboard key 'n' to switch between the rendering modes of '''normal coloring''' and your new '''Phong illumination model'''. <br /> <br /> * Normal coloring is useful to keep around so that you can check if your surface normals have been calculated correctly. Normal coloring should work just as you implemented it in project 1, except now you render the entire 3D model (all triangles, not just the vertices) with normal shading.<br /> * In Phong render mode, you render your 3D models more realistically, determined by their materials and the type of light source shining on them.<br /> <br /> ===Light sources (10 Points)===<br /> <br /> Create two different light sources: a point light and a spotlight. Use C language structs to define their properties, as given below. Use linear attenuation when calculating the light intensity.<br /> <br /> ====Point light properties====<br /> * Color (vec3)<br /> * Position (vec3)<br /> <br /> ====Spotlight properties====<br /> * Color (vec3)<br /> * Position (vec3)<br /> * Direction of center of cone (vec3)<br /> * Spot cutoff (float)<br /> * Spot exponent (float)<br /> <br /> ==5. Interactive Light Controls (30 Points)==<br /> <br /> Each light should have a different color of your choice. To test out the effect of your light sources, make the light sources movable with the mouse (rotate them around the model with your trackball controls), and add keyboard commands for certain illumination parameters as described below.<br /> <br /> ====Light Position (10 Points)====<br /> <br /> Select which lights are affected by rotations: '1' toggles (enables/disables) point light rotation, '2' toggles spotlight rotation on/off. When they are on, the light should rotate around the model when the mouse is moved. When they are off, the light should be fixed '''in model space''', ie, it should rotate with the model. The '0' key should toggle model rotations on/off. Both lights should be illuminated at all times.<br /> <br /> The operation you implemented to scale the model (ie, mouse wheel), should change the distance of the light from the center of the graphics window.<br /> <br /> ====Light Representation (10 Points)====<br /> <br /> For both light sources, display [[Media:CSE167SphereOBJ.zip|this sphere]] in the position of the light source and in its color. <br /> <br /> The sphere needs to be scaled down to be only about 1/4 inch wide on the screen, just big enough to be clearly visible. It's best to scale them down with a uniform scale matrix just before the model matrix transformation (or as part of the model matrix).<br /> <br /> To draw the sphere in the color of the light source you should use the light color as the light's ambient reflection value, and use no diffuse or specular reflection (they wouldn't work properly because the light source is inside of the light source geometry).<br /> <br /> ====Spotlight Parameters (10 Points)====<br /> <br /> * 'w'/'W' should make the spot wider/narrower.<br /> * 'e'/'E' should make the spot edge sharper/blurrier.<br /> * The spot should always point at the center of your graphics window as it rotates around the model.<br /> <br /> ====Notes====<br /> <br /> * [https://www.youtube.com/watch?v=rTKP50ePS54&amp;feature=youtu.be This video] demonstrates what is expected (but it does not include normal coloring).<br /> * [http://learnopengl.com/#!Lighting/Multiple-lights Learn OpenGL] provides [http://learnopengl.com/code_viewer.php?code=lighting/lighting_maps&amp;type=vertex vertex] and [http://learnopengl.com/code_viewer.php?code=lighting/multiple_lights&amp;type=fragment fragment] shader code, as well as the [http://learnopengl.com/code_viewer.php?code=lighting/multiple_lights-exercise2 corresponding C++ code] for different lighting parameters. The shader does almost exactly what you need. Find out how it differs from the equations given on the discussion slides for this homework project and make the few modifications.<br /> * Lighthouse 3D also provides excellent tutorials for the necessary shaders: for [http://www.lighthouse3d.com/tutorials/glsl-tutorial/directional-lights-per-pixel/ directional lights], [http://www.lighthouse3d.com/tutorials/glsl-tutorial/point-lights/ point lights] and [http://www.lighthouse3d.com/tutorials/glsl-tutorial/spotlights/ spot lights].<br /> * [http://www.tomdalling.com/blog/modern-opengl/06-diffuse-point-lighting/ This tutorial] provides very useful information on light parameters in chapters 6 and 7. An additional tutorial on different light types is provided in chapter 8.<br /> * [http://devernay.free.fr/cours/opengl/materials.html This table of material properties] may inspire you to select interesting material parameters. But note that there are specific requirements for the materials you use, which make it necessary to eliminate one or more reflection components (ambient, diffuse, specular) when you define your own materials.<br /> <br /> '''Grading:'''<br /> * -5 if all that's done is passing the normals<br /> * -10 if all code is there but lighting doesn't work<br /> <br /> ==6. Extra Credit (10 Points)==<br /> <br /> You can receive up to 10 points of extra credit if you do one or more of the following things:<br /> <br /> 1) Add a directional light source and make its direction controllable with your virtual trackball. (3 points)<br /> <br /> 2) Add support to turn on or off each light source individually. (3 points)<br /> <br /> 3) Create a visual editor to allow the custom modification of the colors and shading parameters of your light source and surface materials. Use the 'c' key to display the color editor. The editor needs to be exclusively mouse controlled. You can either write your own OpenGL code to generate GUI widgets such as buttons or sliders, or you can use an existing open source library for it, such as [https://github.com/wjakob/nanogui NanoGUI]. <br /> <br /> You'll get points for the modification of the following parameters:<br /> <br /> * The object's colors and other parameters for ambient, diffuse and specular reflectivity. (5 Points)<br /> * The light's color and other properties: if using a spot light: cone angle, edge falloff; else: attenuation mode (constant, linear, quadratic). (5 Points)<br /> <br /> <br /> We might add more options later.</div> Ajh018