Assignment 4

Assignment 5

Due Monday!

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

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

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

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

-1

-2, 2, 2

cos(T/2)

sin(T/2) * 0

sin(T/2) * 0

sin(T/2) * 1

Quaternion

w

x

y

z

~0.7

~0.7

0

0

Pi/2 / 2

~0.7

0

0

~0.7

0

2

2

2

w

x

y

z

*

Quaternion

?

~0.7

0

0

~0.7

0

2

2

2

*

~0.7

- 0

- 0

- ~0.7

Inverse

page 64, Gortler: 3D Computer Graphics

~0.7

0

0

~0.7

0

2

2

2

w

x

y

z

*

Quaternion

~0.7

0

0

~0.7

0

2

2

2

*

~0.7

- 0

- 0

- ~0.7

Inverse

page 64, Gortler: 3D Computer Graphics

0

- 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

-1

-2, 2, 2

cos(T/2)

sin(T/2) * 0

sin(T/2) * 0

sin(T/2) * 1

Quaternion

w

x

y

z

~0.7

~0.7

0

0

Rigid Body Transformation

Quaternion

Translation Vector

w

x

y

z

x

y

z

0

``var q = new THREE.Quaternion( x, y, z, w );``

SLERP!

spherical linear interpolation

``````<html>
<meta charset="UTF-8" />
<style>
html, body {
background-color:#000;
margin: 0;
height: 100%;
overflow: hidden !important;
}
</style>
<script src="https://threejs.org/build/three.min.js" type="text/javascript"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js" type="text/javascript"></script>
<script>

var mesh = null;

scene = new THREE.Scene();

fov = 75;
ratio = window.innerWidth / window.innerHeight;
zNear = 1;
zFar = 10000;
// console.log(ratio);
camera = new THREE.PerspectiveCamera(fov, ratio, zNear, zFar);
camera.position.set( 0, 0, 100);

renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

ambientLight = new THREE.AmbientLight();

light = new THREE.DirectionalLight( 0xffffff, 5.0 );
light.position.set( 10, 100, 10 );

//
// The invisible plane
//
geometry = new THREE.PlaneGeometry( 10000, 10000 );
material = new THREE.MeshBasicMaterial( {
visible: false
});

invisible_plane = new THREE.Mesh( geometry, material );

//
//
//

controls = new THREE.TrackballControls( camera, renderer.domElement );

animate();

//
// ACTION!
//
totalObjects = 0;
renderer.domElement.onmouseup = function(e) {

if (!e.shiftKey) {

e.preventDefault();
return false;
}

console.log('yes! you clicked!');

pixel_coords = new THREE.Vector2( e.clientX, e.clientY );

console.log('Pixel coordinates', pixel_coords);

vp_coords = new THREE.Vector2( ( pixel_coords.x / window.innerWidth ) * 2 - 1,
-( pixel_coords.y / window.innerHeight ) * 2 + 1);

console.log('Viewport coordinates', vp_coords);

vp_coords_near = new THREE.Vector3( vp_coords.x, vp_coords.y, 0);

raycaster = new THREE.Raycaster();
raycaster.setFromCamera(vp_coords_near, camera);
intersects = raycaster.intersectObject(invisible_plane);

// choose random geometry
random_geometry =  Math.floor((Math.random() * 6));
switch(random_geometry) {
case 0:
geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
break;

case 1:
geometry = new THREE.BoxGeometry( 20, 20, 20 );
break;

case 2:
geometry = new THREE.SphereGeometry(20,20,10);
break;

case 3:
geometry = new THREE.OctahedronGeometry(20);
break;

case 4:
geometry = new THREE.ConeGeometry(20,10);
break;

case 5:
geometry = new THREE.RingGeometry( 1, 20, 32 );

}
random_geometry += 1

// choose random color
colors = ['red', 'blue', 'green', 'white', 'purple', 'yellow'];
random_color = colors[Math.floor((Math.random() * colors.length))];

material = new THREE.MeshStandardMaterial({ color: random_color });
mesh = new THREE.Mesh( geometry, material );

mesh.position.set(intersects[0].point.x, intersects[0].point.y,intersects[0].point.z)

totalObjects += 1;
console.log('Total objects', totalObjects);

};

};

function animate() {

requestAnimationFrame( animate );

controls.update();
renderer.render( scene, camera );

};

</script>
<body></body>
</html>``````
``````<html>
<meta charset="UTF-8" />
<style>
html, body {
background-color:#000;
margin: 0;
height: 100%;
overflow: hidden !important;
}
</style>
<script src="https://threejs.org/build/three.min.js" type="text/javascript"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js" type="text/javascript"></script>
<script>

var mesh = null;
var all_meshes = [];

scene = new THREE.Scene();

fov = 75;
ratio = window.innerWidth / window.innerHeight;
zNear = 1;
zFar = 10000;
// console.log(ratio);
camera = new THREE.PerspectiveCamera(fov, ratio, zNear, zFar);
camera.position.set( 0, 0, 100);

renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

ambientLight = new THREE.AmbientLight();

light = new THREE.DirectionalLight( 0xffffff, 5.0 );
light.position.set( 10, 100, 10 );

//
// The invisible plane
//
geometry = new THREE.PlaneGeometry( 10000, 10000 );
material = new THREE.MeshBasicMaterial( {
visible: false
});

invisible_plane = new THREE.Mesh( geometry, material );

//
//
//

controls = new THREE.TrackballControls( camera, renderer.domElement );

animate();

//
// ACTION!
//
totalObjects = 0;
renderer.domElement.onmousemove = function(e) {

if (!e.shiftKey) {

e.preventDefault();
return false;
}

console.log('yes! you clicked!');

pixel_coords = new THREE.Vector2( e.clientX, e.clientY );

console.log('Pixel coordinates', pixel_coords);

vp_coords = new THREE.Vector2( ( pixel_coords.x / window.innerWidth ) * 2 - 1,
-( pixel_coords.y / window.innerHeight ) * 2 + 1);

console.log('Viewport coordinates', vp_coords);

vp_coords_near = new THREE.Vector3( vp_coords.x, vp_coords.y, 0);

raycaster = new THREE.Raycaster();
raycaster.setFromCamera(vp_coords_near, camera);
intersects = raycaster.intersectObject(invisible_plane);

// choose random geometry
random_geometry =  Math.floor((Math.random() * 6));
switch(random_geometry) {
case 0:
geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
break;

case 1:
geometry = new THREE.BoxGeometry( 20, 20, 20 );
break;

case 2:
geometry = new THREE.SphereGeometry(20,20,10);
break;

case 3:
geometry = new THREE.OctahedronGeometry(20);
break;

case 4:
geometry = new THREE.ConeGeometry(20,10);
break;

case 5:
geometry = new THREE.RingGeometry( 1, 20, 32 );

}
random_geometry += 1

// choose random color
colors = ['red', 'blue', 'green', 'white', 'purple', 'yellow'];
random_color = colors[Math.floor((Math.random() * colors.length))];

material = new THREE.MeshStandardMaterial({ color: random_color });
mesh = new THREE.Mesh( geometry, material );

mesh.position.set(intersects[0].point.x, intersects[0].point.y,intersects[0].point.z)

all_meshes.push(mesh);

totalObjects += 1;
console.log('Total objects', totalObjects);

};

};

function animate() {

requestAnimationFrame( animate );

if (mesh != null) {

for(m in all_meshes) {

mesh = all_meshes[m];

q = new THREE.Quaternion( 0, Math.sin(Math.PI/2),0, Math.cos(Math.PI/2) );

mesh.quaternion.slerp( q, 0.01 );

}

}

controls.update();
renderer.render( scene, camera );

};

</script>
<body></body>
</html>``````

Arcball

Trackball

Controls

Natural Feeling

Spins twice as fast

Completely path independent

Arcball

Trackball

Natural Feeling

Spins twice as fast

Completely path independent

Arcball

Trackball

Quiz today!