2d:null 2e:["$","title",null,{"children":"X3DOM Interpolator Buffer Converter | Andreas Plesch | Observable"}] 33:T86c,interpolatorHTML = { let container = document.createElement('Group'); xmlNodes.forEach( (node, i) => { container.innerHTML += "\n "; container.appendChild( interpolatorFromIndexedNode( node, i) ); }); container.innerHTML += "\n"; return container function interpolatorFromIndexedNode ( node, i) { const bytesPerComponent = buffer.buffer.BYTES_PER_ELEMENT; let interpolator = document.createElement( node.tagName); interpolator.setAttribute('buffer', bufferFile.name); interpolator.setAttribute('duration', '1'); interpolator.innerHTML += "\n "; interpolator.appendChild( createBufferAccessor( 'SAMPLER_INPUT', //type 0, //view 0, //offset typedArrays[i][0].length,//count 1, //components per value 5126 // float )); interpolator.innerHTML += "\n "; interpolator.appendChild( createBufferAccessor( 'SAMPLER_OUTPUT', //type 1, //view 0, //offset typedArrays[i][1].length / 3,//count 3, //components per value 5126 // float )); interpolator.innerHTML += "\n "; interpolator.appendChild( createBufferView( buffer.offsets[i*2] * bytesPerComponent //byteOffset )) interpolator.innerHTML += "\n "; interpolator.appendChild( createBufferView( buffer.offsets[i*2+1] * bytesPerComponent //byteOffset )) interpolator.innerHTML += "\n "; return interpolator } function createBufferAccessor( bufferType, view, byteOffset, count, components, componentType ) { const accessor = document.createElement('BufferAccessor'); accessor.setAttribute('bufferType', bufferType); accessor.setAttribute('view', view); accessor.setAttribute('byteOffset', byteOffset); accessor.setAttribute('count', count); accessor.setAttribute('components', components); accessor.setAttribute('componentType', componentType); return accessor } function createBufferView( byteOffset ) { const view = document.createElement('BufferView'); view.setAttribute('byteOffset', byteOffset); return view } } 34:[{"id":"55ea7dc049cac961b461ab52b53f4b5f29bee749c5607be64dfa2f98afecae5e5117106923d99b509d0be8843f40095f2ad67f608c07d35cd6270b930bc9b920","href":"https://static.observableusercontent.com/files/55ea7dc049cac961b461ab52b53f4b5f29bee749c5607be64dfa2f98afecae5e5117106923d99b509d0be8843f40095f2ad67f608c07d35cd6270b930bc9b920","name":"coordinateInterpolator.html","type":"text/html","lastModified":1642556724892.476,"size":13402509}] 31:{"id":"eb813cab9896c30d","slug":"x3dom-interpolator-buffer-converter","title":"X3DOM Interpolator Buffer Converter","thumbnail":"ecf7677992f1b9078dcba0503f44294c1c43d78a9b792b54edd604e6d9f3ab0d","access_level":"public","create_time":"$D2022-01-19T01:45:24.892Z","update_time":"$D2022-01-19T02:35:29.281Z","view_time":null,"first_public_time":"$D2022-01-19T02:35:49.287Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"3a7167e5e638bcd0","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":"starter_2024"},"version":324,"publish_version":324,"role":null,"authored":false,"authors":[{"type":"individual","id":"171053d51d09c7fc","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":null}],"members":[{"type":"individual","id":"171053d51d09c7fc","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"X3DOM Interpolator Buffer Converter","cells":[{"id":0,"value":"# X3DOM Interpolator Buffer Converter\nConverts X3D interpolators to binary buffer storage.\n\nIt finds all Interpolators, then\n\nconverts the key per Interpolator to a Float32Array, then\n\nconverts the keyValue to a Float32Array.\n\nFinally, it merges those to an output binary file, and constructs the markup for the Interpolators.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"## The input x3d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":310,"value":"viewof x3dxml = Inputs.file({label: \"x3d xml file\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"x3dfile = (x3dxml || FileAttachment(\"coordinateInterpolator.html\")) .xml()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"xmlNodes = x3dfile.querySelectorAll('CoordinateInterpolator')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"The x3d file has ${xmlNodes.length} Coordinate Interpolators. There are ${\n[...xmlNodes].map((element, index) => [ \n index,\n parseMFFloat(element.getAttribute('key')).length,\n parseMFVec3f(element.getAttribute('keyValue')).length\n].join(\"-\")).join(\", \")\n} keys and keyValues.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":134,"value":"## The buffer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"typedArrays = [...xmlNodes].map( e => [ keyFromElement(e), keyValueFromElement(e) ] )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"buffer = {\n let offsets = [];\n let offset = 0;\n const total = typedArrays.reduce( (a, v) => {\n offsets.push(offset, offset + v[0].length);\n offset += v[0].length + v[1].length;\n return a + v[0].length + v[1].length\n }, 0);\n const buffer = new typedArrays[0][0].constructor(total);\n typedArrays.forEach( (v, i) => {\n buffer.set(v[0], offsets[i*2]);\n buffer.set(v[1], offsets[i*2+1]); \n });\n return {\"buffer\":buffer, \"offsets\":offsets}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"bufferFile = new File([buffer.buffer], \"interpolatorBuffer.bin\", {type: \"application/binary\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"## The buffer interpolator\nThe interpolator has the form:\n\n```html\n\n \n \n \n \n\n```\n\nWe use zero byte offsets for the accessors and two buffer views with the appropriate offsets, one for each accessor.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"## Output to use","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":279,"value":"### The markup for the x3d Interpolators","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":247,"value":"```html\n${interpolatorHTML.innerHTML}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":283,"value":"### Download for the binary buffer file","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":261,"value":"viewof saveButton = Inputs.button(\"Download buffer file\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"saveButton ? saveAs(bufferFile) : md`click to download`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"## helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"function keyFromElement( e ) {\n const key = parseMFFloat(e.getAttribute('key'));\n return new Float32Array(key)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"function keyValueFromElement( e ) {\n const keyValue = parseMFFloat(e.getAttribute('keyValue'));\n return new Float32Array(keyValue)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"md`## libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"import {x3dom} from \"@andreasplesch/x3dom\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"MFFloat = x3dom, window.x3dom.fields.MFFloat","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"parseMFFloat = x3dom, window.x3dom.fields.MFFloat.parse","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"parseMFVec3f = x3dom, window.x3dom.fields.MFVec3f.parse","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"saveAs = { \n await require('file-saver@2.0.5/dist/FileSaver.min.js');\n return window.saveAs\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"