Assignment 4

Home Kit!

Assignment 5

Due Today!!

STFD!

Write in chat:

Please go slower..

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>``````