CSE 167 ASSIGNMENT 2 - DUE FEB 16 12:59 PM From this point on we're no longer using the rasterizer code you wrote. In all future

homework projects we're going to use OpenGL for all our rendering.

In this homework assignment you're going to learn how to:

▪ load polygonal OBJ files

▪ render polygons in modern OpenGL

▪ automatically center and scale 3D models

▪ control objects using the mouse

▪ set up light sources

▪ set material properties so that your objects look more interesting 1. 3D Model Loader You already know how to load point clouds. It turns out that the 3D model files from

project 1 (Bunny, Bear) contain surface descriptions as well, by means of triangle

connectivity.

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. Example: f 31514//31514 31465//31465 31464//31464

Parsing the faces

Modify your OBJ loader so that it also parses the face lines, then modify your code to display triangles instead of vertices for the OBJ objects. Ensure stored faces values are 0-based. IMPORTANT: NOW YOU NEED TO RENDER 3 OBJECTS(DRAGON, BUNNY, BEAR) INDIVIDUALLY TO THE SCREEN AND YOU SHOULD BE ABLE TO SWITCH AMONG THEM BY PRESSING F1, F2, F3 A VIDEO DEMO OF THIS ASSIGNMENT WILL BE POSTED LATER THESE WEEK. Centering and Scaling the model In order to make mouse controls you are about to implement work well, you will

need to center your OBJ models and standardize their sizes. This means you need

to traverse the vertices of each of your models and create a translation and scale matrix that center and resizes it. Write function calls to do both of these things whenever a model is loaded from disk, and store the resulting matrix in memory. Center the model such that the geometric center of the model resides in the center of the rendering window. This can be done by looking at each dimension (x,y,z) independently and comparing the current object space origin with the geometric center of the model, calculated by finding the minimum and maximum coordinates along the respective dimension, and using the midpoint between them as the centering point for the model. Scaled all models to the same size, such that they fit within an imaginary 2x2x2

cube centered around the origin. Afterwards, the vertex position values should be

in the range of [-1,1].

2. Rendering using modern OpenGL The starter code has been modified so that the Cube now gets rendered 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. Using Cube's example of the modern OpenGL approach, add the ability to render

your OpenGL using modern OpenGL. You no longer need to support rasterizer

mode. Notes:

▪ This is a good resource for learning modern OpenGL

3. Mouse control Since we'll be allowing the mouse to rotate the object, if you had your spin while

idle code, now would be the time to disable it.

It is time to support the mouse to control your 3D models. Add functionality to allow

the following operations on the displayed 3D model:

Rotating the model While the left mouse button is pressed and the mouse is moved, rotate the model about the center of your graphics window. This is an extension of the orbit function ('o' key), but it should orbit the model around a sphere, not just a circle. We will refer to this operation as "trackball rotation". This video shows how this should work.

Translation in the x-y plane When the right mouse button is pressed and the mouse is moved, move the model in the plane of the screen (similar to what the 'x' and 'y' keys did). Scale this operation so that when the model is in the screen space z=0 plane, the model follows your mouse pointer as closely as possible. If you don't have a right mouse button, use your mouse button along with a function key (Shift, Control, Alt, etc.) to enter this mode.

Translation along the z-axis Use the mouse wheel to move the model along the screen space z axis (i.e., in and

out of the screen = push back and pull closer).

Retain scale functionality Retain the functionality of the 's'/'S' keys to scale the model about its object space origin. The other keyboard functions for the control of the 3D models are no longer needed, but it does not hurt to keep them supported.

Notes on the Trackball Rotation 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.

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. 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. For step by step instructions, take a look at 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 "CSierpinskiSolidsView::OnLButtonDown",

"CSierpinskiSolidsView::OnMouseMove", etc. with an appropriate GLFW equivalent.

To help you understand the code better, here is a line-by-line commented version

of the trackBallMapping function:

4. Define Lights and Materials 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.

Materials Assign each of the 3D model files different material properties, following the

instructions below. Each object should have a different color of your choice.

▪ One of the models should be very shiny, with no diffuse reflection.

▪ Another model should only use diffuse reflection, with zero shininess.

▪ The third object should have significant diffuse and specular reflection

components.

Rendering Mode Switch Support keyboard key 'n' to switch between the rendering modes of normal

coloring and your new Phong illumination model.

▪ 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.

▪ In Phong render mode, you render your 3D models more realistically,

determined by their materials and the type of light source shining on them.

Light sources You will need to create three separate light sources: a directional light, a point light, and a spotlight. Use three C structs to define the parameters for the three types of light sources. Your structs implementation should at least contain these variables. Directional light properties

▪ Color (vec3)

▪ Direction (vec3) Point light properties

▪ Color (vec3)

▪ Position (vec3)

▪ Use linear attenuation when calculating the light intensity. Spotlight properties

▪ Color (vec3)

▪ Position (vec3)

▪ Direction of center of cone (vec3)

▪ Spot cutoff (float)

▪ Spot exponent (float)

▪ Use quadratic attenuation when calculating the light intensity.

5. Interactive Light Controls To test out the effect of your light sources, make the light sources movable with the mouse, and add keyboard commands for certain illumination parameters as described below. Light Selection

▪ Give the user control of the lights: make them selectable with the number keys ‘1’, ‘2’, ‘3’, ‘4’ for the control directional, point and spot lights. Keys ‘1’, ‘2’ and ‘3’ are used to switch among 3 scenes. Key '4' is for toggling directional light on/off on all scenes

Scene 1: Directional(rotating) light only. Use key ‘4’ to switch on/off directional light. Mouse movement does not apply to anything.

Scene 2: Directional light(rotating) + point light. Use key ‘4’ to switch on/off

directional light. Mouse movement applies to point light (details below).

Scene 3: Directional light(rotating) + spot light. Use key ‘4’ to switch on/off

directional light. Mouse movement applies to spot light (details below). Use

the '0' key to de-select and return to controlling the 3D model. Light Representation

▪ For directional lights no light representation is necessary.

▪ For the point light draw this sphere where the light source is, and in the color of the light that is selected.

▪ For the spotlight draw this cone and rotate it so that its round end points in the

direction of the light. The cone should also have the color of the spotlight.

▪ Both sphere and cone need to be scaled down to be only about 1/4 inch wide on screen, just big enough to be clearly visible. Best to scale them down with a uniform scale matrix just before the model matrix transformation (or as part of the model matrix).

▪ To draw sphere and cone 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).

When a light source is selected, your mouse controls should only affect this

particular light source. You need to support the following functions, depending on

the type of light source: Directional Light

▪ The mouse does not affect this light source. The directional light should be

“hovering” over the object, i.e rotating around positive y-axis.

Point Light

▪ Rotations rotate the light around the origin of the world coordinate system (=center of window).

▪ Light intensity should be visibly different on the model as the light is moved

closer and farther from the model surface.

Spotlight

▪ Should do everything the point light does, plus:

▪ 'w'/'W' should make the spot wider/narrower.

▪ 'e'/'E' should make the spot edge sharper/blurrier.

▪ Make sure the spot keeps pointing at the center of your world coordinate system even when its position is changed.

▪ The light intensity should be visibly different on the model as the light is

moved closer and farther from the model surface, with an even more visible

effect than with the point light (it uses linear vs. quadratic attenuation).

Notes

▪ Learn OpenGL provides vertex and fragment shader code, as well as the 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.

▪ Lighthouse 3D also provides excellent tutorials for the necessary shaders:

for directional lights, point lights and spot lights.

▪ 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.

▪ 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.

Submission: Please zip all your files except obj files and submit it on Gradescope. Grade Session - FEB 16 1:00 - 3:00 PM