31:T869,parseChunks = (buffer) => { const iterator = buffer[Symbol.iterator](); const BYTE = () => iterator.next().value; const VOXEL = () => ({ x: BYTE(), y: BYTE(), z: BYTE(), color: BYTE() }); const RGBA = () => ({ r: BYTE(), g: BYTE(), b: BYTE(), a: BYTE() }); const LONG = () => BYTE() + (BYTE() << 8) + (BYTE() << 16) + (BYTE() << 24); const array = (n, fn) => [...Array(n)].map(fn); const STR = (n) => array(n, () => String.fromCharCode(BYTE())).join(""); const DICT = () => new Map(array(LONG(), (_) => [STR(LONG()), STR(LONG())])); const BASE = () => ({ id: LONG(), attrs: DICT() }); const FRAME = () => array(LONG(), DICT)[0]; const TRN = () => ({ child: LONG(), layer: LONG(LONG()), transfo: FRAME() }); const MODEL = () => array(LONG(), BASE)[0]; const chunkParsers = { MAIN: () => {}, // only children chunks PACK: () => ({ nbModels: LONG() }), SIZE: () => ({ x: LONG(), y: LONG(), z: LONG() }), XYZI: () => ({ voxels: array(LONG(), VOXEL) }), RGBA: () => ({ palette: [{}, ...array(256, RGBA)] }), // color 0 reserved ? // extensions nTRN: () => ({ ...BASE(), ...TRN() }), nGRP: () => ({ ...BASE(), ids: array(LONG(), LONG) }), nSHP: () => ({ ...BASE(), model: MODEL() }), MATL: () => ({ ...BASE() }), LAYR: () => ({ ...BASE(), reserved: LONG() }), rOBJ: () => ({ attrs: DICT() }) // not documented: background, grid, fog, etc. }; const CHUNK = () => { const [type, dataLength, childrenLength] = [STR(4), LONG(), LONG()]; const chunkLength = 4 + 4 + 4 + dataLength + childrenLength; const parser = chunkParsers[type]; // if chunk type is unknown, the corresponding bytes are skipped const data = parser ? parser() : { data: STR(dataLength) }; const chunks = function* (rest) { while (rest > 0) { const { chunk: child, length } = CHUNK(); yield child; rest -= length; } }; const chunk = { type, ...data }; if (childrenLength) chunk.children = [...chunks(childrenLength)]; return { chunk, length: chunkLength }; }; STR(4); // "VOX " LONG(); // version number: 150 return CHUNK().chunk; }32:T80e,vox2scene = (buffer) => { const { children } = parseChunks(buffer); const chunks = children.reduce((chunks, chunk) => { const { type } = chunk; (chunks[type] = chunks[type] || []).push(chunk); return chunks; }, {}); const palette = chunks.RGBA ? chunks.RGBA[0].palette.map(({ r, g, b, a }) => [r, g, b, a]) : [[100, 100, 100, 255]]; let materials = []; const matlMap = new Map(); if (chunks.MATL) { // array of 256x{ ... } materials = chunks.MATL.map(({ attrs }) => ({ // https://docs.rs/vox-format/0.1.0/vox_format/types/struct.Material.html //_rough: float //_type: "_diffuse" | "_metal" | "_glass" | "_emit" //_weight: float [0, 1] //_rough: float //_spec: float //_ior: float //_att: float //_flux: float //_plastic rough: 0, metal: attrs._type == "_metal" ? 1 - attrs.weight : 0, emit: attrs._type == "_emit" ? attrs.weight : 0, transparent: attrs._type == "_glass" ? 1 - attrs.weight : 0, refract: 0 })); } // load voxel models const voxel = ({ x, y, z, color }) => [x, y, z, palette[color] ? color : 0]; const model = (voxels) => voxels.map(voxel); const models = new Map(chunks.XYZI.map((v, i) => [i, v.voxels.map(voxel)])); // build scene tree const scene = (root) => ({ models, palette, root }); if (!chunks.nTRN) return scene({ model: 0 }); const chunkMap = (chunks) => new Map(chunks.map((chunk) => [chunk.id, chunk])); const transfos = chunkMap(chunks.nTRN); const groups = chunkMap(chunks.nGRP); const shapes = chunkMap(chunks.nSHP); const splitV3 = (str) => str.split(" ").map((value) => +value); const recTree = ({ child: childId, transfo }) => { const child = groups.get(childId) || shapes.get(childId); const node = { translation: splitV3(transfo.get("_t") || "0 0 0") }; if (child.model) node.model = child.model.id; else node.children = child.ids.map((id) => recTree(transfos.get(id))); return node; }; return scene(recTree(transfos.get(0))); }33:T5c7,scene2vixel = (scene) => { const { models, palette, materials, root } = scene; const data = { xyz: [], rgb: [], rough: [], metal: [], emit: [], transparent: [], refract: [] }; const mRange = MultiRange(3); mRange.expand([0, 0, 0]); const addV3 = ([x1, y1, z1], [x2, y2, z2]) => [x1 + x2, y1 + y2, z1 + z2]; const recTree = (node, translation) => { const [tx, ty, tz] = addV3(translation, node.translation || [0, 0, 0]); if (node.children) { node.children.forEach((child) => recTree(child, [tx, ty, tz])); } else { const voxels = models.get(node.model); for (const [x, y, z, colorId, mtl] of voxels) { const [X, Y, Z] = addV3([x, y, z], [tx, ty, tz]); data.xyz.push(Y, Z, X); // Vixel uses y axis as height mRange.expand([X, Y, Z]); const [r, g, b] = palette[colorId]; data.rgb.push(r, g, b); /*if (mtl) { const material = materials.get(matlMap.get(mtl)); const { rough, metal, emit, transparent, refract } = material; data.rough.push(rough); data.metal.push(metal); data.emit.push(emit); data.transparent.push(transparent); data.refract.push(refract); }*/ } } }; recTree(root, [0, 0, 0]); const [[x1, x2], [y1, y2], [z1, z2]] = mRange.bounds(); const [width, height, depth] = [y2 - y1 + 1, z2 - z1 + 1, x2 - x1 + 1]; return { width, height, depth, ...data }; }34:T748,viewof voxUrl = { const kluchekUrl = (path) => `https://raw.githubusercontent.com/kluchek/vox-models/master/${path}`; const ephtracyUrl = (path) => `https://raw.githubusercontent.com/ephtracy/voxel-model/master/vox/${path}`; const models = new Map([ ["Street scene", kluchekUrl("%23street/%23street_scene.vox")], ["Tree house", kluchekUrl("%23treehouse/%23treehouse.vox")], ["Christmas scene", kluchekUrl("%23christmas/%23christmas_scene.vox")], ["Dog", kluchekUrl("%23dog/%23dog_scene.vox")], ["Odyssey", kluchekUrl("%23odyssey/%23odyssey_scene.vox")], [ "Phantom mansion (hard on CPU)", kluchekUrl("%23phantom_mansion/%23phantom_mansion.vox") ], ["T-Rex", ephtracyUrl("anim/T-Rex.vox")], ["Deer", ephtracyUrl("anim/deer.vox")], ["Horse", ephtracyUrl("anim/horse.vox")], ["Dragon", ephtracyUrl("scan/dragon.vox")], ["Tea pot", ephtracyUrl("scan/teapot.vox")], ["FF #1", ephtracyUrl("procedure/ff1.vox")], ["FF #2", ephtracyUrl("procedure/ff2.vox")], ["FF #3", ephtracyUrl("procedure/ff3.vox")], ["Maze #1", ephtracyUrl("procedure/maze.vox")], ["Maze #2", ephtracyUrl("procedure/maze2D.vox")], ["Menger", ephtracyUrl("procedure/menger.vox")], //["Nature", ephtracyUrl("procedure/natuer.vox")], ["Snow", ephtracyUrl("procedure/snow.vox")], ["Monument Valley #0", ephtracyUrl("monument/monu0.vox")], ["Monument Valley #1", ephtracyUrl("monument/monu1.vox")], ["Monument Valley #2", ephtracyUrl("monument/monu2.vox")], ["Monument Valley #3", ephtracyUrl("monument/monu3.vox")], ["Monument Valley #4", ephtracyUrl("monument/monu4.vox")], ["Monument Valley #5", await FileAttachment("monu10.vox").url()] //["Christmas tree", await FileAttachment("#christmas_tree.vox").url()] ]); return Inputs.select(models, { label: "Model" }); }35:[{"id":"68ef54338e9e100d5edd7b1c6d64cddd17740f84249227c947520db2aaa970750de671d70b4c8ee84b788c34fc7286b1c705c44adb3e13f5aa6f93b4866d3061","href":"https://static.observableusercontent.com/files/68ef54338e9e100d5edd7b1c6d64cddd17740f84249227c947520db2aaa970750de671d70b4c8ee84b788c34fc7286b1c705c44adb3e13f5aa6f93b4866d3061","name":"monu10.vox","type":"application/octet-stream","lastModified":1654508830870.101,"size":632495}] 2f:{"title":"Rendering .vox files with Vixel","cells":[{"id":0,"value":"# Rendering `.vox` files with Vixel","pinned":false,"hidden":false,"mode":"md"},{"id":274,"value":"## `.vox` file format","pinned":false,"hidden":false,"mode":"md"},{"id":1086,"value":"The [Magica Voxel](https://ephtracy.github.io) `.vox` [file format](https://github.com/ephtracy/voxel-model/blob/master/MagicaVoxel-file-format-vox.txt) and [extension](https://github.com/ephtracy/voxel-model/blob/master/MagicaVoxel-file-format-vox-extension.txt) describe a voxel-based 3D scene. \nThe [vox.js library](https://github.com/minimo/vox.js) parses `.vox` files but it is no longer maintained. \nThe following class diagram gives a simplified view of the extended file format.","pinned":false,"hidden":false,"mode":"md"},{"id":356,"value":"classDiagram`\n[VoxFile]<>-[MAIN]\n[MAIN]<>-children[Chunk]\n[Chunk]^-[MAIN]\n[Chunk]^-[SIZE|x,y,z]\n[Chunk]^-[XYZI|voxels]\n[Chunk]^-[RGBA|colors]\n[Chunk]^-[nTRN|nodeId;childId;hidden;layerId;translation;rotation]\n[Chunk]^-[nGRP|nodeId;childIds]\n[Chunk]^-[nSHP|nodeId;modelIds]\n[Chunk]^-[LAYR|layerId]\n[Chunk]^-[MATL|type;weight;rough;spec;ior]\n[Chunk]^-[rOBJ|attrs]\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":987,"value":"This notebook aims at providing a tool chain to load extended `.vox` files and render them using the [Vixel renderer](https://observablehq.com/@ehouais/hello-vixel), defining and using a reusable pivot data structure in the process.","pinned":false,"hidden":false,"mode":"md"},{"id":530,"value":"dot`digraph voxels {\n rankdir = \"LR\"\n node [\n fontname = \"Arial\"\n fontsize = 10\n shape = \"record\"\n ]\n edge [\n fontname = \"Arial\"\n fontsize = 10\n ]\n\n\".vox file\" -> \"chunk\\nparser\"\n \"chunk\\nparser\" [shape = \"circle\"]\n \"chunk\\nparser\" -> \"complete\\nchunk\\nstructure\" -> \"refactor\"\n \"refactor\" [shape = \"circle\"]\n \"refactor\" -> \"pivot\\nscene\\nmodel\"\n\n \"Vixel\\nserialized\\nstage model\" -> \"Vixel\\nrenderer\"\n \"Vixel\\nrenderer\" [shape = \"circle\"]\n \"Vixel\\nrenderer\" -> \"pathtraced\\n3D rendering\"\n\n \"pivot\\nscene\\nmodel\" -> \"scene2vixel\"\n \"scene2vixel\" [shape = \"circle\"]\n \"scene2vixel\" -> \"Vixel\\nserialized\\nstage model\"\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"md`## Chunk parser`","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"Let's implement an unopinionated straightforward chunk parser for the extended `.vox` file format.","pinned":false,"hidden":false,"mode":"md"},{"id":78,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":444,"value":"Then let's reorganize the parsed information into a structure both all-inclusive and efficient that would be well-suited as a pivot format for voxels experiments.","pinned":false,"hidden":false,"mode":"md"},{"id":451,"value":"A `Model` is a set of voxels, each having a relative position and possibly its own color and material.","pinned":false,"hidden":false,"mode":"md"},{"id":453,"value":"classDiagram`\n[Model]<>-[Voxel|x,y,z;colorID;materialID]\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"A `ColoredModel` is a model whose colors and materials have been specified, by mapping their ids to those of given color and material palettes. It allows reusing the same model with different colors and materials.","pinned":false,"hidden":false,"mode":"md"},{"id":472,"value":"classDiagram`\n[ColoredModel]->[Model]\n[ColoredModel]<>-[ColorMapping|modelID;paletteID]\n[ColoredModel]<>-[MaterialMapping|modelID;paletteID]\n[ColoredModel]->[ColorPalette]\n[ColorPalette]<>-[Color|colorID;r,g,b,a]\n[ColoredModel]->[MaterialPalette]\n[MaterialPalette]<>-[Material|materialID;type;weight;rough;spec;ior]\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"A `Scene` combines models by grouping, transformation (translation, rotation, symetry), and layering.","pinned":false,"hidden":false,"mode":"md"},{"id":369,"value":"classDiagram`\n[Scene]<>-*[Models]\n[Node|transformation]^-[Group]\n[Group]<>-*[Node]\n[Node]^-[ColoredModel]\n[Scene]<>-root[Node]\n[Scene]<>-*[Layer|visible]\n[Scene]<>-[ColorPalette]\n[Scene]<>-[MaterialPalette]\n[Node]->[Layer]\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":995,"value":"The following function takes a `.vox` data buffer, parses it , and refactor it into the pivot structure.","pinned":false,"hidden":false,"mode":"md"},{"id":716,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1002,"value":"And finally the following function converts the pivot scene data structure into the Vixel serialized scene format.","pinned":false,"hidden":false,"mode":"md"},{"id":550,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1007,"value":"We can finally showcase the pipeline using some public vox models.","pinned":false,"hidden":false,"mode":"md"},{"id":912,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1130,"value":"scene = {\n const file = await fetch(voxUrl);\n const buffer = new Uint8Array(await file.arrayBuffer());\n //return parseChunks(buffer);\n return vox2scene(buffer);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1159,"value":"You can rotate/zoom the scene.","pinned":false,"hidden":false,"mode":"md"},{"id":570,"value":"renderDynamic(scene2vixel(scene), {\n angle: -tau / 4,\n elevation: tau / 24,\n sun: { time: 10 },\n ground: { color: [0.1, 0.1, 0.1] },\n maxSamples: 150\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"import { classDiagram } from \"@ehouais/uml-class-diagrams-generation\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"import { renderDynamic } from \"@ehouais/hello-vixel\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1258,"value":"import { MultiRange } from \"@ehouais/utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"tau = 2 * Math.PI","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}