Assignment 4

Assignment 5

Due Today!!

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 == Pi/4

~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

sin(T/2) * 0

sin(T/2) * 0

sin(T/2) * 1

cos(T/2)

Quaternion

x

y

z

w

T is the angle

0 0 1 is the axis

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

1 = sin( ? /2) * ?

1 = sin( ? /2) * ?

1 = sin( ? /2) * ?

1 = cos( ? /2)

x

y

z

w

0

0

1

2 Pi

Pi

Pi/2

1.5 Pi

-1

sin(T/2) * 0

sin(T/2) * 0

sin(T/2) * 1

cos(T/2)

Quaternion

x

y

z

w

T is the angle

0 0 1 is the axis

var q = new THREE.Quaternion( x, y, z, w );
var q = new THREE.Quaternion( sin( T / 2 ) * x , 
                              sin( T / 2 ) * y , 
                              sin( T / 2 ) * z , 
                              cos( T / 2 ) );

0

0

1

2 Pi

Pi

Pi/2

1.5 Pi

-1

var q = new THREE.Quaternion( sin( T / 2 ) * x , 
                              sin( T / 2 ) * y , 
                              sin( T / 2 ) * z , 
                              cos( T / 2 ) );

0

0

1

2 Pi

Pi

Pi/2

1.5 Pi

-1

90°

180°

270°

360°

180°

around Y-axis

T is the angle

x y z is the axis

 T = Math.PI

0, 1, 0

var q = new THREE.Quaternion( Math.sin( Math.PI / 2 ) * 0 , 
                              Math.sin( Math.PI / 2 ) * 1 , 
                              Math.sin( Math.PI / 2 ) * 0 , 
                              Math.cos( Math.PI / 2 ) );
var q = new THREE.Quaternion( sin( T / 2 ) * x , 
                              sin( T / 2 ) * y , 
                              sin( T / 2 ) * z , 
                              cos( T / 2 ) );

0

0

1

2 Pi

Pi

Pi/2

1.5 Pi

-1

90°

180°

270°

360°

270°

around Z-axis

T is the angle

x y z is the axis

 T = 1.5 * Math.PI

0, 0, 1

var q = new THREE.Quaternion( Math.sin( 1.5 * Math.PI / 2 ) * 0 , 
                              Math.sin( 1.5 * Math.PI / 2 ) * 0 , 
                              Math.sin( 1.5 * Math.PI / 2 ) * 1 , 
                              Math.cos( 1.5 * Math.PI / 2 ) );
var q = new THREE.Quaternion( sin( T / 2 ) * x , 
                              sin( T / 2 ) * y , 
                              sin( T / 2 ) * z , 
                              cos( T / 2 ) );

0

0

1

2 Pi

Pi

Pi/2

1.5 Pi

-1

90°

180°

270°

360°

90°

around X-axis

T is the angle

x y z is the axis

 T = Math.PI / 2

1, 0, 0

var q = new THREE.Quaternion( Math.sin( Math.PI / 2 / 2 ) * 1 , 
                              Math.sin( Math.PI / 2 / 2 ) * 0 , 
                              Math.sin( Math.PI / 2 / 2 ) * 0 , 
                              Math.cos( Math.PI / 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

Scaling

x, y, z

Arcball

Trackball

Controls

Natural Feeling

Spins twice as fast

Completely path independent

Picking

or unprojecting from 2D to 3D

zNear

Ray

Position (x,y,z)

Invisible Plane

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

Raycasting

Click to select an object

Framebuffer (hidden)

1

2

3

4

( 1, 0, 0, 1 )

( 0, 1, 0, 1 )

( 1, 1, 0, 1 )

( 0, 0, 1, 1 )

( 0, 0, 0, 1 )

gl.readPixels

(r, g, b, a)

map to object ID

( 0, 1, 0, 1 )

2

Object Picking

Object Picking

Raycasting

More complex

Quick'n'Dirty

Very precise (Face picking)

Object precision

Occlusion not a problem

Objects can be hidden

Object Picking

Raycasting

More complex

Quick'n'Dirty

Very precise (Face picking)

Object precision

Occlusion not a problem

Objects can be hidden

raycaster = THREE.Raycaster();
raycaster.setFromCamera(vp_coords_near, camera);
intersects = raycaster.intersectObject( scene.children );
$ git pull upstream master
$ git push
$ python -m http.server
$ cd 06
$ python -m SimpleHTTPServer
<script src="https://threejs.org/examples/js/effects/AnaglyphEffect.js" type="text/javascript"></script>

<script>
  
// ...
 
effect = new THREE.AnaglyphEffect( renderer );
effect.setSize( window.innerWidth, window.innerHeight );

// ...

function animate() {

  // ...

  effect.render( scene, camera ); // replace renderer. with effect.

  // ...

}


</script>

Lecture 17

By Daniel Haehn

Lecture 17

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

  • 87

More from Daniel Haehn