Assignment 4

Monday 10 / 19

Patrick Cozzi and Liz Dailey

(CreateAccess)

Wednesday 10/21

Assignment 5

coming soon!

Assignment 5

Thank you!

Mixed Content: The page at 'https://haehn.github.io/cs460student/05/' was loaded over HTTPS, but requested an insecure script 'http://get.goxtk.com/xtk_xdat.gui.js'. This request has been blocked; the content must be served over HTTPS.

 

Using https://get.goxtk.com/xtk_xdat.gui.js will fix it :)

Assignment 6

Due 10/24 !

zNear

Ray

Position (x,y,z)

Invisible Plane

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

Raycasting

<script type="module">
  
// ...

  
import { AnaglyphEffect } from 'three/addons/effects/AnaglyphEffect.js';
  
let effect; 
 
// ...
 
effect = new AnaglyphEffect( renderer );
effect.setSize( window.innerWidth, window.innerHeight );

// ...

function animate() {

  // ...

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

  // ...

}

</script>

Augmented Reality

Virtual Reality

Mixed Reality

XR

Cross Reality

Augmented Reality

Virtual Reality

Mixed Reality

Oculus Quest 2

Sir Isaac Newton 1666

r    g    b    a

alpha

0: fully transparent

     ....

255: fully opaque

0: minimum

     ....

255: maximum

red

green

blue

All image formats (PNG, JPEG, BMP...)

4 channels

r    g    b    

0: minimum

     ....

255: maximum

red

green

blue

All image formats (PNG, JPEG, BMP...)

3 channels

g

0: minimum

     ....

255: maximum

grayscale

All image formats (PNG, JPEG, BMP...)

1 channel

r    g    b    a

alpha

0: fully transparent

     ....

255: fully opaque

0: minimum

     ....

255: maximum

red

green

blue

Three.js

r    g    b    a

alpha

0: fully transparent

     ....

1: fully opaque

0: minimum

     ....

1: maximum

red

green

blue

XTK or GLSL

#000000

#ffffff

minimum

maximum

Hex

#00000000

#ffffffff

minimum

maximum

Hex8

alpha

alpha

HSL

H:

S:

L:

Hue

Saturation

Lightness

0/360°

180°

240°

65%

40%

0%

100%

0%

100%

hsl(240, 65%, 40%)

rgb(36, 36, 168)

#2424a8

Gamut

range of colors in an imaging system

r    g    b    a

alpha

0

 :

255

red

green

blue

0

 :

255

0

 :

255

0

 :

255

1 byte

1 byte

1 byte

1 byte

Assignment 6

The Virtual Robot

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!

$ git pull upstream main
$ git push
$ python -m http.server
$ cd 06
$ python -m SimpleHTTPServer

submit your music

Quiz 7 due today!