Shaders for three.js model viewer

christian_petty

I’m building a web app that can take a gltf export from Onshape and render it in 3D on a web page. 

I’d like to be able to mimic the wireframe/non-shaded view of Onshape (and most CAD systems).

I’ve tried several custom shaders for three.js but none seem to be able to mimic that look exactly for models containing curvature.

See examples:

https://discourse.threejs.org/t/rendering-wireframe-edges-similar-to-cad/56537/2

I’m assuming this is a limitation of mesh data, and that I need a more sophisticated renderer that can handle spline data. 

Has anyone else had success or is there some high level detail Onshape might be able to share on how that is implemented in-browser?

Thank you!

alnis_ptc

Hello Christian,

Not a direct answer, but I've been working on a Godot client for Onshape for fun, with a goal of getting the rendering to look pretty "Onshapey."

You may want to use the tessellatededges and tessellatedfaces endpoints to get face & edge data you can use more directly, instead of having to go through GLTF. You might also be able to adapt the shaders from this project to threejs. In short, there is a shader for the dark edges that only renders them if they are in front of the depth buffer generated by rendering the face/solid model. For the "hidden"/back edges, it just renders all of them, but before the "front"/"dark" edges.

There are still lots of bugs (e.g. with color space issues), but hopefully it's enough to help get you started.

Let me know if you have any questions about it.

Here is the source code: https://github.com/AlnisS-onshape/onshape-godot-client
Here are some sample images:

christian_petty

@alnis_ptc this is awesome. Thanks for sharing!

Long term it’d be super cool if Onshape had a dedicated embeddable viewer. I think my use case requires a customer renderer anyway since I’m adding animation, but this is a perfect starting point. 

Does this support hiding tangent lines?