Assignment 4: Drawing 3D Models
In this assignment you will create an app that can load, render, and manipulate 3D scenes. A scene consists of 3d models and a scenegraph in which those objects are arranged.
Watch this video to get a sense for what the final app looks like:
https://www.youtube.com/watch?v=_4gByP_RBfQ (https://www.youtube.com/watch?v=_4gByP_RBfQ)
Copyright By PowCoder代写 加微信 powcoder
(https://www.youtube.com/watch?v=_4gByP_RBfQ)
In the first part of the assignment, you’ll learn how to load and parse 3D models stored in OBJ format. You will use the loaded data to construct 3D objects and render them to the screen using your experience in matrices from the previous assignment.
You will see how to load and construct a scene graph from a specification file. We provide scene files – which we represent in JSON format – with the template and most of the necessary code to load the files and construct the graph is also already implemented. Your job here is to figure out the right way to combine model transformations throughout the hierarchy to create the correct compound model matrix for each scene node. For anything related to matrices and vectors, we use a library called glMatrix ( https://glmatrix.net (https://glmatrix.net) ) to save you the pain of implementing even more matrix functionality. It works almost analogous to how we implemented Mat4 in the previous assignment with slight variations in syntax. Please check out their documentation or message us for details.
The second part of this assignment will teach you how to apply your knowledge about matrices to create camera interactions that allow you to use your mouse to rotate, pan, and zoom around the scene. For this, you’ll learn about the arcball camera interaction and implement it using glMatrix. In addition to that, you will implement interactions, that allow you to change the local transformation of scene nodes in the hierarchy.
This assignment requires you to understand the OBJ file format and how to extract vertex/index information from such files. It also requires you to understand the mechanics of matrices and transformations to implement the camera movement, and local transformations, and the basics of how VBOs, IBOs, VAOs, etc work.
Refer to Chapter 2 in the textbook for rendering, Chapter 4 for a section on camera modes, http://paulbourke.net/dataformats/obj/ (http://paulbourke.net/dataformats/obj/) for the OBJ file format, and https://asliceofrendering.com/camera/2019/11/30/ArcballCamera/ (https://asliceofrendering.com/camera/2019/11/30/ArcballCamera/) for the arcball/orbit camera movement. Refer to the lecture slides and web sources like (https://webglfundamentals.org/webgl/lessons/webgl- scene-graph.html (https://webglfundamentals.org/webgl/lessons/webgl-scene-graph.html) ) for information on the scene graph and node-local transformations.
Requirements
When complete, your assignment should fulfill the following requirements:
Load scene specifications using the UI. Scenes are located in “./scenes” Successfully load an OBJ file and extract vertex and index information Calculate the correct compound model (M) matrix in the scene graph Apply correct M V and P transformations to render the object
Support two draw modes: POINTS and TRIANGLES Support arcball camera interaction using the mouse
Pan and Rotate should be relative to the current camera view (see video)
Zooming should move the view towards the view’s center (see video) Support local transformations of scene nodes using the mouse
Translations and Rotations should be relative to the current camera view (see video) Scaling should be local to the object (see video)
The template contains three files assignment4.objloader.js, assignment4.scene.js, assignment4.webglapp.js which contain empty classes and/or methods that need to be implemented by you. There are several comments to give you hints on what each part of the code needs to do.
We have split the assignment into three parts – each in their own file to avoid a single, cluttered file. assignment4.objloader.js – Contains a class that loads OBJ files. This should be implemented first.
assignment4.scene.js – Contains classes to load and represent a scene graph. This is mostly implemented for you, but misses functionality to create the compound model matrix in the scene hierarchy. Uses assignment4.objloader.js to load 3d models.
assignment4.webglapp.js – Our WebGlApp that we know from previous assignments. You will implement the mouse interactions here. Uses assignment4.scene.js to load whole scenes of objects.
Grading Criteria 2 pts Vertex parsing
3 pts Face/index parsing
2 pts Quad triangulation
1 pts Compound model matrix calculation 1 pts Different draw modes
3 pts Interaction with scene nodes
3 pts Arcball camera interaction
Getting and Loading OBJ and Scene Files
The template comes with a folder “./models” containing a number of popular 3D models used throughout industry and research by institutions like NVIDIA, Intel, Stanford, CMU, Meta and more. We’ll be using these models throughout the rest of the course and might add to the repository.
However, you are free to download OBJs from the web to benchmark your solution. Try sites like
https://www.turbosquid.com (https://www.turbosquid.com)
https://www.cgtrader.com (https://www.cgtrader.com)
https://sketchfab.com/3d-models (https://sketchfab.com/3d-models)
to find free models online. Please don’t include any models >50mb in your submission.
We represent a scene in the JSON format. Template scenes are stored in “./scenes”. There are scenes with just a single object and others with a hierarchy of multiple objects. We’ll be using and extending this format throughout the rest of the course. For now, we have two sections. 1) Model definitions, which define the 3d models (OBJs) that should be loaded for the scene and 2) a scene graph that places these models in the scene. The graph is made up of nodes that are either fully virtual or contain a model. Each node has at least a name, type and transformation, but can have more information if it contains geometry. Virtual nodes are of type “node”, model nodes are of type “model”.
Feel free to experiment and create your own scenes. We’d be happy to find some creative scenes in your submissions!
How to Get Started
Click on this link (https://classroom.github.com/a/Y9EarI3Z (https://classroom.github.com/a/Y9EarI3Z) ) to join the assignment on Github Classroom and get access to your personal repository.
After you join, you might be prompted with a message like this:
You can disregard that message and head directly to your repository (blurred-out section in the image).
You will use this repository to manage your submission. Please commit and push regularly to save your work.
We provide a code template that contains basic files to get you started. The provided template is an HTML5/JS webpage that you can display by hosting the index.html file locally and viewing the local URL in your browser of choice. We strongly recommend developing in Google Chrome as it will be the platform used for grading. We’ll show you how to simply host a page locally in one of the lectures.
How to Submit Your Work
Submit this homework by submitting the URL to your Github repository along with your Github username here on Canvas.
Structure your Canvas submission like this:
Github User: [your Github username here]
Repository: [your repository URL here]
Your work has to be submitted to Canvas and pushed to Github before the due date. We will consider the latest commit for grading, so consider if your improvements are worth a late penalty.
We do not grade a program that does not run. Late submissions will lose 10% per day.
You are encouraged to help one another, but you must write your own code. If you use somebody else’s code, document it. You must abide by the UC Davis Code of Academic Conduct.
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com