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!

  • 96