jscad and WASM

[hrgdavor]

wondering if WASM would bring even more performance to jscad.

It is not clear cut at all (from what I gathered so far).

What is more, it could easily be less performant, but WASM is also about portability now and is all the rage....

One article that shows how difficult it is to outperforms js: https://surma.dev/things/js-to-asc/

A port of CSG to C# that could maybe used to compile as WASM: https://github.com/NoteCAD/Csg

[damien-otis]

After seeing ffmpeg run inside a web browser with WASM and get decent performance, it made sense to me to look up jscad and wasm, which led me to this idea post. I love OpenJSCad, but it's a bit slow, it could use some help from WASM.

[hrgdavor]

@damien-otis yeah, and there is hot new and faaast boolean library: https://github.com/elalish/manifold that I hope to integrate into jscad at some point.

[hrgdavor]

Integration work is starting for manifold

• branch https://github.com/hrgdavor/jscadui/tree/feature-manifold-3d
• demo https://3d.hrg.hr/jscad/manifold-test/#test.manifold.js

segments	jscad (ms)	manifold (ms)
32	25	3
64	221	8
96	805	12
128	2229	20
200	13206	42

Manifold is wasm, so it is crucial to clear used memory, and that is why https://manifoldcad.org faking a scripting enviroment like jscad V1 did (for maybe different reasons). manifold gives the script a mirror api that keeps track of used memory, and clears it after each run. That is neat for some cases, but is limiting for some advanced use-cases.

The script that is currently on the sample url does cleanup alone, but I imagine at lest for my self that I will want to have mor fine grained control, what to purge, and what to cache.

import * as jscad from '@jscad/modeling'
// import * as ManifoldModule from 'manifold-3d'

//const jscad = require('@jscad/modeling')
let ManifoldModule = require('manifold-3d')

function toMesh(manifold) {
  let manifoldMesh = manifold.getMesh()
  return { type: 'mesh', vertices: manifoldMesh.vertProperties, indices: manifoldMesh.triVerts }
}

if(!ManifoldModule.get){
  ManifoldModule.get = async function(){
    if (!ManifoldModule.cached) {
      let Manifold
      Manifold = await ManifoldModule()
      Manifold.setup()
      ManifoldModule.cached = Manifold
    }
    return ManifoldModule.cached.Manifold
  }
}

export async function main({
  // @jscad-params
  useManifold = true,
  segments = 32, // {type:'slider', min:10, max:192, live:true}
  radius = 60, // {type:'slider', min:51, max:80, live:true}
}) {
  
  if (useManifold) {
    const { cube, sphere } = await ManifoldModule.get()
    const box = cube([100, 100, 100], true)
    const ball = sphere(radius, segments)
    let result = box.subtract(ball)
    try {
      return [toMesh(result)]
    } finally {
      box.delete()
      ball.delete()
      result.delete()
    }
  } else {
    const box = jscad.primitives.cube({ size: 100 })
    const ball = jscad.primitives.sphere({ radius, segments })
    return jscad.booleans.subtract(box, ball)
  }
}