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!

Lecture 33

By Daniel Haehn

Lecture 33

Slides for CS460 Computer Graphics at UMass Boston. See https://cs460.org!

  • 328