Published
Edited
Apr 6, 2020
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
glbFile = await FileAttachment("cube.glb").arrayBuffer()
Insert cell
Insert cell
glbBytes = new Uint8Array(glbFile)
Insert cell
Insert cell
Insert cell
String.fromCharCode(...glbBytes.slice(0, 4))
Insert cell
Insert cell
glbBytes.slice(4, 8).reduce((prev, curr, idx) => {
return prev + curr * 256 ** idx;
}, 0)
Insert cell
Insert cell
glbBytes.slice(8, 12).reduce((prev, curr, idx) => {
return prev + curr * 256 ** idx;
}, 0)
Insert cell
Insert cell
chunkParser = (type, data) => {
switch (type) {
case "BIN\u0000": {
return data;
}
case "JSON": {
return JSON.parse(String.fromCharCode(...data));
}
default: {
console.error(`chunk type : ${type} is not defined`);
}
}
}
Insert cell
Insert cell
Insert cell
chunkLength = glbBytes.slice(12, 12 + 4).reduce((prev, curr, idx) => {
return prev + curr * 256 ** idx;
}, 0)
Insert cell
Insert cell
chunkType = String.fromCharCode(...glbBytes.slice(12 + 4, 12 + 8))
Insert cell
Insert cell
chunkData = chunkParser(
chunkType,
glbBytes.slice(12 + 8, 12 + 8 + chunkLength)
)
Insert cell
Insert cell
chunks = {
let chunks = [];
let offset = 12;

for (let i = 0; offset < glbBytes.length; i++) {
chunks[i] = { type: "", length: 0, data: "" };
chunks[i].length = glbBytes
.slice(offset, offset + 4)
.reduce((prev, curr, idx) => {
return prev + curr * 256 ** idx;
}, 0);
chunks[i].type = String.fromCharCode(
...glbBytes.slice(offset + 4, offset + 8)
);
chunks[i].data = chunkParser(
chunks[i].type,
glbBytes.slice(offset + 8, offset + 8 + chunks[i].length)
);
offset += 8 + chunks[i].length;
}

return chunks;
}
Insert cell
Insert cell
model = {
let model = chunks[0].data;
model.buffers.forEach((buffer, idx) => {
buffer["data"] = chunks[idx + 1].data;
});
return model;
}
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more