CS410 Software Engineering

Real Projects. Real Impact. Real   kills.

    Software Development Life Cycle
    Prototyping + Scrum + Agile + DevOps
    Python and C++ (w/ Cython)
    Git + Docker Containers
    Applied Deep Learning
    Guest Speakers

Dan Ginsburg

11 / 20

Vulkan, OpenGL, and OpenGL ES renderers for the Source 2 engine used by games such as Dota 2, Artifact, and Dota Underlords

Critical Thinking in Cybersecurity

11 / 20

Kristin Dahl

11 am

Kristin is a cyber security consultant with IBM X-Force IRIS and former research staff member at MIT Lincoln Laboratory

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

Inside

Outside

Marching Cubes in THREE.js

Marching Cubes in THREE.js

glTF

Graphics Layer Transmission Format

Final Project

40% of your grade

chance to pair your learned skills
with your creative ideas

can be done as a team or solo

Fast Forward (30-60 seconds)

Final Project Presentation

Report on Overleaf

Code on Github

Wed 12/04

Mon 12/09 Wed 12/11
Fri 12/13

Fri 12/20

Fri 12/20

Field Trip 11/27

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!

{
    "nodes": [
        {
            "mesh": 0
        }
    ],
    "scenes": [
        {
            "nodes": [
                0
            ]
        }
    ],
    "scene": 0
}
{
    "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
}

Accessors

{
    // ...
    "meshes": [
        {
            "primitives": [
                 "mode": 4,
                 "attributes": {
                     "POSITION": 0
                 },
                 "indices": 1
            ]
        }
    ]
    "nodes": [
        {
            "mesh": 0
        }
    ],
    "scenes": [
        {
            "nodes": [
                0
            ]
        }
    ],
    "scene": 0
}

Accessors

{
    "accessors": [
        {
          
        },
        {
          
        }
    ], 
  
  
   // ...
}
{
    // ...
    "meshes": [
        {
            "primitives": [
                 "mode": 4,
                 "attributes": {
                     "POSITION": 0
                 },
                 "indices": 1
            ]
        }
    ]
    "nodes": [
        {
            "mesh": 0
        }
    ],
    "scenes": [
        {
            "nodes": [
                0
            ]
        }
    ],
    "scene": 0
}

Accessors

{
    "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

Indices

{
    // ...
  
    "bufferViews": [
        {
            "buffer": 0,
          	"byteOffset": 0,
            "byteLength": HOWMANYBYTES,
            "target": 34962
        },
        {
            "buffer": 1,
            "byteOffset": 0,
            "byteLength": HOWMANYBYTES,
            "target": 34963
        }
    ],
    "buffers": [
        {
            "uri": "data:application/octet-stream;base64, ...."
        },
        {
            "uri": "data:application/octet-stream;base64, ...."
        }
    ]
  
   // ...
}

ELEMENT_ARRAY_BUFFER

ARRAY_BUFFER

var vertices = new Float32Array([0,0,0, 0,1,0, 1,0,0]);

Base64

Encode bytes as string

btoa(vertices)

"MCwwLDAsMCwxLDAsMSwwLDA="

"buffers": [

  {

    "uri": "data:application/octet-stream;base64,MCwwLDAsMCwxLDAsMSwwLDA="

  }

]

atob("MCwwLDAsMCwxLDAsMSwwLDA=")

"0,0,0,0,1,0,1,0,0"

Base64

Decode strings to bytes

new Float32Array(atob("MCwwLDAsMCwxLDAsMSwwLDA=").split(','));

Lecture 31

By Daniel Haehn

Lecture 31

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

  • 67

More from Daniel Haehn