11/16/22, 7:54 PM Assignment 6: Textures
https://canvas.ucdavis.edu/courses/719519/assignments/954617 1/5
Copyright By PowCoder代写 加微信 powcoder
Assignment 6: Textures
Due Nov 28 by 11:59pm Points 15 Submitting a text entry box
Available Nov 11 at 12am – Dec 2 at 11:59pm
Start Assignment
In this assignment you will extend the app from the previous assignment by adding materials and
textures. You will again work in both JavaScript and GLSL. The app will feature image textures to add
more visual fidelity to our models. In addition to that you will use roughness maps to modulate shininess
on a per-fragment level. Finally, you will implement normal mapping to add (fake) depth to the otherwise
flat surfaces of the model. Data for materials and textures will be provided by OBJs in conjunctions with
MTLs. The MTL format provides material and texture information which can be pointed to from OBJ.
Refer to the readings below.
Watch this video to get a sense for what the final app looks like:
https://www.youtube.com/watch?v=weT0q2WHHik (https://www.youtube.com/watch?
v=weT0q2WHHik)
(https://www.youtube.com/watch?v=weT0q2WHHik)
There are roughly five tasks in this assignment:
CPU Code (JS)
You will again combine your vertex data into a single buffer and write the VAO setup for your
ShadedOjbect3D to accommodate a mixed vertex buffer containing positions, normals, texture
coordinates, and vertex tangents. Aside from that you will implement code to pass material properties
to your shader code. The MTL file parser is part of the template, so you don’t need to implement any
parsing code.
You will implement a Texture class, which contains all the GL code needed to load and store image
data as textures. The class will be used in Materials to represent different textures.
GPU Code (GLSL)
11/16/22, 7:54 PM Assignment 6: Textures
https://canvas.ucdavis.edu/courses/719519/assignments/954617 2/5
You will implement a shader pipelines, each consisting of vertex and fragment stage. The shader will be
based on the Phong shader from A5 and you will extend it.
You will implement surface texturing using color image textures.
You will implement roughness mapping using grayscale image textures.
You will implement normal mapping using normal maps.
Refer to Chapter 7 and 10 in the textbook for information on implementing textures and normal
mapping. Additional resources are here:
Materials and Textures
https://learnopengl.com/Lighting/Materials (https://learnopengl.com/Lighting/Materials)
https://learnopengl.com/Getting-started/Textures (https://learnopengl.com/Getting-started/Textures)
https://learnopengl.com/Advanced-Lighting/Normal-Mapping (https://learnopengl.com/Advanced-
Lighting/Normal-Mapping)
http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-13-normal-mapping/
(http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-13-normal-mapping/)
File specifications
http://paulbourke.net/dataformats/obj/ (http://paulbourke.net/dataformats/obj/)
http://paulbourke.net/dataformats/mtl/ (http://paulbourke.net/dataformats/mtl/)
Requirements
When complete, your assignment should fulfill the following requirements:
Load OBJs with normal data and texture coordinates
Correctly set up vertex attributes to access a mixed buffer containing positions, normals, texture
coordinates, and tangents
Have a Texture class to load image data and set up GL textures
Provide correct color, roughness and normal mapping
The template contains six files assignment6.textured.(frag|vert).js, assignment6.mtlloader.js,
assignment5.object3d.js, assignment5.objloader.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.
To help you debug normals and normal mapping we added a toggle to visualize normals on your model.
Hold “N” to see the scene’s normals. Since we interpret normals as colors [x, y, z] -> [r, g, b], green will
https://learnopengl.com/Lighting/Materials
https://learnopengl.com/Getting-started/Textures
https://learnopengl.com/Advanced-Lighting/Normal-Mapping
http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-13-normal-mapping/
http://paulbourke.net/dataformats/obj/
http://paulbourke.net/dataformats/mtl/
11/16/22, 7:54 PM Assignment 6: Textures
https://canvas.ucdavis.edu/courses/719519/assignments/954617 3/5
be ‘up’, red will be ‘right’, and blue will be ‘forward’. All normals are shown in world space unless you
change something in the shader (which you can).
Grading Criteria
1 pts Setting up the VAO for mixed buffer access
1 pts Passing uniforms and texture information to shader
3 pts Texture class implementation
2 pts Color image texturing
3 pts Roughness mapping
3 pts Setting up normals, tangents and bitangents for normal mapping
2 pts Correct normal mapping
Texturing A Scene
The main addition, file-type wise, are MTL files and jpg/png images. MTL files are a way to define
material and texture properties for OBJs.
When you look at the file spec you’ll see that there are hundreds of options to define materials in MTL.
We will be limiting ourselves to just a few to realize our shading:
“newmtl” – Defines a new material entry (MTLs can store multiple materials)
“Ka” – The ambient component of the material
“Kd” – The diffuse component of the material
“Ks” – The specular component of the material
“Ns” – The shininess factor for the specular component
“map_Kd” – Image textures for the model
“map_Ns” – Roughness maps
“map_bump” / “bump” / “norm” – Normal maps
In OBJs we use two main entries to set materials for objects:
“mtllib” – Points to the MTL file that contains the above material definitions
“usemtl” – Placed before “f” entries to assign a specific material for a number of face
Note: The spec defines that different regions of an OBJ can have different materials. We limit
ourselves to just one and use the last instance of “usemtl” to define the object material. All models in
the template are set up this way.
Feel free to experiment and create your own scenes with custom textures. We’d be happy to find some
creative scenes in your submissions!
11/16/22, 7:54 PM Assignment 6: Textures
https://canvas.ucdavis.edu/courses/719519/assignments/954617 4/5
How to Get Started
Click on this link (https://classroom.github.com/a/UaPzGAUT
(https://classroom.github.com/a/UaPzGAUT) ) 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
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.
https://classroom.github.com/a/UaPzGAUT
11/16/22, 7:54 PM Assignment 6: Textures
https://canvas.ucdavis.edu/courses/719519/assignments/954617 5/5
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