Regl renderer mouse selection

[A Former User]

Hi all, I'm wondering if anyone has experience with regl and how best to implement mouse selection for regl entities? I'd like to add that to the jscad/react library. Basically a onClick prop for the Renderer component that would return a regl entity, which then could be tied to the original csg solid.

Any libraries, tools, gists or tips on getting 2d canvas position for 3d regl entities would be greatly appreciated!

[hrgdavor]

that is definitely question for regl folks
https://github.com/regl-project/regl/issues/233
https://github.com/regl-project/regl/pull/284

[A Former User]

Thanks for the code references... I've actually started to look into using three.js for rendering and jscad for modeling. There is a good react library already for three.js that includes built-in mouse select for meshes and geometries. I'm going to play around with it and see if it will be easier than maintaining my own. Here's the link: https://github.com/pmndrs/react-three-fiber

Another issue I've had is that react really slows rendering when the canvas is passed via react refs to regl. I think in order to get similar performance to jscad vanilla web renderer I will need to write my own react renderer, which is what the above mention library does.

Has any of the jscad maintainers thought about using three.js for rendering?

[hrgdavor]

Hi,
I have a working sample of threejs renderer for jscad
https://openjscad.nodebb.com/topic/235/threejs-integration
https://openjscad.nodebb.com/topic/247/three-js-integration-part2-threejscad

Also there is a demo of some speed improvements to a very useful slicer for 2d->3d cardboard
https://openjscad.nodebb.com/topic/257/how-to-run-jscad-from-another-application
http://3d.hrg.hr/jscad/three/threejscad.html?uri=examples/sqed/index.js

I am working on a web worker for jscad that would place both code evaluation and rendering into webworker. This way generated models do not need to go through postMessage serialization. Live demo of such worker based on regl is here: http://3d.hrg.hr/jscad/three/new_params_proposal/parameters.html#6

I intend to define set of API a jscad renderer should minimally support and then have 2 implementations:

• 1: regl(done),
• 2: threejs the resource I am loking into for making the the code: https://threejsfundamentals.org/threejs/lessons/threejs-offscreencanvas.html

regarding the https://github.com/pmndrs/react-three-fiber ... my experience is unless you intend to use their style of coding to generate fancy threejs scenes, it is just unnecessary overhead and extra hurdle if you want to do anything threejs related directly. This is especially the case if you want maximum performance from having threejs and code-eval in same webworker.
The issue of this extra layer with react-three-fiber can be seen in my effort to integrate jscad to cadhub:
https://github.com/Irev-Dev/cadhub/blob/kurt/411-demo-branch/app/web/src/components/IdeViewer/IdeViewer.tsx that I had to hack to get things working properly

  if(lastGroup && lastGroup != groupData){
    state.scene.remove(lastGroup)
    lastGroup.children.forEach(c=>c?.geometry?.dispose())
    // returning <primitive  object={groupData} /> does not add the new group to the scene
    // there is probably some useRef magic that would make this work, but I don't have time to reseach it
    /// FIXME - do this properly with useRef or other react magic
    if(groupData) state.scene.add(groupData)
  }
  lastGroup = groupData

  if(groupData) return <primitive object={groupData} />

If you have more experience with react, could you take a look at the code there and make the code work without my nasty hack ?

[A Former User]

@hrgdavor This is pretty awesome, I will check it out!

[A Former User]

Sadly I've decided to move everything out of jscad, the benefit that three.js adds in ease of development far outweighs jscad's superior modeling library (IMO). Just as a note, this is what I ended up using for my app (not yet released woodworking app):

Display, rendering, lighting, gestures, UI, etc:
https://github.com/mrdoob/three.js
https://github.com/pmndrs/react-three-fiber
https://github.com/pmndrs/drei

Boolean operations:
https://github.com/Jiro-Digital/three-csg-ts

With react-three-fiber I get react-like onClick, onHover, onDrag for individual objects, so it's easy to add handlers for moving, rotating, and resizing models. With three.js I get easy to use lighting, textures, camera and controls, as well as easy ways to implement things like line measurement/area calcs from mouse selections.

The main downside is that jscad handles boolean ops much better than the library I've ended up using. But so far it's working and I've only had to code vertices/indices for one custom object.

[hrgdavor]

@kenianbei sad to see you leave. I do have pieces of code that convert jscad output to threejs meshes and it is now working wihout hacks in cadhub and integrated into react-three fiber