Daniel Haehn PRO
Hi, I am a biomedical imaging and visualization researcher who investigates how the study of brain connectivity and machine perception can help advance the understanding of biologically inspired artificial intelligence.
Meet with me
in November
10 minutes
Wednesday lecture is remote!!!
Tuesday 10am via ZOOM!
That is tomorrow!!!
Guest Lecture Friday 10/29!
Wednesday 11 / 03 / 2021
Assignment 6
Due 11 / 1
Environment
for Assignments
6
7
8
9
10
Robot
Animated Robot
Robot Crowd
Geometry, Materials, Lighting
glTF
6
Robot
Scene Graph
Quaternions
Skeletons
Object Oriented
Slerp
Animations
Textures
Anaglyph
6
Robot
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!
*
*
*
Head
Neck
Torso
Lower Arm
Upper Arm
Hand
Upper Arm
Lower Arm
Hand
Upper Leg
Upper Leg
Lower Leg
Lower Leg
Foot
Foot
L
L
L
R
R
R
L
L
L
R
R
R
Head
x y z
World Frame
Head
Y
X
Object Frame
Neck
Torso
Upper Arm
Lower Arm
Hand
neck.position.y = -10;
torso.position.y = -30;
-10
-40
left_upper_arm.position.y = -5;
left_upper_arm.position.x = 5;
left_lower_arm.position.y = -15;
left_lower_arm.position.x = 5;
left_hand.position.y = -5;
left_hand.position.x = 5;
Position is relative to parent!
Head
Upper Arm
Lower Arm
Hand
q
q (0, 0, 0, 1)
Identity
X
Head
Upper Arm
q
q (0, 0, 0, 1)
Identity
X
q2 (Math.sin(T/2),
0,
0,
Math.cos(T/2))
Rotate 180° in X
T = Math.PI
q
q2
Arm down
Arm up
Time
Frames
Keyframe 2
Keyframe 1
slerp Interpolation
<html>
<head>
<meta charset="UTF-8" />
<style>
html, body {
background-color:#000;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden !important;
background-image: url(sky.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
</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 src="https://threejs.org/examples/js/effects/AnaglyphEffect.js" type="text/javascript"></script>
<script>
var scene, camera, renderer, ambientLight, light, controls;
var floor;
window.onload = function() {
scene = new THREE.Scene();
var fov = 60;
var ratio = window.innerWidth / window.innerHeight;
var zNear = 1;
var zFar = 10000;
camera = new THREE.PerspectiveCamera(fov, ratio, zNear, zFar);
camera.position.set( 0, 0, 500);
renderer = new THREE.WebGLRenderer({ alpha: true });
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 );
var floorTexture = new THREE.TextureLoader().load( 'board.jpg' );
var floorGeometry = new THREE.PlaneBufferGeometry( 1000, 1000 );
var floorMaterial = new THREE.MeshBasicMaterial( {
map: floorTexture,
side: THREE.DoubleSide
} );
floor = new THREE.Mesh( floorGeometry, floorMaterial );
floor.position.y = -100;
floor.rotateX(-30);
scene.add( floor );
controls = new THREE.TrackballControls( camera, renderer.domElement );
// ROBOT GOES HERE!
animate();
};
function animate() {
requestAnimationFrame( animate );
// TODO
controls.update();
renderer.render( scene, camera );
};
</script>
</head>
<body></body>
</html>
Lecture 20
By Daniel Haehn
Lecture 20
Slides for CS460 Computer Graphics at UMass Boston. See https://cs460.org!
