New Office

McCormack 3 - 2 1 2

M / W / F      1:00p

Meet with me

in November

10 minutes

Funda Durupinar Babur

Wednesday 10 / 30 / 2019

Assignment 6

Due 10 / 28

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( 'marble.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 );

        animate();


      };

      function animate() {

        requestAnimationFrame( animate );

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

      };

    </script>
  </head>
  <body></body>
</html>

Lecture 21

By Daniel Haehn

Lecture 21

Slides for CS460 Computer Graphics at UMass Boston. See https://cs460.org!

  • 89

More from Daniel Haehn