40:null 41:["$","title",null,{"children":"Trying box2d-wasm (+ box2d-wasm liquidfun branch) in Observable? | Dan Brickley | Observable"}] 47:Tf77,# Trying box2d-wasm (+ box2d-wasm liquidfun branch) in Observable? * Update Alex Birch figured it out. Here's another [scratchpad](https://observablehq.com/d/042cd6652f10a10b). Doc began as fork of Mike Bostock's Liquidfun notebook, goal to use the WASM build. In fact nothing of original used, got stuck at basics. Scratchpad for box2d-wasm (and box2d-wasm liquidfun variant) demo. Currently blocked at the "make wasm version work" level. - thanks to Alex Birch of @birchlabs, there is now a more up to date build of the Google Liquidfun Box2D codebase (which is Box2D plus particles, which can be used for fluids etc.). If you don't care about particles and Liquidfun, it's still a newer and hopefully wasm-faster version of Box2D for use with Javascript. - For particles, liquidfun version is in a liquidfun Github [branch of the box2d-wasm repo](https://github.com/Birch-san/box2d-wasm/tree/liquidfun). - "Compared to the existing box2d.js package: box2d-wasm aims to support Box2D v2.4.0+ and TypeScript." - [box2d-wasm comparison with box2d-js](https://github.com/Birch-san/box2d-wasm/blob/HEAD/README.comparison-with-box2d-js.md) (the liquidfun-wasm version was in a branch, presumably a slightly larger build) - AFAIK there is no direct API compatibility between this JS API for Box2D/Liquidfun and the previous builds, although the capabilities will be the same underneath. So once the wasm is working, it will need demos from the matching code rather than the existing demo. - [birchlabs repo](https://github.com/Birch-san/box2d-wasm/) - Birchlabs demos of the WASM version: - [Shapes and Rope](https://birchlabs.co.uk/box2d-wasm/demo/) - I'm not sure if this is just a .js build, I couldn't find a .wasm - [Fluid simulation](https://birchlabs.co.uk/liquidfun-wasm/) - this uses liquidfun particle APIs, and will try to use WebAssembly SIMD. - .wasm build URLs found from poking in demos: https://birchlabs.co.uk/liquidfun-wasm/box2d-wasm/Box2D.simd.wasm - [Lunar Survey](https://birchlabs.co.uk/lunar-survey/) (super cute) - .wasm: https://birchlabs.co.uk/lunar-survey/Box2D.wasm - attached to this notebook: use via FileAttachment("Box2D-BirchlabsWasmBuild.wasm") - other places box2d-wasm shows up: [openbase](https://openbase.com/js/box2d-wasm), [jsdeliver](https://www.jsdelivr.com/package/npm/box2d-wasm), [npmjs.com](https://www.npmjs.com/package/box2d-wasm), ... - [hackernews announcement](https://news.ycombinator.com/item?id=27996703) - FWIW @danbri made a test build of an earlier release available on CORS-friendly URL, https://danbri.org/2021/lf-wasm/demo/Box2D.wasm - However it seems we can attach the .wasm directly to the notebook which is easier for Observable usage. 3 examples currently attached. - For more background see: [google's repo](https://github.com/google/liquidfun) (older [2.3.0 box2d version](https://github.com/google/liquidfun/blob/master/liquidfun/Box2D/Changes.txt) from ~2015; can emscripten build a Box2D.js but not WASM builds) - [Box2D 2.4.1](https://box2d.org/documentation/) - new recent release of [Box2D](https://github.com/erincatto/box2d) - see also @danbri's [p5js](https://editor.p5js.org/danbri/sketches/hWpLvdEB5) sketch, which is roughly what we ought to be able to do here. ### About This Notebook - The bottom is untouched from the forked [original](https://observablehq.com/@mbostock/liquidfun) - in fact nothing works, and the top of this notebook is a bunch of failed scribbles where I tried to figure it out. - As far as I can tell, the issue is having the right kind of importsObject to pass to 'instantiate' or 'instantiateStream' functions. - It would make sense to focus on getting the new (birchlabs) stuff working for plain Box2D, before worrying about the liquidfun version. This is partly because i'm not sure which .wasm files (of those here) were built from the liquidfun branch - it might be only the one that requires SIMD. 48:T5b5,{ /* trying box2d wasms, gets: "TypeError: WebAssembly.instantiate(): Import #0 module="a" error: module is not an object or function" */ /* ios errors for the .simd wasm file, ios complains: "CompileError: WebAssembly.Module doesn't parse at byte 50: invalid opcode 253, in function at index 17" - perhaps because no SIMD? for Box2D-BirchlabsWasmBuild.wasm the osx and ios errors are: CompileError: WebAssembly.Module doesn't parse at byte 0: module doesn't start with '\0asm' using the older nonbirchlabs build we get: TypeError: import env:array_bounds_check_error must be an object simple.wasm ios error: "LinkError: import function imports:imported_func must be callable" */ var importObject = { imports: { // Box2d: ...??, // what goes here? foobar: function () { return false; } //imported_func: function (arg) { // console.log(arg); // } } }; const buffer = await FileAttachment("Box2D.simd.wasm").arrayBuffer(); // const buffer = await FileAttachment("Box2D-BirchlabsWasmBuild.wasm").arrayBuffer(); // const buffer = await FileAttachment("Box2D.wasm").arrayBuffer(); // trying another simpler wasm file // in case our box2d wasm files are odd // continued below //const buffer = await FileAttachment("simple.wasm").arrayBuffer(); const obj = await WebAssembly.instantiate(buffer, importObject); //console.log(obj.instance.exports); yield obj.instance.exports; }49:T2101,makeDebugDraw = { /** * Forked from Box2D.js * @see https://github.com/kripken/box2d.js/blob/f75077b/helpers/embox2d-helpers.js * @author dmagunov + Huy Nguyen + fork contributions from Alex Birch * @see https://github.com/kripken/box2d.js/blob/49dddd6/helpers/embox2d-html5canvas-debugDraw.js * @author dmagunov + fork contributions from Alex Birch * @license Zlib https://opensource.org/licenses/Zlib * License evidence: https://github.com/kripken/box2d.js/blob/master/README.markdown#box2djs * "box2d.js is zlib licensed, just like Box2D." * * @typedef {import('box2d-wasm')} Box2DFactory * @param {CanvasRenderingContext2D} ctx * @param {number} pixelsPerMeter * @param {typeof Box2D & EmscriptenModule} box2D */ //export const makeDebugDraw = (ctx, pixelsPerMeter, box2D) => { const { b2Color, b2Draw: { e_shapeBit }, b2Transform, b2Vec2, JSDraw, wrapPointer } = box2D; /** * to replace original C++ operator = * @param {Box2D.b2Vec2} vec * @returns {Box2D.b2Vec2} */ const copyVec2 = (vec) => new b2Vec2(vec.get_x(), vec.get_y()); /** * to replace original C++ operator *= (float) * @param {Box2D.b2Vec2} vec * @param {number} scale * @returns {Box2D.b2Vec2} */ const scaledVec2 = (vec, scale) => new b2Vec2(scale * vec.get_x(), scale * vec.get_y()); /** * @param {Box2D.b2Color} color * @returns {string} */ const getRgbStr = (color) => { const red = (color.get_r() * 255) | 0; const green = (color.get_g() * 255) | 0; const blue = (color.get_b() * 255) | 0; return `${red},${green},${blue}`; }; /** * @param {string} rgbStr * @returns {void} */ const setCtxColor = (rgbStr) => { ctx.fillStyle = `rgba(${rgbStr},0.5)`; ctx.strokeStyle = `rgb(${rgbStr})`; }; /** * @param {Box2D.b2Vec2[]} vertices * @param {boolean} fill * @returns {void} */ const drawPolygon = (vertices, fill) => { ctx.beginPath(); let first = true; for (const vertex of vertices) { if (first) { ctx.moveTo(vertex.get_x(), vertex.get_y()); first = false; } else { ctx.lineTo(vertex.get_x(), vertex.get_y()); } } ctx.closePath(); if (fill) { ctx.fill(); } ctx.stroke(); }; /** * @param {Box2D.b2Vec2} center * @param {number} radius * @param {Box2D.b2Vec2} axis * @param {boolean} fill * @returns {void} */ const drawCircle = (center, radius, axis, fill) => { ctx.beginPath(); ctx.arc(center.get_x(), center.get_y(), radius, 0, 2 * Math.PI, false); if (fill) { ctx.fill(); } ctx.stroke(); if (fill) { //render axis marker const vertex = copyVec2(center); vertex.op_add(scaledVec2(axis, radius)); ctx.beginPath(); ctx.moveTo(center.get_x(), center.get_y()); ctx.lineTo(vertex.get_x(), vertex.get_y()); ctx.stroke(); } }; /** * @param {Box2D.b2Vec2} vert1 * @param {Box2D.b2Vec2} vert2 * @returns {void} */ const drawSegment = (vert1, vert2) => { ctx.beginPath(); ctx.moveTo(vert1.get_x(), vert1.get_y()); ctx.lineTo(vert2.get_x(), vert2.get_y()); ctx.stroke(); }; /** * @param {Box2D.b2Vec2} vertex * @param {number} sizeMetres * @returns {void} */ const drawPoint = (vertex, sizeMetres) => { const sizePixels = sizeMetres / pixelsPerMeter; ctx.fillRect( vertex.get_x() - sizePixels / 2, vertex.get_y() - sizePixels / 2, sizePixels, sizePixels ); }; /** * @param {Box2D.b2Transform} transform * @param {number} sizeMetres * @returns {void} */ const drawTransform = (transform) => { const pos = transform.get_p(); const rot = transform.get_q(); ctx.save(); ctx.translate(pos.get_x(), pos.get_y()); ctx.scale(0.5, 0.5); ctx.rotate(rot.GetAngle()); ctx.lineWidth *= 2; ctx.restore(); }; /** {@link Box2D.b2Vec2} is a struct of `float x, y` */ const sizeOfB2Vec = Float32Array.BYTES_PER_ELEMENT * 2; /** * @param {number} array_p pointer to {@link Box2D.b2Vec2} * @param {number} numElements length of array * @param {number} sizeOfElement size of an instance of the array element * @param {typeof Box2D.b2Vec2} ctor constructor for the array element * @return {Box2D.b2Vec2[]} */ const reifyArray = (array_p, numElements, sizeOfElement, ctor) => Array(numElements) .fill(undefined) .map((_, index) => wrapPointer(array_p + index * sizeOfElement, ctor)); const debugDraw = Object.assign(new JSDraw(), { /** * @param {number} vert1_p pointer to {@link Box2D.b2Vec2} * @param {number} vert2_p pointer to {@link Box2D.b2Vec2} * @param {number} color_p pointer to {@link Box2D.b2Color} * @returns {void} */ DrawSegment(vert1_p, vert2_p, color_p) { const color = wrapPointer(color_p, b2Color); setCtxColor(getRgbStr(color)); const vert1 = wrapPointer(vert1_p, b2Vec2); const vert2 = wrapPointer(vert2_p, b2Vec2); drawSegment(vert1, vert2); }, /** * @param {number} vertices_p pointer to Array<{@link Box2D.b2Vec2}> * @param {number} vertexCount * @param {number} color_p pointer to {@link Box2D.b2Color} * @returns {void} */ DrawPolygon(vertices_p, vertexCount, color_p) { const color = wrapPointer(color_p, b2Color); setCtxColor(getRgbStr(color)); const vertices = reifyArray( vertices_p, vertexCount, sizeOfB2Vec, b2Vec2 ); drawPolygon(vertices, vertexCount, false); }, /** * @param {number} vertices_p pointer to Array<{@link Box2D.b2Vec2}> * @param {number} vertexCount * @param {number} color_p pointer to {@link Box2D.b2Color} * @returns {void} */ DrawSolidPolygon(vertices_p, vertexCount, color_p) { const color = wrapPointer(color_p, b2Color); setCtxColor(getRgbStr(color)); const vertices = reifyArray( vertices_p, vertexCount, sizeOfB2Vec, b2Vec2 ); drawPolygon(vertices, vertexCount, true); }, /** * @param {number} center_p pointer to {@link Box2D.b2Vec2} * @param {number} radius * @param {number} color_p pointer to {@link Box2D.b2Color} * @returns {void} */ DrawCircle(center_p, radius, color_p) { const color = wrapPointer(color_p, b2Color); setCtxColor(getRgbStr(color)); const center = wrapPointer(center_p, b2Vec2); const dummyAxis = new b2Vec2(0, 0); drawCircle(center, radius, dummyAxis, false); }, /** * @param {number} center_p pointer to {@link Box2D.b2Vec2} * @param {number} radius * @param {number} axis_p pointer to {@link Box2D.b2Vec2} * @param {number} color_p pointer to {@link Box2D.b2Color} * @returns {void} */ DrawSolidCircle(center_p, radius, axis_p, color_p) { const color = wrapPointer(color_p, b2Color); setCtxColor(getRgbStr(color)); const center = wrapPointer(center_p, b2Vec2); const axis = wrapPointer(axis_p, b2Vec2); drawCircle(center, radius, axis, true); }, /** * @param {number} transform_p pointer to {@link Box2D.b2Transform} * @returns {void} */ DrawTransform(transform_p) { const transform = wrapPointer(transform_p, b2Transform); drawTransform(transform); }, /** * @param {number} vertex_p pointer to {@link Box2D.b2Vec2} * @param {number} sizeMetres * @param {number} pointer to {@link Box2D.b2Color} * @returns {void} */ DrawPoint(vertex_p, sizeMetres, color_p) { const color = wrapPointer(color_p, b2Color); setCtxColor(getRgbStr(color)); const vertex = wrapPointer(vertex_p, b2Vec2); drawPoint(vertex, sizeMetres); } }); debugDraw.SetFlags(e_shapeBit); }; yield makeDebugDraw; }4a:Tfc9,canvas = { const timeStep = 1 / 60; const velocityIterations = 8; const positionIterations = 3; const maxVertices = 1 << 16; const renderer = new THREE.WebGLRenderer(); renderer.setClearColor(0xFFFFFF); renderer.setSize(width, height); renderer.setPixelRatio(devicePixelRatio); invalidation.then(() => renderer.dispose()); const geometry = new THREE.BufferGeometry(); geometry.addAttribute("position", new THREE.BufferAttribute(new Float32Array(maxVertices * 3), 3)); geometry.addAttribute("color", new THREE.BufferAttribute(new Float32Array(maxVertices * 3), 3)); const positions = geometry.attributes.position.array; const colors = geometry.attributes.color.array; const buffer = new THREE.LineSegments(geometry, new THREE.LineBasicMaterial({vertexColors: THREE.VertexColors})); const particleVertices = []; const particleResolution = 8; let currentVertex = 0; initCircleVertices(particleVertices, particleResolution); const camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000); camera.position.x = 0; camera.position.y = 1; camera.position.z = 2.5; camera.lookAt(0, 1, 0); const scene = new THREE.Scene(); scene.add(buffer); function insertLine(x1, y1, x2, y2) { let i = currentVertex; let threeI = i * 3; positions[threeI] = x1; positions[threeI + 1] = y1; positions[threeI + 2] = 0; i++; threeI = i * 3; positions[threeI] = x2; positions[threeI + 1] = y2; positions[threeI + 2] = 0; currentVertex += 2; } function insertParticleVertices(radius, x, y) { const vertices = particleVertices; for (let i = 0; i < particleResolution; ++i) { const i4 = i * 4; const x1 = vertices[i4] * radius + x; const y1 = vertices[i4 + 1] * radius + y; const x2 = vertices[i4 + 2] * radius + x; const y2 = vertices[i4 + 3] * radius + y; insertLine(x1, y1, x2, y2); } } function initCircleVertices(v, resolution) { const size = 2 * Math.PI / resolution; for (let i = 0; i < resolution; ++i) { const s1 = i * size; const s2 = (i + 1) * size; v.push(Math.cos(s1), Math.sin(s1), Math.cos(s2), Math.sin(s2)); } } function transformAndInsert(v1, v2, transform) { const tv1 = new b2.Vec2(); const tv2 = new b2.Vec2(); b2.Vec2.Mul(tv1, transform, v1); b2.Vec2.Mul(tv2, transform, v2); insertLine(tv1.x, tv1.y, tv2.x, tv2.y); } function transformVerticesAndInsert(vertices, transform) { for (let i = 1, n = vertices.length; i < n; i++) { transformAndInsert(vertices[i - 1], vertices[i], transform); } } function drawPolygonShape(shape, transform) { const i = currentVertex * 3; transformVerticesAndInsert(shape.vertices, transform, 0, 0, 0); const j = (currentVertex - 1) * 3; insertLine(positions[j], positions[j + 1], positions[i], positions[i + 1]); } function drawParticleSystem(system) { const particles = system.GetPositionBuffer(); for (let i = 0, n = particles.length; i < n; i += 2) { insertParticleVertices(system.radius / 2, particles[i], particles[i + 1], 3); } } function draw() { const world = machine.world; currentVertex = 0; for (let i = 0, n = world.bodies.length; i < n; i++) { const body = world.bodies[i]; const transform = body.GetTransform(); for (let j = 0, m = body.fixtures.length; j < m; j++) { drawPolygonShape(body.fixtures[j].shape, transform); } } for (var i = 0, n = world.particleSystems.length; i < n; i++) { drawParticleSystem(world.particleSystems[i]); } buffer.geometry.attributes.position.needsUpdate = true; // buffer.geometry.attributes.color.needsUpdate = true; renderer.render(scene, camera); } for (let time = 0; true; time += timeStep) { machine.world.Step(timeStep, velocityIterations, positionIterations); machine.joint.SetMotorSpeed(Math.cos(time) / 3 - machine.joint.GetJointAngle()); draw(); yield renderer.domElement; } }4b:T574,machine = { const world = window.world = new b2.World(new b2.Vec2(0, -10)); // Ugh, global. const bd = new b2.BodyDef(); const ground = world.CreateBody(bd); bd.type = b2._dynamicBody; bd.allowSleep = false; bd.position.Set(0, 1); const body = world.CreateBody(bd); const p1 = new b2.PolygonShape(); p1.SetAsBoxXYCenterAngle(0.05, 1, new b2.Vec2(2, 0), 0); body.CreateFixtureFromShape(p1, 5); const p2 = new b2.PolygonShape(); p2.SetAsBoxXYCenterAngle(0.05, 1, new b2.Vec2(-2, 0), 0); body.CreateFixtureFromShape(p2, 5); const p3 = new b2.PolygonShape(); p3.SetAsBoxXYCenterAngle(2, 0.05, new b2.Vec2(0, 1), 0); body.CreateFixtureFromShape(p3, 5); const p4 = new b2.PolygonShape(); p4.SetAsBoxXYCenterAngle(2, 0.05, new b2.Vec2(0, -1), 0); body.CreateFixtureFromShape(p4, 5); const jd = new b2.RevoluteJointDef(); jd.maxMotorTorque = 1e7; jd.enableMotor = true; const joint = jd.InitializeAndCreate(ground, body, new b2.Vec2(0, 1)); const psd = new b2.ParticleSystemDef(); psd.radius = 0.025; psd.dampingStrength = 0.2; const particleSystem = world.CreateParticleSystem(psd); const box = new b2.PolygonShape(); box.SetAsBoxXYCenterAngle(0.9, 0.9, new b2.Vec2(0, 1), 0); const particleGroupDef = new b2.ParticleGroupDef(); particleGroupDef.shape = box; particleSystem.CreateParticleGroup(particleGroupDef); return {world, joint}; }4c:[{"id":"3d35776f30fd871029e3eccf91bd5aa5bb2bd1e3c96704c7fcf2a807bd946befb27f47a138b0a4c6200478cdd75f0a653decf40e3c812b887c9bbe375aff2ffd","href":"https://static.observableusercontent.com/files/3d35776f30fd871029e3eccf91bd5aa5bb2bd1e3c96704c7fcf2a807bd946befb27f47a138b0a4c6200478cdd75f0a653decf40e3c812b887c9bbe375aff2ffd","name":"Box2D.wasm","type":"application/wasm","lastModified":1633629345548.175,"size":1460971},{"id":"aadbb9883de923663d112bd8b1e72101ecd0bb0e4a6dba2d36221dcd4db09999ea60b26687320e4d05383d0a446d831c3e74eb462235b8fdd5ccd36e0872e69a","href":"https://static.observableusercontent.com/files/aadbb9883de923663d112bd8b1e72101ecd0bb0e4a6dba2d36221dcd4db09999ea60b26687320e4d05383d0a446d831c3e74eb462235b8fdd5ccd36e0872e69a","name":"Box2D-BirchlabsWasmBuild.wasm","type":"application/wasm","lastModified":1633693403007.397,"size":293024},{"id":"f3729281bbc5e3607c10aab23de0819b2f03ed7f7d8f02caf2b0bb69fb2305057098232081a4a7082156d3124b505177036fae6d31b9e801cb4894f5e0cd7a1c","href":"https://static.observableusercontent.com/files/f3729281bbc5e3607c10aab23de0819b2f03ed7f7d8f02caf2b0bb69fb2305057098232081a4a7082156d3124b505177036fae6d31b9e801cb4894f5e0cd7a1c","name":"Box2D.simd.wasm","type":"application/wasm","lastModified":1633694323798.695,"size":266364},{"id":"5d7bbd82dc20a70e9d62fe12569a6ebf210d785dd8859b0512abb87a32e8021bf38be0d217154fc14b11b2dd8742cae912a0c4af0b28a9279b7104a60976ceb4","href":"https://static.observableusercontent.com/files/5d7bbd82dc20a70e9d62fe12569a6ebf210d785dd8859b0512abb87a32e8021bf38be0d217154fc14b11b2dd8742cae912a0c4af0b28a9279b7104a60976ceb4","name":"simple.wasm","type":"application/wasm","lastModified":1633707084737.928,"size":78}] 45:{"id":"0955dcf3d358ae79","slug":"failing-to-get-liquidfun-wasm-working-here","title":"Trying box2d-wasm (+ box2d-wasm liquidfun branch) in Observable?","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2021-10-07T17:01:05.474Z","update_time":"$D2021-10-10T12:19:11.279Z","view_time":null,"first_public_time":"$D2021-10-08T14:56:34.857Z","has_unpublished_edits":null,"fork":{"id":"088ea7abe03568a5","slug":"liquidfun","title":"LiquidFun","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":3,"starred":false,"owner":{"type":"team","id":"6aa75e0ed4c47ade","login":"mazeballsold","name":"Dan Brickley","avatar_url":"https://avatars-next.observableusercontent.com/c1e798353c1834a30de7804f61bbfd5116503c44db4803547a43228e89afc8cb","tier":"starter_2024","bio":"broken account, please ignore - migrating","following":false},"version":814,"publish_version":814,"role":null,"authored":false,"authors":[{"type":"individual","id":"44d3c304df1c5e78","login":"mazeballsold","name":"Dan Brickley","avatar_url":"https://avatars-next.observableusercontent.com/c1e798353c1834a30de7804f61bbfd5116503c44db4803547a43228e89afc8cb","tier":null,"bio":"broken account, please ignore - migrating","following":false}],"members":[{"type":"individual","id":"44d3c304df1c5e78","login":"mazeballsold","name":"Dan Brickley","avatar_url":"https://avatars-next.observableusercontent.com/c1e798353c1834a30de7804f61bbfd5116503c44db4803547a43228e89afc8cb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Trying box2d-wasm (+ box2d-wasm liquidfun branch) in Observable?","cells":[{"id":602,"value":"$47","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"## WASM files as notebook attachments\n\nI grabbed some .wasm files to try.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"oldishwasmbuild = {\n // this seems to show we can access the file, so no worries about build process from github, or publishing at a CORS-friendly URL.\n // this is an old build, probably best to use the others.\n const mywasmfile = await FileAttachment(\"Box2D.wasm\");\n yield mywasmfile;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"newishBirchlabsBuild = {\n const anotherwasmfile = await FileAttachment(\"Box2D-BirchlabsWasmBuild.wasm\");\n yield anotherwasmfile;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"liquidfunBox2DSIMDwasmBuild = {\n const andanother = await FileAttachment(\"Box2D.simd.wasm\");\n yield andanother;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"# Scraps of code and experiments that didn't work","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"*I think the problem is the 2nd argument to .instantiate(), ...*\n\n\n[instantiate](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate) docs\n>importObject Optional\nAn object containing the values to be imported into the newly-created Instance, such as functions or WebAssembly.Memory objects. There must be one matching property for each declared import of the compiled module or else a WebAssembly.LinkError is thrown.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"mutable foo = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"# simple.wasm first\n\nfrom [wasm docs](https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API)\n\nlooks like this is going better, cos we know what importObject should look like","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"simpleTest = {\n var importObject = {\n imports: {\n imported_func: (arg) => {\n console.log(arg);\n foo.push(12345);\n }\n }\n };\n\n const buffer = await FileAttachment(\"simple.wasm\").arrayBuffer();\n\n const obj = await WebAssembly.instantiate(buffer, importObject);\n\n yield obj; //.instance.exports;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"simpleTest.instance.exports","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"yield simpleTest.instance.exports.exported_func()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"{\n const obj = simpleTest.instance.exports;\n yield obj;\n\n //.instance.exports.exported_func();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"yield simpleTest.instance.exports.exported_func()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"### Other nopes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"helloworld = {\n const gobox = {}; //new Box2D();\n var foo;\n const headers = new Headers();\n headers.set(\"Content-Type\", \"application/wasm\");\n const response = new Response(\n (foo = await FileAttachment(\"Box2D.wasm\").arrayBuffer()),\n {\n headers: headers\n }\n );\n\n foo = WebAssembly.instantiateStreaming(response, gobox.importObject).then(\n (result) => {\n gobox.run(result.instance);\n }\n );\n\n yield;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"html`

Box2D in WebAssembly

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"b2dwasm = {\n let url = \"https://danbri.org/2021/lf-wasm/public/Box2D.wasm\";\n window.WebAssembly.instantiateStreaming(fetch(url)).then((object) => object);\n // object.instance.exports.add\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"Box2DFactory = {\n var imports = \"Box2D\";\n const response = await fetch(\n \"https://danbri.org/2021/lf-wasm/public/Box2D.wasm\"\n );\n const object = await window.WebAssembly.instantiateStreaming(\n response,\n (imports = {})\n );\n yield object;\n //return object.instance.exports.add;\n // yield response;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"Box2D = {\n var importObject = {\n imports: {\n //imported_func: function (arg) {\n // console.log(arg);\n // }\n }\n }; // all the functions it might want to import\n\n let url = \"https://danbri.org/2021/lf-wasm/public/Box2D.wasm\";\n const wasm = await fetch(\n \"https://danbri.org/2021/lf-wasm/public/Box2D.wasm\"\n ).catch(() => {});\n\n return (\n await (WebAssembly.instantiateStreaming\n ? WebAssembly.instantiateStreaming(fetch(url), importObject)\n : WebAssembly.instantiate(await wasm.arrayBuffer(), importObject))\n ).instance.exports;\n //const b2 = {};\n //for (const k in window) if (/^b2/.test(k)) b2[k.slice(2)] = window[k];\n //return b2;\n return;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"makeDebugDraw","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`# LiquidFun\n\nAdapted from the [LiquidFun testbed](http://google.github.io/liquidfun/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"b2 = {\n await require(\"https://google.github.io/liquidfun/testbed/liquidfun.js\").catch(() => {});\n const b2 = {};\n for (const k in window) if (/^b2/.test(k)) b2[k.slice(2)] = window[k];\n return b2;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"THREE = require(\"three@0.95/build/three.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 46:"$45:body"