Home Kits went out!
{FIRSTNAME} {LASTNAME}
{STREET} {UNIT}
{TOWN}, {STATE} {ZIP}
Assignment 5
Due 10/19/2020
Transformations
Translate
Rotate
Scale
Matrix
r r r t_x
r r r t_y
r r r t_z
0 0 0 1
x, y, z
x, y, z
new
var m = new Float32Array( [
r, r, r, 0,
r, r, r, 0,
r, r, r, 0,
t_x, t_y, t_z, 1
]);column-major ordering!
cos(T) -sin(T) 0 0
sin(T) cos(T) 0 0
0 0 1 0
0 0 0 1
2, 2, 2
?
with T = Pi/2
= 90°
X
Y
Z
cos(T) -sin(T) 0 0
sin(T) cos(T) 0 0
0 0 1 0
0 0 0 1
2, 2, 2
with T = Pi/2
= 90°
-2, 2, 2
cos(T) -sin(T) 0 0
sin(T) cos(T) 0 0
0 0 1 0
0 0 0 1
2, 2, 2
with T = Pi/2
0
0
1
2 Pi
Pi
Pi/2
1.5 Pi
90°
1
1
-2
2
2
-1
Scene
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
Scene Graph is a Tree-like Hierarchy!
*
*
*
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<style>
html, body {
background-color: #000;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden !important;
}
#r1 {
width: 50%;
height: 100%;
float: left;
}
#r2 {
width: 50%;
height: 100%;
float: left;
}
</style>
<script type="text/javascript" src="https://get.goXTK.com/xtk_edge.js"></script>
<script type="text/javascript" src="http://get.goXTK.com/xtk_xdat.gui.js"></script>
<script type="text/javascript">
var r, c;
window.onload = function() {
r = new X.renderer3D();
r.container = 'r1'; // only use the r1 div container for XTK
r.init();
c = new X.cube();
r.add(c);
r.render();
// create the User Interface
// HELPER OBJECT
controller = {
'rotateX': function() {
c.transform.rotateX(45);
},
'rotateY': function() {
c.transform.rotateY(45);
},
'rotateZ': function() {
c.transform.rotateZ(45);
}
}
var gui = new dat.GUI();
var cubeGui = gui.addFolder('Cube');
cubeGui.add(c, 'visible');
cubeGui.add(c, 'opacity', 0, 1);
cubeGui.addColor(c, 'color');
cubeGui.add(c, 'lengthX', 0, 100).onChange(
function() {
c.modified(); // modify event of XTK's cube since
// we modify the vertices
}
);
cubeGui.add(controller, 'rotateX');
cubeGui.add(controller, 'rotateY');
cubeGui.add(controller, 'rotateZ');
cubeGui.open();
};
</script>
</head>
<body>
<div id='r1'></div>
<div id='r2'></div>
</body>
</html>
Frame of Reference
X
Y
Z
World Frame
Frame of Reference
X
Y
Z
Object Frame
Frame of Reference
X
Y
Z
Object Frame
Frame of Reference
X
Y
Z
Eye Frame
Camera
(Eye)
cos(T) -sin(T) 0 0
sin(T) cos(T) 0 0
0 0 1 0
0 0 0 1
rotation around Z
Matrix
cos(T) -sin(T) 0 0
sin(T) cos(T) 0 0
0 0 1 0
0 0 0 1
rotation around Z
cos(T/2)
sin(T/2) * 0
sin(T/2) * 0
sin(T/2) * 1
Matrix
Quaternion
w
x
y
z
cos(T) -sin(T) 0 0
sin(T) cos(T) 0 0
0 0 1 0
0 0 0 1
rotation around Z
cos(T/2)
sin(T/2) * 0
sin(T/2) * 0
sin(T/2) * 1
Matrix
Quaternion
var m = new Float32Array( [
Math.cos(T), -Math.sin(T), 0, 0,
Math.sin(T), Math.cos(T), 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
]);
var q = new Float32Array( [
Math.cos(T/2),
Math.sin(T/2)*0,
Math.sin(T/2)*0,
Math.sin(T/2)*1
]);
var q = new Float32Array( [
Math.sin(T/2)*0,
Math.sin(T/2)*0,
Math.sin(T/2)*1,
Math.cos(T/2)
]);
w
x
y
z
1 0 0 0
0 cos(T) -sin(T) 0
0 sin(T) cos(T) 0
0 0 0 1
rotation around X
cos(T/2)
sin(T/2) * 1
sin(T/2) * 0
sin(T/2) * 0
Matrix
Quaternion
cos(T) 0 sin(T) 0
0 1 0 0
-sin(T) 0 cos(T) 0
0 0 0 1
rotation around Y
cos(T/2)
sin(T/2) * 0
sin(T/2) * 1
sin(T/2) * 0
Matrix
Quaternion
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
Identity
1
0
0
0
Matrix
Quaternion
w
x
y
z
-1
0
0
0
Quaternion
var q = new THREE.Quaternion( x, y, z, w );