Welcome to the Onshape forum! Ask questions and join in the discussions about everything Onshape.
First time visiting? Here are some places to start:- Looking for a certain topic? Check out the categories filter or use Search (upper right).
- Need support? Ask a question to our Community Support category.
- Please submit support tickets for bugs but you can request improvements in the Product Feedback category.
- Be respectful, on topic and if you see a problem, Flag it.
If you would like to contact our Community Manager personally, feel free to send a private message or an email.
Options
Shaders for three.js model viewer
christian_petty
Member Posts: 65 PRO
in General
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.
I’ve tried several custom shaders for three.js but none seem to be able to mimic that look exactly for models containing curvature.
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!
Thank you!
Christian Petty - Mechanical Design Engineer, Radian R&D
Tagged:
0
Comments
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:
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.