-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
202 lines (183 loc) · 19.9 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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!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 7: Transformation and Hierarchy in Three.js</h1>
</header>
<div class="content main__content clearfix">
<p>This week, we’ll continue to do more THREE programming, with a focus on using THREE’s mechanisms for transformation and hierarchy to make more interesting things.</p><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 gain some experience doing hierarchical modeling, particularly for animation</li>
<li>To get some practice working with 3D rotations</li>
<li>To get some experience working with the CS559 framework code</li>
<li>To get more practice working with a modern scene graph API</li>
<li>To see some details of how different rotation representation are used</li>
<li>To get some exposure to modern JavaScript features like classes</li>
<li>To get some experience working with another person’s code</li>
</ol>
<h2 id="warnings-to-start">Warnings to Start…</h2>
<p>This workbook is a little “bigger” than some of the others: you need to make a number of objects. This will give you more practice at making things. Most students like making stuff - it’s one of the fun parts of doing graphics.</p>
<p>But there is also some substantial content: we will try to understand transformations in 3D, we will get more practice using the specific 3D API (THREE.js) and how it implements transformations and other things, and you’ll use the class software framework that will help make UIs for building things in THREE.js.</p>
<p>Also… in this workbook, you are required to fill out text files on some pages explaining what your assignment does. On page 6, 8 and 9 it isn’t enough to do the work: you must also edit the text file and tell us.</p>
<h2 id="recommended-reading">Recommended Reading</h2>
<p>Over the course of this assignment, you will probably need to read some of the <a href="https://threejs.org/docs" target="_blank">THREE.js Documentation (current)</a>. When you wonder what you can do with a class like <code>BufferGeometry</code>, or what a function like <code>DataTextureLoader.load</code> does, this is the place to look. Even though the documentation is for the “current” version of THREE, it still applies to the version we are using.</p>
<details class="myexpand" >
<summary class="myexpand-head">A Note on THREE versions</summary>
<div class="markdown-inner myexpand-content">
<div class="dimbox">
<p>In class, we use the same version of THREE to use for the whole semester, to avoid switching versions in the middle. That way the workbooks all use the same, consistent version.</p>
<p>When we chose for Spring 2023, we chose version r148. This is already not the most recent release (you can see what changed on the <a href="https://github.com/mrdoob/three.js/releases">THREE Releases Page</a>). The differences probably do not matter for class.</p>
<p>You can see information about the version of THREE we provide at <a href="https://github.com/CS559/CS559-Three">The CS559 THREE GitHub Repo</a>. Of particular note: we provide typing information for THREE, and we provide a subset of the overall library (since it gets cloned into a workbook for every student).</p>
</div>
</div>
</details>
<p>You will also start working with the class framework code. This will require you to spend some time reading the code and its documentation (which is derived from comments in the code). It may also cause you to need to read up on some aspects of JavaScript we haven’t used much in class yet. The framework code will be discussed on page 7.</p>
<p>The <strong>textbook readings</strong> are meant to complement the lectures. They talk about what is going on inside of THREE (so they may not important for doing the workbook, but they are helpful in understanding how things work - which you should want to know, and may need for the exams)</p>
<ul>
<li><a href="https://canvas.wisc.edu/files/30140527/download?download_frd=1">FCG Chapter 12</a> - Section 12.2 (other chapter 12 sections are things we will get to later in class)</li>
<li><a href="https://canvas.wisc.edu/files/30140550/download?download_frd=1">Hart, Chapter 7</a> is written in terms of explicit matrix stacks (which we did with Canvas2D), but gives examples on how to think about hierarchical modeling</li>
<li><a href="https://canvas.wisc.edu/files/30140468/download?download_frd=1">Hart, Chapter 8</a> can help you if you want to see viewing another way (this was also optional in the last workbook).</li>
<li><a href="https://canvas.wisc.edu/files/30140460/download?download_frd=1">The Real Time Rendering Book</a> has a very thorough discussion of transformations in sections 1-3, with significant attention paid to rotations and Quaternions (Section 4.3). This material is beyond what you need for class, but may be a good thing to read if you want a better understanding of 3D transformations.</li>
</ul>
<p><strong>From the previous workbook, but still relevant</strong>:</p>
<ul>
<li><a href="https://canvas.wisc.edu/files/30140519/download?download_frd=1">FCG Chapter 6</a> 6.2, 6.3, 6.4, and 6.5:</li>
<li><a href="https://canvas.wisc.edu/files/30140520/download?download_frd=1">FCG Chapter 7</a></li>
<li><a href="https://canvas.wisc.edu/files/30140487/download?download_frd=1">Hart, Chapter 6</a></li>
</ul>
<p>The readings are here to help you understand the things we discussed in class.</p>
<p><strong>Hierarchical modeling</strong> is discussed briefly in section 2 of <a href="https://canvas.wisc.edu/files/30140527/download?download_frd=1">FCG4_Ch12.pdf (0.9mb)</a> and <a href="https://canvas.wisc.edu/files/30140550/download?download_frd=1">Hart07-jan19.pdf (14.5mb)</a>. In both cases, the focus is more on how you implement the scene graph traversal using transformation stacks than how to think in terms of hierarchical models. In the workbooks, we’ll let THREE do this work for us. However, the stack model is discussed in lecture, and you should understand it.</p>
<p>The lookfrom/lookat/vup transformation is called the “The Camera Transformation” in section 1.3 of <a href="https://canvas.wisc.edu/files/30140520/download?download_frd=1">FCG4_Ch07.pdf (0.5mb)</a>. Other things in the chapter discuss the Perspective Transformation in depth (no pun intended), and can help you understand these concepts better. Hart discusses lookfrom/lookat in <a href="https://canvas.wisc.edu/files/30140468/download?download_frd=1">Hart08-jan19.pdf (1.7mb)</a>, but it adds little beyond what you’ve seen already. Look at it if you want to see it explained a different way. These topics will also be discussed in the lectures.</p>
<h2 id="exercises">Exercises</h2>
<p>The main exercises for this workbook are:</p>
<ul>
<li>Rotation Toys - We are giving you demos to play with. You should use them to help build your intuitions as to how 3D rotations work (or do not work) as the case may be.</li>
<li>The Quadcopter / Aircraft - you get to make a quadcopter again, this time in 3D. It’s a hierarchical model. And you’ll need to show that you can use a “lookat” transformation.</li>
<li>Graphics Park - before we get to Graphics Town, we’ll start smaller. This is a chance to animate some hierarchical objects in 3D and figure out the framework code.</li>
<li>Construction Equipment - another chance to use the framework code and make a different kind of hierarchical object.</li>
</ul>
<p>Over the next few weeks, we’ll be using the framework code to make increasingly interesting objects. The idea is that by the end of the semester, all of the objects you make can fit together into Graphics Town.</p>
<h2 id="rubric-for-grading">Rubric for Grading</h2>
<p>There are lots of opportunities for advanced points on this assignment, but we limit the total number you can earn for this workbook.</p>
<p>The objects that you make using the framework will be usable in the future: we will use the framework for all of the future assignments, including the final “Graphics Town” assignment. If you make nice objects now, you can use them again.</p>
<p>Hopefully, you are making really cool stuff because you like making cool stuff and are learning from doing it, not just because we are giving you a few points.</p>
<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">Page 2</div>
<div class="page-rubric-grid-points rubric-box-regular">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">experimenting with the demos on page 2. (We’ll just trust that you’ve done it if you turn any other part in.)</div><div class="page-rubric-grid-box rubric-box-regular">Page 3</div>
<div class="page-rubric-grid-points rubric-box-regular">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">experimenting with the demos on page 3. (We’ll just trust that you’ve done it if you turn any other part in.)</div><div class="page-rubric-grid-box rubric-box-regular">Box 07-06-01</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Some aircraft that isn’t a donut</div><div class="page-rubric-grid-box rubric-box-regular">Box 07-06-01</div>
<div class="page-rubric-grid-points rubric-box-regular">3 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">A propeller that spins (not the body)</div><div class="page-rubric-grid-box rubric-box-regular">Box 07-06-01</div>
<div class="page-rubric-grid-points rubric-box-regular">3 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">More than one propeller spinning (per aircraft)</div><div class="page-rubric-grid-box rubric-box-regular">Box 07-06-01</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">(at least) One aircraft that flies in a circle (or curved path)</div><div class="page-rubric-grid-box rubric-box-regular">Box 07-06-01</div>
<div class="page-rubric-grid-points rubric-box-regular">3 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">aircraft points forward as it moves</div><div class="page-rubric-grid-box rubric-box-regular">Box 07-06-01</div>
<div class="page-rubric-grid-points rubric-box-regular">3 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">multiple aircraft both moving, both with propellers</div><div class="page-rubric-grid-box rubric-box-regular">Box 07-06-01</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Radar dish (or some pointable object)</div><div class="page-rubric-grid-box rubric-box-regular">Box 07-06-01</div>
<div class="page-rubric-grid-points rubric-box-regular">3 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Radar correctly points at aircraft (tracks as aircraft moves) - should use lookat</div><div class="page-rubric-grid-box rubric-box-regular">Box 07-08-01</div>
<div class="page-rubric-grid-points rubric-box-regular">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">take out bouncing cube</div><div class="page-rubric-grid-box rubric-box-regular">Box 07-08-01</div>
<div class="page-rubric-grid-points rubric-box-regular">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">place at least 1 more swing</div><div class="page-rubric-grid-box rubric-box-regular">Box 07-08-01</div>
<div class="page-rubric-grid-points rubric-box-regular">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">place carousel</div><div class="page-rubric-grid-box rubric-box-regular">Box 07-08-01</div>
<div class="page-rubric-grid-points rubric-box-regular">3 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">carousel has poles and ''horses''</div><div class="page-rubric-grid-box rubric-box-regular">Box 07-08-01</div>
<div class="page-rubric-grid-points rubric-box-regular">4 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">carousel has correct motion (spins, horses go up and down)</div><div class="page-rubric-grid-box rubric-box-regular">Box 07-08-01</div>
<div class="page-rubric-grid-points rubric-box-regular">4 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">another moving object</div><div class="page-rubric-grid-box rubric-box-regular">Box 07-09-01</div>
<div class="page-rubric-grid-points rubric-box-regular">4 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">equipment 1 is identifiable (can tell what it is)</div><div class="page-rubric-grid-box rubric-box-regular">Box 07-09-01</div>
<div class="page-rubric-grid-points rubric-box-regular">4 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">equipment 2 is identifiable</div><div class="page-rubric-grid-box rubric-box-regular">Box 07-09-01</div>
<div class="page-rubric-grid-points rubric-box-regular">4 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">equipment 1 has correct articulation</div><div class="page-rubric-grid-box rubric-box-regular">Box 07-09-01</div>
<div class="page-rubric-grid-points rubric-box-regular">4 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">equipment 2 has correct articulation</div><div class="page-rubric-grid-box rubric-box-regular">Box 07-09-01</div>
<div class="page-rubric-grid-points rubric-box-regular">3 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">UI works for 1&2</div><div class="page-rubric-grid-box rubric-box-regular">Box 07-09-01</div>
<div class="page-rubric-grid-points rubric-box-regular">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">good use of colors/materials for all equipment (not just one color)</div>
<div class="page-rubric-grid-header rubric-box-bonus">Advanced points (19 possible, of which you can earn a maximum of 10):</div><div class="page-rubric-grid-box rubric-box-bonus">Box 07-06-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">cool aircraft</div><div class="page-rubric-grid-box rubric-box-bonus">Box 07-06-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">more complex motion</div><div class="page-rubric-grid-box rubric-box-bonus">Box 07-06-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">multiple types of aircraft - each with an articulation/propeller</div><div class="page-rubric-grid-box rubric-box-bonus">Box 07-06-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">other cool features (students came up with some great things in 2D!)</div><div class="page-rubric-grid-box rubric-box-bonus">Box 07-08-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">fancier looking carousel</div><div class="page-rubric-grid-box rubric-box-bonus">Box 07-08-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">3 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">more theme park rides (1st of up to 3 with hierarchical motion - 2 pts)</div><div class="page-rubric-grid-box rubric-box-bonus">Box 07-08-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">more theme park rides (2nd of up to 2 with hierarchical motion - 2 pts)</div><div class="page-rubric-grid-box rubric-box-bonus">Box 07-09-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">3 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">third machine identifyable with working articulation</div><div class="page-rubric-grid-box rubric-box-bonus">Box 07-09-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">nice shapes</div><div class="page-rubric-grid-box rubric-box-bonus">Box 07-09-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 the minimum degrees of freedom on the objects</div><div class="page-rubric-grid-box rubric-box-bonus">Box 07-09-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">at least one object has 4+ d.o.f. (beyond position/orientation)</div></div>
</details>
</div>
<h3 class="get__started">Get started on
<a href="./docs/1/">Page 1 (Rotations in 3D)</a>!</h3>
</div>
</main>
</div>
<div class="sidebar">
<h2 class="Side_Title">Workbook 7: Transformation and Hierarchy in Three.js</h2>
<p class="Side__Note">Pages:</p>
<ul class="Side__List">
<li class="Side__Item Side__Selected">Index (Transformation and Hierarchy in THREE.JS) </li>
<li class="Side__Item Side__Unselected"> <a href="./docs/1/">1: Rotations in 3D </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/2/">2: Euler Angles Toys </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/3/">3: Axis Angle Representations </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/4/">4: Quaternions </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/5/">5: Hierarchical Modeling in THREE </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/6/">6: Exercise 1: Quadcopter / Multi-Rotor </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/7/">7: The CS559 Framework Code (GraphicsTown) </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/8/">8: Exercise 2: Graphics Park </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/9/">9: Exercise 3: Construction Site </a></li>
</ul>
</div>
</div>
</body>
</html>