Daniel Haehn PRO
Hi, I am a biomedical imaging and visualization researcher who investigates how computational methods can accelerate biological and medical research.
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!
Lecture 19
By Daniel Haehn
Lecture 19
Slides for CS460 Computer Graphics at UMass Boston. See https://cs460.org!
