-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
179 lines (165 loc) · 18 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html>
<!-- CS559 Workbook Pages - page content © 2021, Michael Gleicher -->
<!-- This page is part of a Workbook developed for the
CS559 Computer Graphics Class at the University of Wisconsin
https://graphics.cs.wisc.edu/Courses/559-sp2021/ -->
<head>
<meta name="generator" content="Hugo 0.110.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/workbook.css">
<script src="./js/resizeIFrames.js"></script>
</head>
<body>
<div class="container container--outer"><div class="maincolumn">
<main class="main list" role="main">
<header class="main__header">
<h1 class="main__title">Workbook 8: Meshes and Textures</h1>
</header>
<div class="content main__content clearfix">
<div class="dimbox">
<h2>CS559 Spring 2023 Sample Solution</h2>
<p>This is a sample solution for the Workbook.
You are welcome to refer to it to learn one way to do the assignment
but only after you have turned in your own assignment
</p>
</div>
<h2>Learning Goals</h2>
<ol>
<li>To get some practice with mesh data structures, and see how they are used in a practical API.</li>
<li>To understand vertex-oriented representations, their motivations, and their use.</li>
<li>To see the effects of vertex and face properties including colors and normals.</li>
<li>To practice the basic concepts of textures, especially texture coordinates.</li>
<li>To see how texturing is implemented in a practical API.</li>
<li>To gain some experience using shape and texture to create interesting 3D models.</li>
</ol>
<p>This week, we’ll move on to making the objects that we see in 3D worlds. We’ll learn about how we group triangles into <em>meshes</em> and use <em>texturing</em> to give them more interesting colors.</p>
<h2 id="required-and-recommended-readings">Required and Recommended Readings</h2>
<p>The required material will be discussed in the lectures. You will want to consult the THREE.JS documentation for details on how to use the API, and you may want to consult a JavaScript text to learn about JavaScript features that are important for the class software framework.</p>
<p>Note: the version of THREE we are using for this workbook (v148) is not the default on the THREE website. However, the documentation at <a href="https://threejs.org/docs" target="_blank">THREE.js Documentation (current)</a> should be close enough.</p>
<p>We <strong>strongly recommend</strong> reading the textbook chapters. The basic concepts will be covered in the lectures/videos, but it is also helpful to see more details. (these chapters are short):</p>
<ul>
<li><a href="https://canvas.wisc.edu/files/30140526/download?download_frd=1">FCG4_Ch10.pdf (0.8mb)</a> (10-10.2, 10.3 is optional)</li>
<li><a href="https://canvas.wisc.edu/files/30140506/download?download_frd=1">FCG4_Ch11.pdf (6.1mb)</a> (11-11.3, 11.4 will be in the next workbook)</li>
</ul>
<p><strong>From the previous workbook, but still relevant</strong></p>
<ul>
<li><a href="https://canvas.wisc.edu/files/30140527/download?download_frd=1">FCG4_Ch12.pdf (0.9mb)</a> (12, 12.1 (not 12.1.4), 12.2)</li>
</ul>
<h3 id="lighting">Lighting</h3>
<p>In the workbooks, we let THREE take care of lighting for us. In lectures, and the textbook, we discuss how basic lighting works. You will need to understand it for the quiz. You should read <a href="https://canvas.wisc.edu/files/30140526/download?download_frd=1">FCG4_Ch10.pdf (0.8mb)</a> - Section 10.3 is optional, but interesting.</p>
<h3 id="basics-of-three">Basics of THREE</h3>
<p>By now, you probably have the basics of THREE down. But the <a href="https://discoverthreejs.com/book/first-steps/transformations/" target="_blank">"discover threejs tutorial"</a> is a good way to review primitives, hierarchies and other basics. Unfortunately, its one of a very few chapters of the book that has been written.</p>
<h3 id="meshes">Meshes</h3>
<p>We’ll discuss the basic concepts in class, which will be sufficient for what you need to know. Section 12.1 of Fundamentals of Computer Graphics (<a href="https://canvas.wisc.edu/files/30140527/download?download_frd=1">FCG4_Ch12.pdf (0.9mb)</a>) covers this, and then some. Sections 12, 12.1 and 12.2 cover the material for class. Section 12.1.3 covers strips and fans (which we will touch on in class, but won’t use much). Section 12.1.4 discusses the fancy data structures used for representing meshes when they need to be manipulated - this is beyond what we will do in class - read this section to get a taste of a more advanced topic. Chapter 4 of The Big Fun Graphics Book (<a href="https://canvas.wisc.edu/files/30140537/download?download_frd=1">Hart04-jan19.pdf (2.4mb)</a>) covers much of the same material.</p>
<p>In the old days, THREE had a very convenient class for meshes called <code>Geometry.</code> Unfortunately, it was deprecated for the more modern <code>BufferGeometry</code> class. <code>BufferGeometry</code> has better performance because it matches how the graphics hardware works (we’ll learn about the hardware in Workbook 10), however it is less convenient. Unfortunately, with modern versions of THREE we have no choice.</p>
<h3 id="texturing">Texturing</h3>
<p>Texturing is a big topic. We’ll cover the basic concepts now, and return to see a lot more of the details later. Again, everything you need will be discussed in class, read a book chapter to get more details or see it explained another way. <a href="https://canvas.wisc.edu/files/30140506/download?download_frd=1">FCG4_Ch11.pdf (6.1mb)</a> covers texturing, describing it in a very general way. Section 11.1 gives the main ideas, and 11.2 gives many different types of texture - we’ll focus on what’s described in 11.2.2. Sections 11.2.4 (perspective correct interpolation) is an interesting detail (but the hardware takes care of it for you). 11.3 (pixel lookups) is an important topic. Section 11.4 is stuff we’ll see next week (advanced texturing) and 11.5 is interesting but optional.</p>
<p>The implementation of texturing we’ll use is built into the various <code>Materials</code> in THREE. The description of how a texture is stored is discussed with the <a href="https://threejs.org/docs/#api/en/textures/Texture" target="_blank"><code>Texture</code></a> class. We’ll discuss the main ideas in class, and the examples in this workbook will help you out. There are many examples of using textures with THREE around the web, however, many of them use old versions of THREE. The new versions are much more convenient (especially the <code>TextureLoader</code>). If you’re looking for things to read, <a href="https://discoverthreejs.com/book/first-steps/textures-intro/" target="_blank">this Discover ThreeJS tutorial</a> shows some of the basics, but goes off into tangents about details we probably won’t care about (like color spaces and anisotropic filtering).</p>
<h2 id="a-reminder-on-handing-things-in">A Reminder on Handing Things In…</h2>
<p>Part of this assignment is adding images for textures. Do not forget to add this to your repository (for example, using <code>git add</code> if you are using the command line), and committing and pushing the new files to the repository.</p>
<p>And don’t forget to do the handin quiz when you have completed the assignment!</p>
<h2 id="rubric-for-grading">Rubric for Grading</h2>
<div class="page-rubric-container">
<details class="page__rubric">
<summary>Workbook Rubric (97 points total)</summary>
<br/>
<div class="page-rubric-grid">
<div class="page-rubric-grid-header rubric-box-regular">Points (87):</div><div class="page-rubric-grid-box rubric-box-regular"></div>
<div class="page-rubric-grid-points rubric-box-regular">30 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">correct hand-in</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-01-03</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">triangles correctly oriented (no holes in grid)</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-02-01</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Object 1 has (at least) 3 triangles</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-02-01</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Object 1 has colored triangles (with different colors)</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-02-01</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Object 2 has (at least) 3 triangles</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-02-01</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Object 2 has vertex colors where we can see blending</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-02-01</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Object 3 has (at least) 3 triangles</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-02-01</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Object 3 has normals that make things look smooth</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-02-01</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Code Check: objects build “manually”</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-05-01</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">There are 2 dice</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-05-01</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Dice have numbers on their sides</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-05-01</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Dice have correct numbers on their sides</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-05-01</div>
<div class="page-rubric-grid-points rubric-box-regular">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">The two dice show different numbers on top</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-05-02</div>
<div class="page-rubric-grid-points rubric-box-regular">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">At least one domino</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-05-02</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">The domino is a double 6 (correct texture)</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-06-01</div>
<div class="page-rubric-grid-points rubric-box-regular">4 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Building Type 1</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-06-01</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Building 1 has texture</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-06-01</div>
<div class="page-rubric-grid-points rubric-box-regular">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Building 1 described in txt</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-06-01</div>
<div class="page-rubric-grid-points rubric-box-regular">3 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Building Type 2</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-06-01</div>
<div class="page-rubric-grid-points rubric-box-regular">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Building 2 described in txt</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-06-01</div>
<div class="page-rubric-grid-points rubric-box-regular">3 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Building 2 has texture</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-06-01</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Has different roof type than 1</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-06-01</div>
<div class="page-rubric-grid-points rubric-box-regular">4 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Tree or plant</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-07-01</div>
<div class="page-rubric-grid-points rubric-box-regular">6 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Car or Vehicle (looks like a car or other vehicle)</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-07-01</div>
<div class="page-rubric-grid-points rubric-box-regular">4 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Has texture (or at least coloring)</div><div class="page-rubric-grid-box rubric-box-regular">Box 08-07-01</div>
<div class="page-rubric-grid-points rubric-box-regular">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Vehicle described in txt</div>
<div class="page-rubric-grid-header rubric-box-bonus">Advanced points (14 possible, of which you can earn a maximum of 10):</div><div class="page-rubric-grid-box rubric-box-bonus">Box 08-05-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">Rounded edges (Dice)</div><div class="page-rubric-grid-box rubric-box-bonus">Box 08-05-02</div>
<div class="page-rubric-grid-points rubric-box-bonus">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">Rounded edges (Domino)</div><div class="page-rubric-grid-box rubric-box-bonus">Box 08-05-02</div>
<div class="page-rubric-grid-points rubric-box-bonus">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">More dominos (with different numbers)</div><div class="page-rubric-grid-box rubric-box-bonus">Box 08-05-02</div>
<div class="page-rubric-grid-points rubric-box-bonus">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">Legal domino arrangement (at least 4 dominos)</div><div class="page-rubric-grid-box rubric-box-bonus">Box 08-06-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">fancy/complex texture and/or shape (building 1) - grader discretion</div><div class="page-rubric-grid-box rubric-box-bonus">Box 08-06-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">fancy/complex texture and/or shape (building 2) - grader discretion</div><div class="page-rubric-grid-box rubric-box-bonus">Box 08-06-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">Building Type 3 - substantially different and described in text</div><div class="page-rubric-grid-box rubric-box-bonus">Box 08-06-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">Building Type 3 - different roof type than others</div><div class="page-rubric-grid-box rubric-box-bonus">Box 08-07-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">fancy vehicle - grader's discretion</div><div class="page-rubric-grid-box rubric-box-bonus">Box 08-07-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">more than 1 vehicle type</div></div>
</details>
</div>
<h3 class="get__started">Get started on
<a href="./docs/1/">Page 1 (Meshes: What you need to know)</a>!</h3>
</div>
</main>
</div>
<div class="sidebar">
<h2 class="Side_Title">Workbook 8: Meshes and Textures</h2>
<p class="Side__Note">Pages:</p>
<ul class="Side__List">
<li class="Side__Item Side__Selected">Index (Meshes and Textures) </li>
<li class="Side__Item Side__Unselected"> <a href="./docs/1/">1: Meshes: What you need to know </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/2/">2: Mesh Exercise </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/3/">3: Texture Basics </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/4/">4: Textures in THREE </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/5/">5: Dice and Dominos (Exercise 2 and 3) </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/6/">6: Graphics Town Buildings (Exercise 4) </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/7/">7: A Car for Graphics Town (ex 5) </a></li>
</ul>
</div>
</div>
</body>
</html>