辅导案例-543-E20
Project 3 (Final Project, Part I) https://canvas.wpi.edu/courses/20567/assignments/136970[2020/6/23 2:38:33] CS4731_543-E20 Project 3 (Final Project, Part I) Due Thursday by 11:59pm Points 100 Submitting a file upload File Types zip Available Jun 9 at 10am - Jul 2 at 6am 23 days Submit Assignment Demo Video (no audio) Optional sphere.ply file: sphere.ply Overview: In this project, we will explore hierarchical modeling of 3D meshes. We will also explore lighting and shading. The goal of this part of the assignment is to familiarize yourself with transformations and hierarchical modeling in WebGL using a matrix stack. You will be modeling and animating a kinetic sculpture such as Alexander Calder's hanging mobiles. Example images and an example video are given below: Project 3 (Final Project, Part I) https://canvas.wpi.edu/courses/20567/assignments/136970[2020/6/23 2:38:33] First Steps: Your task is to model and animate a kinetic sculpture. In order to do so, you need to first construct a scene containing several objects, then you need to organize them hierarchically and simulate their motions according to the hierarchy you define. All models should be properly sized so that they do not look disproportionate or display awkwardly. All models should have approximately the same size. In the video, you should have noticed multiple axes of movement for each model, where the model may rotate about it's own axis while rotating around a larger arm off which it is hanging. Implement this effect!! To draw the arms connecting the meshes, you can just draw horizontal lines, and to connect the meshes to the ends of the arm, just draw vertical lines. Also, make sure you set up perspective projection Gouraud Lighting (smooth shading): Draw all your meshes in your hierarchy as solid meshes (not wireframes). Implement shaders for Gouraud lighting (as demonstrated in class) and flat shading. You will switch between shading types using keystrokes below. Apply some interesting colors and material properties to your 3D meshes. Don't forget to enable depth testing and hidden surface removal. Implement a spotlight: The spotlight is like a cone, and light only reaches objects inside the cone. Objects outside a certain angle--called the cutoff angle, phi--gets no light from the spotlight (although it may still receive ambient light from the environment). Make the cutoff angle a variable that can be controlled with a keystroke. Make sure the presence of the spotlight is obvious! Matrix stack: You will need to implement a matrix stack, including stack.push() and stack.pop() routines. You may use a simple linked list to store the stack or use a more sophisticated tree structure. Animation: Be mindful of performance issues while you implement this homework. As your scene size grows, avoid unnecessary re-initialization, file reopening, etc. that could slow down your program considerably. Other Requirements: Your sculpture must consist of at least 6 meshes with interesting colors, including at least three cubes and at least three spheres. Each mesh should have a different color. Your sculpture must contain at least 3 levels of hierarchy. (See the second image at the top of the page.) The animation should move all parts of the sculpture. It should be physically motivated and make sense; that is, there are no magical, free-flying shapes or disjointed movements. Objects should remain connected in whatever way you connected them as you animate them. All mesh models should rotate counter-clockwise about their own Y axis. The arms should rotate in the direction opposite of the level above it. For instance, if the arm of Level 1 of the hierarchy rotates clockwise, the arm of level 2 of the hierarchy should rotate counter-clockwise, the arm of level 3 should rotate clockwise, and so on. (You can have the level 1 arm rotate counter-clockwise and alternate from Project 3 (Final Project, Part I) https://canvas.wpi.edu/courses/20567/assignments/136970[2020/6/23 2:38:33] there, too.) Basically, the arms of consecutive levels of the hierarchy should alternate between rotating clockwise and counter-clockwise. Additional Keystrokes: Also implement the following additional keystrokes. (User hits 'p'): Increase spotlight cut off angle (increase cone angle) (User hits 'P'): Decrease spotlight cut off angle (decrease cone angle) (User hits 'm'): The scene is shaded using Gouraud lighting (smooth shading) (User hits 'M'): The scene is shaded using flat shading Note that these keys are case-sensitive. If you do not want to worry about case-sensitivity, you are also welcome to implement "i" instead of "P" for "decrease spotlight cut off angle" and "n" instead of "M" for "the scene is shaded using flat shading. Extra Credit: For this project, you are allowed to include additional features above and beyond the basic requirements. The instructor has sole discretion over the point value of each feature, and the student may earn up to 10 points total. To earn any credit, you must list each feature in the comments at the top of your main *.js file. To be eligible for extra credit, the additional features must be graphical in nature. This means that you show thought behind how something is presented to the user on screen or how the graphics are being processed behind the scenes. In addition, the additional features may not be features you will implement as part of the base requirements for Part II of this project. Here are some example features to consider: Instead of basic geometric shapes, make some of the mobile models your .ply files from Project 2. Implement Phong instead of Gouraud shading. This means you will be implementing your shading on a per-pixel basis in the fragment shader. Implement a keystroke that draws a box around each mesh showing the extents of each mesh. Have the arms of the hierarchy follow a gentle sinusoid. i.e. in addition to going round clockwise or counterclockwise, the hierarchy arms (and objects) also go slightly up and down like on a merry go round. The sinusoidal movements of all levels of the hierarchy should have the same amplitude (i.e. move up and down gently by the same amount). You are not limited to these ideas. If there is something else you would like to do but are not sure if it would qualify for extra credit, please contact me. Submitting Your Work: Make sure to double-check that everything works before submitting. Put all of your files (JavaScript, HTML, etc.) into a folder and zip it. Please include your *.ply files for ease of grading. Upload it to Canvas. Do not email me your program or submit it via a third-party cloud storage account. Create documentation for your program and submit it along with the project inside the zip file. Your documentation can be either a pure ASCII text or a Microsoft Word file. The documentation does not Project 3 (Final Project, Part I) https://canvas.wpi.edu/courses/20567/assignments/136970[2020/6/23 2:38:33] Final Project, Part I Rubric (1) Criteria Ratings Pts have to be long. Briefly describe the structure of your program and what each file turned in contains. Also, please indicate whether your program uses .ply files, and please describe the rough location and direction of the spotlight in your scene. Name your zip file according to the convention LastnameFirstname_Final1.zip. Additional Notes: You are free to consult any resources you need to help you complete this assignment, including your classmates, the TA, the instructor, the class text, and any other books and websites. However, the code you turn in must be your own. Any evidence of plagiarism will result in an automatic 0 for this assignment. You are welcome to use any class coding examples (posted under "Modules") in your program. FAQ: Q. I'm trying to load the sphere.ply file, but the browser won't let me load the file unless a user selects it. What do I do? The sphere.ply file is optional. I encourage you to create spheres using subdivision surfaces as shown in one of the class examples. However, if you want to use the *.ply file, it's perfectly fine to keep the file upload box that you used in Project 2. Just be sure to indicate in your accompanying documentation that the user needs to upload the accompanying *.ply file to start the program. Also, please include the *.ply file. Q: The wrong faces on some of my meshes are being culled and/or my meshes are being lit incorrectly. It's possible that the face normals are being calculated incorrectly. If the shaders receive the vertex information in the wrong order, it's possible they may be calculating a face normal that's pointing in the wrong direction, making the culling or lighting routines think the polygon is back-facing instead of front- facing (and vice-versa for the back-facing polygons). Try reversing your vertex order for each polygon in your sphere, then see what happens. If that doesn't work, try changing the way you load the vertices and normals into the arrays from a,b,c to a,c,b. If it's a lighting issue, also make sure that the light position of your point light has a 1 in the fourth position (the w position). This makes it a point light. A light with w = 0 is an area light, which has different properties. Check out the section "Positioning Directional Lights" on this page for more details: https://tinyurl.com/yckyqmmg . Objects (3 pts each) - At least six objects are on the mobile, not including hangers. - Objects are either read in from a *.ply file or constructed in the 15.0 pts Full Marks 0.0 pts No Marks Project 3 (Final Project, Part I) https://canvas.wpi.edu/courses/20567/assignments/136970[2020/6/23 2:38:33] Total Points: 100.0 15.0 pts 20.0 pts 20.0 pts 20.0 pts 15.0 pts 10.0 pts 0.0 pts 0.0 pts program. - All objects are properly sized, similar in size, and are not disproportionate or awkward in display. - Each object is a distinct color. - Back-face culling and depth testing implemented. Hierarchical Modeling (4 pts each) - Program uses hierarchical modeling to maintain parent-child relationships. - Children automatically inherit the animations of their parents. - Stack with push() and pop() used to maintain these relationships. - At least 3 levels of hierarchy are present. - Objects remain connected throughout the course of the animation. 20.0 pts Full Marks 0.0 pts No Marks Animation (5 pts each) - Each object rotates counter-clockwise about its own y-axis. - Rotation is visible. - The arms rotate in the direction opposite the level above them. - Program is not considerably slowed down as a result of coding inefficiencies. 20.0 pts Full Marks 0.0 pts No Marks Lighting (10 pts) - Both Gouraud and flat shading are implemented. - Spotlight is implemented and is obvious. 20.0 pts Full Marks 0.0 pts No Marks Keyboard All keyboard commands implemented correctly. 15.0 pts Full Marks 0.0 pts No Marks Documentation and Organization (5 pts each) - Code is clean, well-commented, and easy to read - Documentation file describing structure of program and what it contains. File also indicates whether the program uses .ply files, and it describe the rough location and direction of the spotlight in the scene. 10.0 pts Full Marks 0.0 pts At least one of documentation file and code comments is missing Extra Credit 0.0 pts Full Marks 0.0 pts No Marks Late Submission 0.0 pts Full Marks 0.0 pts No Marks Project 3 (Final Project, Part I) https://canvas.wpi.edu/courses/20567/assignments/136970[2020/6/23 2:38:33]