Daniel Haehn PRO
Hi, I am a biomedical imaging and visualization researcher who investigates how computational methods can accelerate biological and medical research.
Skybox Lecture 12/08
F 11/17 Volume Rendering
M 11/27 Atacama.bio Guest Lecture
F 12/01 WebGPU II
F 11/24 No class (Thanksgiving Recess)
W 11/29 Final Project Fast Forward (60 seconds each!)
M 11/20 Field Trip / Outside Lecture
W 11/22 glTF / WebGPU I
M 12/04 Final Project Presentations I
W 12/06 Final Project Presentations II
F 12/08 Skybox
M 12/11 Final Project Presentations III
W 12/13 Final Recap and Last Lecture!
F 12/22 Final Project Submission
40% of your grade
chance to pair your learned skills
with your creative ideas
can be done as a team or solo
the more impact, the better!
Final Project
Fast Forward (30-60 seconds)
Final Project Presentation
Final Submission
Wed 11/29
Mon 12/04
Fri 12/22
Wed 12/06
Mon 12/11
pre-recorded or live!
What are Fast Forwards?
Video or Live
Loud and Proud!
What you (or your team) plan on doing and why!
Fast Forward (30-60 seconds)
Wed 11/29
MEGA
QUIZ
Bonus only, counts as 4 quizzes!!
Soon on Blackboard!
2D
3D
Image Volumes
Marching Cubes creates 3D Meshes
Bill Lorensen 1987
Label Maps
Marching Cubes in 2D
Create triangles to approximate the shape
Marching Cubes in 3D
Create triangles to approximate the shape
Outside
Marching Cubes in THREE.js
Marching Cubes in THREE.js
glTF
Graphics Layer Transmission Format
glTF can be:
JSON - based (.gtlf)
JSON - based (.gtlf) + external binary data (.bin)
only binary (.glb)
glTF can be:
JSON - based (.gtlf)
JSON - based (.gtlf) + external binary data (.bin)
only binary (.glb)
JSON
JavaScript Object Notation
//
// SETTINGS and HELPER for DAT.GUI
//
window['SCENE'] = {
'anaglyph': false,
'poly': null,
'rotate_poly': false,
'do_rotate_poly': function() {
window['SCENE']['rotate_poly'] = !window['SCENE']['rotate_poly'];
},
'blender': null,
'blender_helper': null,
'rotate_blender': false,
'do_rotate_blender': function() {
window['SCENE']['rotate_blender'] = !window['SCENE']['rotate_blender'];;
},
'blender_old_material': null,
'change_material': function() {
if (!window['SCENE']['blender_old_material']) {
window['SCENE']['blender_old_material'] = window['SCENE']['blender'].material.clone();
window['SCENE']['blender'].material = new THREE.MeshNormalMaterial();
} else {
window['SCENE']['blender'].material = window['SCENE']['blender_old_material'].clone();
window['SCENE']['blender_old_material'] = null;
}
}
};
JSON
For Helper Object Instance
{
// Functions are not allowed in JSON!
// 'dance': function() {
//...
// },
'head': 123,
'parameter1': 456,
'nested objects': {
'another object': {
'property1': true,
'list of stuff': [1, 2, 'hello']
}
}
}
JSON
For Data Description
{
"nodes": [
{
}
],
"scenes": [
{
"nodes": [
0
]
}
],
"scene": 0
}
Scene Content goes here!
{
"meshes": [
{
"primitives": [
"mode": 4
]
}
]
"nodes": [
{
"mesh": 0
}
],
"scenes": [
{
"nodes": [
0
]
}
],
"scene": 0
}
Triangles
{
"meshes": [
{
"primitives": [
"mode": 4,
"attributes": {
"POSITION": 0
},
"indices": 1
]
}
],
"nodes": [
{
"mesh": 0
}
],
"scenes": [
{
"nodes": [
0
]
}
],
"scene": 0
}
{
"meshes": [
{
"primitives": [
"mode": 4,
"attributes": {
"POSITION": 0
},
"indices": 1
]
}
],
"nodes": [
{
"mesh": 0
}
],
"scenes": [
{
"nodes": [
0
]
}
],
"scene": 0
}
Triangles
Accessors
{
// ...
"meshes": [
{
"primitives": [
"mode": 4,
"attributes": {
"POSITION": 0
},
"indices": 1
]
}
],
"nodes": [
{
"mesh": 0
}
],
"scenes": [
{
"nodes": [
0
]
}
],
"scene": 0
}
{
"accessors": [
{
},
{
}
],
// ...
}
{
// ...
"meshes": [
{
"primitives": [
"mode": 4,
"attributes": {
"POSITION": 0
},
"indices": 1
]
}
],
"nodes": [
{
"mesh": 0
}
],
"scenes": [
{
"nodes": [
0
]
}
],
"scene": 0
}
{
"accessors": [
{
"bufferView": 0,
"byteOffset": 0,
"componentType": 5126,
"count": HOWMANY,
"type": "VEC3",
"max": [MAX_X, MAX_Y, MAX_Z],
"min": [MIN_X, MIN_Y, MIN_Z]
},
{
"bufferView": 1,
"byteOffset": 0,
"componentType": 5123,
"count": HOWMANY,
"type": "SCALAR",
"max": [MAX],
"min": [MIN]
}
],
// ...
}
Vertices
Indices
Float
U_Short
U_Int
{
"accessors": [
{
"bufferView": 0,
"byteOffset": 0,
"componentType": 5126,
"count": HOWMANY,
"type": "VEC3",
"max": [MAX_X, MAX_Y, MAX_Z],
"min": [MIN_X, MIN_Y, MIN_Z]
},
{
"bufferView": 1,
"byteOffset": 0,
"componentType": 5123,
"count": HOWMANY,
"type": "SCALAR",
"max": [MAX],
"min": [MIN]
}
],
// ...
}
Vertices
Indices
{
// ...
"bufferViews": [
{
},
{
}
],
"buffers": [
{
},
{
}
]
// ...
}
{
"accessors": [
{
"bufferView": 0,
"byteOffset": 0,
"componentType": 5126,
"count": HOWMANY,
"type": "VEC3",
"max": [MAX_X, MAX_Y, MAX_Z],
"min": [MIN_X, MIN_Y, MIN_Z]
},
{
"bufferView": 1,
"byteOffset": 0,
"componentType": 5123,
"count": HOWMANY,
"type": "SCALAR",
"max": [MAX],
"min": [MIN]
}
],
// ...
}
Vertices
Indices
{
// ...
"bufferViews": [
{
"buffer": 0,
"byteOffset": 0,
"byteLength": HOWMANYBYTES,
"target": 34962
},
{
"buffer": 1,
"byteOffset": 0,
"byteLength": HOWMANYBYTES,
"target": 34963
}
],
"buffers": [
{
},
{
}
]
// ...
}
ELEMENT_ARRAY_BUFFER
ARRAY_BUFFER
{
"accessors": [
{
"bufferView": 0,
"byteOffset": 0,
"componentType": 5126,
"count": HOWMANY,
"type": "VEC3",
"max": [MAX_X, MAX_Y, MAX_Z],
"min": [MIN_X, MIN_Y, MIN_Z]
},
{
"bufferView": 1,
"byteOffset": 0,
"componentType": 5123,
"count": HOWMANY,
"type": "SCALAR",
"max": [MAX],
"min": [MIN]
}
],
// ...
}
Vertices
{
// ...
"bufferViews": [
{
"buffer": 0,
"byteOffset": 0,
"byteLength": HOWMANYBYTES,
"target": 34962
},
{
"buffer": 1,
"byteOffset": 0,
"byteLength": HOWMANYBYTES,
"target": 34963
}
],
"buffers": [
{
"uri": "data:application/octet-stream;base64, ....",
"byteLength": HOWMANYBYTES
},
{
"uri": "data:application/octet-stream;base64, ....",
"byteLength": HOWMANYBYTES
}
]
// ...
}
ARRAY_BUFFER
ELEMENT_ARRAY_BUFFER
Indices
Indices Data
Vertices Data
[0.,0.,0., 0.,1.,0., 1.,0.,0.]
Base64
Encode bytes as string
"AAAAAAAAAAAAAAAAAAAAAAAAgD8AAAAAAACAPwAAAAAAAAAA"
"buffers": [
{
"uri": "data:application/octet-stream;base64,AAAAAAAAAAAAAAAAAAAAAAAAgD
8AAAAAAACAPwAAAAAAAAAA"
}
]
Base64
Decode strings to bytes
"AAAAAAAAAAAAAAAAAAAAAAAAgD8AAAAAAACAPwAAAAAAAAAA"
[0.,0.,0., 0.,1.,0., 1.,0.,0.]
// ...
"bufferViews": [
{
"buffer": 0,
"byteOffset": 0,
"byteLength": HOWMANYBYTES,
"target": 34962
},
// ...
// ...
"accessors": [
{
"bufferView": 0,
"byteOffset": 0,
"componentType": 5126,
"count": HOWMANY,
"type": "VEC3",
"max": [MAX_X, MAX_Y, MAX_Z],
"min": [MIN_X, MIN_Y, MIN_Z]
}
// ...
Base64
Decode strings to bytes
"AAAAAAAAAAAAAAAAAAAAAAAAgD8AAAAAAACAPwAAAAAAAAAA"
[0.,0.,0., 0.,1.,0., 1.,0.,0.]
// ...
"bufferViews": [
{
"buffer": 0,
"byteOffset": 0,
"byteLength": HOWMANYBYTES,
"target": 34962
},
// ...
// ...
"accessors": [
{
"bufferView": 0,
"byteOffset": 0,
"componentType": 5126,
"count": 3,
"type": "VEC3",
"max": [MAX_X, MAX_Y, MAX_Z],
"min": [MIN_X, MIN_Y, MIN_Z]
}
// ...
Base64
Decode strings to bytes
"AAAAAAAAAAAAAAAAAAAAAAAAgD8AAAAAAACAPwAAAAAAAAAA"
[0.,0.,0., 0.,1.,0., 1.,0.,0.]
// ...
"bufferViews": [
{
"buffer": 0,
"byteOffset": 0,
"byteLength": HOWMANYBYTES,
"target": 34962
},
// ...
// ...
"accessors": [
{
"bufferView": 0,
"byteOffset": 0,
"componentType": 5126,
"count": 3,
"type": "VEC3",
"max": [1., 1., 0.],
"min": [0., 0., 0.]
}
// ...
FLOAT
4 bytes, 4 bytes, 4 bytes, .....
32 bit
Base64
Decode strings to bytes
"AAAAAAAAAAAAAAAAAAAAAAAAgD8AAAAAAACAPwAAAAAAAAAA"
[0.,0.,0., 0.,1.,0., 1.,0.,0.]
// ...
"bufferViews": [
{
"buffer": 0,
"byteOffset": 0,
"byteLength": 36,
"target": 34962
},
// ...
// ...
"accessors": [
{
"bufferView": 0,
"byteOffset": 0,
"componentType": 5126,
"count": 3,
"type": "VEC3",
"max": [1., 1., 0.],
"min": [0., 0., 0.]
}
// ...
{
"accessors": [
{
"bufferView": 0,
"byteOffset": 0,
"componentType": 5126,
"count": HOWMANY,
"type": "VEC3",
"max": [MAX_X, MAX_Y, MAX_Z],
"min": [MIN_X, MIN_Y, MIN_Z]
},
{
"bufferView": 1,
"byteOffset": 0,
"componentType": 5123,
"count": HOWMANY,
"type": "SCALAR",
"max": [MAX],
"min": [MIN]
}
],
"bufferViews": [
{
"buffer": 0,
"byteOffset": 0,
"byteLength": HOWMANYBYTES,
"target": 34962
},
{
"buffer": 1,
"byteOffset": 0,
"byteLength": HOWMANYBYTES,
"target": 34963
}
],
"buffers": [
{
"uri": "data:application/octet-stream;base64, ....",
"byteLength": HOWMANYBYTES
},
{
"uri": "data:application/octet-stream;base64, ....",
"byteLength": HOWMANYBYTES
}
],
"meshes": [
{
"primitives": [{
"mode": 4,
"attributes": {
"POSITION": 0
},
"indices": 1
}]
}
],
"nodes": [
{
"mesh": 0
}
],
"scenes": [
{
"nodes": [
0
]
}
],
"scene": 0
}
google-chrome --enable-unsafe-webgpu --use-vulkan=true --test-type --enable-features=Vulkan
Quiz 12 coming soon - due Monday!
By Daniel Haehn
Hi, I am a biomedical imaging and visualization researcher who investigates how computational methods can accelerate biological and medical research.