three.js integration part2 (threejscad)

hrgdavor

Hello ppl, here is my second update regarding the three.js integration.

The effort now has a code-name: threejscad

I very much dislike functional style programming so I hope my explorations with threejs will give ideas for improvement in jscad as it is not very likely I would be able to bring those improvements to jscad codebase.

I appreciate all the effort that went into making jscad v1 and v2, it really is refreshing and smooth experience after using OpenSCAD. Generating a bit more complex model to STL would take ages in OpenSCAD so it quickly became annoying to work with.

I have tested most of the jscad examples that do not load additional resources, and have found an example where threejscad is faster.

jscad: colorCube.js
threejscad colorCube.js

click both urls and play with "Colorize Method" parameter to compare how long it takes to show the result in each instance.
Performance is gained by reusing the geometry so webgl ony needs to upload it in GPU once and then render it in different locations with different color.

Another example that intrigued me was parametric_butt_hinge.

jscad: parametric_butt_hinge
threejscad parametric_butt_hinge

You may notice that I have implemented my own generator for forms based on parameter definitions, and improved the slider a bit

it show the value
it has an additional option live=1 to render the scene while dragging the slider (I just love to do it when render is fast)

In this example jscad takes quite a long time to render (which is just fine and not too long when all you ned is to generate STL from it).
But this is a great example where rendering is too slow for animating and caching the shapes makes it smooooooth.

This optimization works by making a small change in original theparametric_butt_hinge code:

create cahce variable outside main method

let cache = {}

Generate cache key by serializing params object. To have the same key regardless of the view options, those options are set to fixed value before serialization. Generate new model only if cache key changes.

  const key = JSON.stringify({...params,m_flip_model:0,m_throw_angle:0})
  if(cache.key != key){
    cache.key = key
    cache.female = leaf(params, C_FEMALE)
    cache.male = leaf(params, C_MALE)
  }

This optimization currenty works in threejscad but not in jscad. The reason is that jscad runs the whole model file from scratch, but threejscad re-runs the main method, allowing this type of caching to work.

After making the jscad models work in three.js and loading this one, I just enjoyed dragging the "Throw angle" slider and seeing the hinge move instantly.