Daniel Haehn PRO
Hi, I am a biomedical imaging and visualization researcher who investigates how the study of brain connectivity and machine perception can help advance the understanding of biologically inspired artificial intelligence.
Dan Ginsburg
11 / 29
Vulkan, OpenGL, and OpenGL ES renderers for the Source 2 engine used by games such as Dota 2, Artifact, and Dota Underlords
Assignment 9
2D
3D
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
Robot = function(x, y, z) {
// ...
this.head = bones[ 1 ];
this.neck = bones[ 2 ];
// ...
this.body_mesh = mesh;
// end of head, neck, torso
};
Robot.prototype.show = function(scene) {
// ...
};
Robot.prototype.dance = function() {
// ...
};var r1 = new Robot();
var r2 = new Robot();
r1.dance();
r2.show();
r1.parameter1 = 'something';
r2.parameter2 = 'something else';var r1 = new Robot();
var r2 = new Robot();
r1.dance();
r2.show();
r1.parameter1 = 'something';
r2.parameter2 = 'something else';var r1 = {
'dance': function() {
//...
},
'head': 123,
'parameter1': 456
};
console.log(r1.head);
// prints 123
r1.parameter1 = 777;Define the object somewhere,
create multiple instances
Directly create an instance
JSON
Prototype
kinda
{
// 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
}
Lecture 32
By Daniel Haehn
Lecture 32
Slides for CS460 Computer Graphics at UMass Boston. See https://cs460.org!
