Daniel Haehn PRO
Hi, I am a biomedical imaging and visualization researcher who investigates how computational methods can accelerate biological and medical research.
Assignment 4
rpan001
genlikan
Assignment 4
A
Assignment 4
Assignment 5
Due 10/11/2019
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
~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 );<html>
<head>
<meta charset="UTF-8" />
<style>
html, body {
background-color:#000;
margin: 0;
padding: 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 = [];
window.onload = function() {
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();
scene.add( ambientLight );
light = new THREE.DirectionalLight( 0xffffff, 5.0 );
light.position.set( 10, 100, 10 );
scene.add( light );
//
// The invisible plane
//
geometry = new THREE.PlaneBufferGeometry( 10000, 10000 );
material = new THREE.MeshBasicMaterial( {
visible: false
});
invisible_plane = new THREE.Mesh( geometry, material );
scene.add( invisible_plane );
//
//
//
controls = new THREE.TrackballControls( camera );
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.TorusKnotBufferGeometry( 10, 3, 100, 16 );
break;
case 1:
geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
break;
case 2:
geometry = new THREE.SphereBufferGeometry(20,20,10);
break;
case 3:
geometry = new THREE.OctahedronBufferGeometry(20);
break;
case 4:
geometry = new THREE.ConeBufferGeometry(20,10);
break;
case 5:
geometry = new THREE.RingBufferGeometry( 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)
scene.add(mesh);
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];
var startQuaternion = new THREE.Quaternion().set( 0, 0, 0, 1 ).normalize();
var endQuaternion = new THREE.Quaternion().set( 100, 100, 100, 1 ).normalize();
var t = 0;
mesh.quaternion.slerp( endQuaternion, 0.01 );
}
// // Update a mesh's rotation in the loop
// t = ( t + 0.1 ) % 1; // constant angular momentum
// THREE.Quaternion.slerp( startQuaternion, endQuaternion, mesh.quaternion, t );
}
controls.update();
renderer.render( scene, camera );
};
</script>
</head>
<body></body>
</html><html>
<head>
<meta charset="UTF-8" />
<style>
html, body {
background-color:#000;
margin: 0;
padding: 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 = [];
window.onload = function() {
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();
scene.add( ambientLight );
light = new THREE.DirectionalLight( 0xffffff, 5.0 );
light.position.set( 10, 100, 10 );
scene.add( light );
//
// The invisible plane
//
geometry = new THREE.PlaneBufferGeometry( 10000, 10000 );
material = new THREE.MeshBasicMaterial( {
visible: false
});
invisible_plane = new THREE.Mesh( geometry, material );
scene.add( invisible_plane );
//
//
//
controls = new THREE.TrackballControls( camera );
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.TorusKnotBufferGeometry( 10, 3, 100, 16 );
break;
case 1:
geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
break;
case 2:
geometry = new THREE.SphereBufferGeometry(20,20,10);
break;
case 3:
geometry = new THREE.OctahedronBufferGeometry(20);
break;
case 4:
geometry = new THREE.ConeBufferGeometry(20,10);
break;
case 5:
geometry = new THREE.RingBufferGeometry( 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)
scene.add(mesh);
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>
</head>
<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
Lecture 16
By Daniel Haehn
Lecture 16
Slides for CS460 Computer Graphics at UMass Boston. See https://cs460.orghttps://cs460.org
