Examples do not seem to work properly

[yvanblanchard]

Hello,

Could you please indicate how to use it ? I tried to launch the HTML from examples folder, but nothing is displayed

Could you also tell me if this lib is able to render lattices geometries (with threejs) ?

Thank you

[maximeq]

Hello,

The easiest way;

npm install
npm run dev 

This should start a server with all examples, although opening the html files should have worked too...

Not sure what you mean exactly by lattices geometries, this library can polygonize implicit surfaces with certain conventions. So some lattices geometries may be represented implicitely and polygonized for standard rendering, it depends on their representation. Also, it may not be the best way to render those structures, depending on their shapes. Do you have a screenshot of what you need to render ?

[yvanblanchard]

Thank you When running 'npm run dev', I have following error:

[yvanblanchard]

I would like to render lattices with TPMS unit cells, using implicit way (with threejs) in order to save resources :

[maximeq]

That's strange. Remove node_modules folder, package.lock and re run: npm install

So yes, you should be able to render those. With the proper implicit function you can polygonize that with the appropriate level of detail.

If your structures are only made of Capsules shapes then you can also generate those shapes individually and merge in a single mesh, or use special shaders for direct ray tracing rendering, like the one used on this tool (this one is proprietary though, contact me privately if interested).

[maximeq]

In terms of performance, the benefit from an implicit polygonization over superposing capsules geometries will not be huged, if noticeable at all, as long as you merge those into a single Three.Geometry You could however get a nicer representation of the intersections (ie smoother)

[yvanblanchard]

ok thank you, it works fine now after running 'npm install' again.

Do you any example of rendering of multiple unit-cells arrangement (such as the one from the picture I sent you) ? Because I'm not sure that even using one single three.geometry (containing all the cells) that the webGL visualization pipeline will not 'hang' with hundreds of thousands cells (see below). That's why I'm looking for "implicit SBF" rendering systems.

[yvanblanchard]

My goal: import a 3MF description of lattices structure geometry (mainly described by cylinders/beams) in THREEJS, then render efficently in 3D, not with 'explicit' traditional triangles meshes.

[maximeq]

Yes, those kind of geometries may be overwhelming, but three.js is not the bottleneck here, the mesh is and it depends on the GPU you are using to render that.

This library does not provide any special rendering pipeline, it's just representation and polygonization.

So in the end, from the blobtree you would get a mesh, if it's above say 2M polygons, you are likely to hit limitations.

SDF rendering shaders would help, but you will probably face limitations here too if you have hundreds of thousands of cells.

The best technique I know of is the one used by CapsuleSketch where you can raytrace each cylinders, cones and spheres with a special shader hack running on only 12 triangles per shape. This one could probably be adapted and optimized to your usecase, although you would not be able to go under 2 triangles per shape, so say more than 1M shapes and you are likely to reach the limits.

[yvanblanchard]

ok thank you, it's clearer now !

[maximeq]

How many cylinders do you have in your model ?

[yvanblanchard]

I have some models between 100K and 1M ; but I have one with nearly 2M.. I don't know about the model of Formula1 brake pedal (picture).

I hope to find an open-source raytracing pipeline (GPU-based, threeJS) with capabilities to alter rendering when moving the mouse (avoiding 'hanging' effect when rotating model) for example..

[dioxygen-software]

Maybe you can find some raytracing engine, although in your kind of situation, in general a custom solution is better because you can build on specificities of your problem. For example here, you could render lines instead of cylinders when moving the mouse, then when the mouse stops you would render cylinders by batch progressively using the raytracing method I mentionned above.

If you find something, please post it here, it could interest people who stumble on this thread :)

[yvanblanchard]

Yes, you are probably right.

Notice that on forums, it seems that threejs is able to correctly render 10M of triangles (spheres primitives), with 'correct' hardware for 60fps: https://discourse.threejs.org/t/how-to-draw-spheres-more-than-1000000/19731/3 I will test rendering millions of cylinders, and see.

If it does not work, I will probably have a look at raymarching SDFs https://iquilezles.org/articles/raymarchingdf/

I will probably create soon my own github repo on this topic, with a link to it from this issue. Thanks again for your help.

[dioxygen-software]

As mentionned above, three.js will not be the bottleneck for a static object like yours, you just need to reduce the number of drawcalls then the GPU is the bottleneck.

It's difficult to give a number but in the forum you linked, the guy mentionning 20M is rendering billboards with impostors (this is the technique mentionned above use in Capsule Sketch, also it's a bit more fancy for cylinders or cones) and does not give details on his hardware. Also, point clouds are not as expensive as meshes, in our projects we usually found that for similar performances you can render 3 to 4 times as much points as you can render triangles, but many parameters can influence.

If you test with just millions of cylinders, please let us know the performance you get and on which model.

The problem with raymarching SDF in shaders is the definition of the object. It works very well with small procedural definitions like in the artistic shaders from Iq, but you can't put that much data in a shader, you need smart float texture accesses and complex 3D data structures.

Exciting problem anyway, let us know what you find !