2b:null 2c:["$","title",null,{"children":"Rendering .vox files with Vixel | Philippe Deschaseaux | Observable"}] 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:{"id":"64001787293a5da1","slug":"rendering-vox-files-with-vixel","title":"Rendering .vox files with Vixel","thumbnail":"c0dc1e45e53a43aada15d44a3473fe45b2988522da8b699447a74e1e4c061c5e","access_level":"public","create_time":"$D2020-11-26T10:05:33.575Z","update_time":"$D2025-11-19T16:42:35.726Z","view_time":null,"first_public_time":"$D2021-05-24T17:55:42.275Z","fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"cf2a83be2759e071","login":"ehouais","name":"Philippe Deschaseaux","avatar_url":"https://avatars-next.observableusercontent.com/59e97a66cd990ae4d696ee6feb742004d97f024d9bc0db66fbc4b60357d0005f","tier":"starter_2024"},"version":1270,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7c1eebd3c1c51af1","login":"ehouais","name":"Philippe Deschaseaux","avatar_url":"https://avatars-next.observableusercontent.com/59e97a66cd990ae4d696ee6feb742004d97f024d9bc0db66fbc4b60357d0005f","tier":null}],"members":[{"type":"individual","id":"7c1eebd3c1c51af1","login":"ehouais","name":"Philippe Deschaseaux","avatar_url":"https://avatars-next.observableusercontent.com/59e97a66cd990ae4d696ee6feb742004d97f024d9bc0db66fbc4b60357d0005f","tier":null,"role":"editor"}],"comments":[{"id":"87c14fbeadc9c09b","reply_to_id":null,"content":"This implementation doesn't take materials and layers into account yet.","create_time":"$D2021-05-24T20:00:27.692Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"7c1eebd3c1c51af1","login":"ehouais","name":"Philippe Deschaseaux","avatar_url":"https://avatars-next.observableusercontent.com/59e97a66cd990ae4d696ee6feb742004d97f024d9bc0db66fbc4b60357d0005f","tier":null}},{"id":"073dfb3663599e1c","reply_to_id":null,"content":"`dot` is now in the global namespace so you can remove this import:\n\nhttps://observablehq.com/@observablehq/recommended-libraries","create_time":"$D2021-05-25T08:20:50.306Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"1d2d260f79b215b5","reply_to_id":"073dfb3663599e1c","content":"Thanks for the tip, Job !","create_time":"$D2021-05-25T08:32:05.896Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"7c1eebd3c1c51af1","login":"ehouais","name":"Philippe Deschaseaux","avatar_url":"https://avatars-next.observableusercontent.com/59e97a66cd990ae4d696ee6feb742004d97f024d9bc0db66fbc4b60357d0005f","tier":null}},{"id":"f0b3537e4016a239","reply_to_id":null,"content":"Would be nice if this resized ok on mobile","create_time":"$D2021-05-25T12:07:00.542Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}},{"id":"339377432eda8336","reply_to_id":"f0b3537e4016a239","content":"If you're talking about \"pinch\" events, I switched to the Hammer library for canvas input events, so it should be OK now. Sadly I cannot test it on mobile since I only have iOS devices and the Vixel renderer doesn't seem to work on iOS.","create_time":"$D2021-05-25T13:48:28.741Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"7c1eebd3c1c51af1","login":"ehouais","name":"Philippe Deschaseaux","avatar_url":"https://avatars-next.observableusercontent.com/59e97a66cd990ae4d696ee6feb742004d97f024d9bc0db66fbc4b60357d0005f","tier":null}},{"id":"4e8e6d4f51eb543c","reply_to_id":"f0b3537e4016a239","content":"oh did not know it had zoom. No I meant the fixed 800 pixel width means I only see the lefthandside on mobile. the global variable \"width\" will report the current pixel width of the screen, which is very handy if CSS width=100% is not possible.","create_time":"$D2021-05-25T17:05:56.912Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}},{"id":"d61480620887fa3f","reply_to_id":"f0b3537e4016a239","content":"Oh, Right. Fixed.","create_time":"$D2021-05-25T17:27:55.688Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"7c1eebd3c1c51af1","login":"ehouais","name":"Philippe Deschaseaux","avatar_url":"https://avatars-next.observableusercontent.com/59e97a66cd990ae4d696ee6feb742004d97f024d9bc0db66fbc4b60357d0005f","tier":null}},{"id":"d0f6f7607666d256","reply_to_id":"f0b3537e4016a239","content":"Awesome, works!","create_time":"$D2021-05-25T17:54:34.474Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}},{"id":"795e377b0076cdef","reply_to_id":"f0b3537e4016a239","content":"ah my eyes hurt, it get flasing lights everywhere","create_time":"$D2024-04-13T09:23:41.191Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"8cb2af93284ec212","login":"kreijstal","name":"Kreijstal","avatar_url":"https://avatars-next.observableusercontent.com/144042996880d03b1d71eea693abe9dd9944fa11df2d39a67ee64988b390173a","tier":null}},{"id":"4de1191218293ea6","reply_to_id":"f0b3537e4016a239","content":"What platform/browser are you using ? No problem on Mac/Chrome as far as I'm concerned.","create_time":"$D2024-04-13T12:40:56.621Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"7c1eebd3c1c51af1","login":"ehouais","name":"Philippe Deschaseaux","avatar_url":"https://avatars-next.observableusercontent.com/59e97a66cd990ae4d696ee6feb742004d97f024d9bc0db66fbc4b60357d0005f","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"8ec91f3aab9002ac","slug":"voxels","title":"Voxels","owner":{"id":"cf2a83be2759e071","login":"ehouais","name":"Philippe Deschaseaux"}},"type":"notebook","body":{"title":"Rendering .vox files with Vixel","cells":[{"id":0,"value":"# Rendering `.vox` files with Vixel","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":274,"value":"## `.vox` file format","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":283,"value":"md`## Chunk parser`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":428,"value":"Let's implement an unopinionated straightforward chunk parser for the extended `.vox` file format.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":78,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":453,"value":"classDiagram`\n[Model]<>-[Voxel|x,y,z;colorID;materialID]\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":458,"value":"A `Scene` combines models by grouping, transformation (translation, rotation, symetry), and layering.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":716,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":550,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1007,"value":"We can finally showcase the pipeline using some public vox models.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":912,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1159,"value":"You can rotate/zoom the scene.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":200,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":351,"value":"import { classDiagram } from \"@ehouais/uml-class-diagrams-generation\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":567,"value":"import { renderDynamic } from \"@ehouais/hello-vixel\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1258,"value":"import { MultiRange } from \"@ehouais/utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":571,"value":"tau = 2 * Math.PI","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"