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.
Shaders for three.js model viewer
christian_petty
Member Posts: 82 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 - Mech. 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:
Senior Innovation Engineer at PTC OCTO | Get in touch: asmidchens@ptc.com
@alnis is my personal account. @alnis_ptc is my official PTC account.
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.
This code was super helpful for me to learn the key APIs. I wrote a python version that can extract the model to a web viewable glb, and was able to extract animations as well, check out https://github.com/glinscott/onshape_exporter.
@christian_petty Hi, I think I've built something similar to what you're doing here…
https://www.loom.com/share/a0fa188faead490ea10d43f20a12d888
@eca_elioac that is slick! I've always been intrigued by single file HTML/JS for sharing data/tools.
If the GLTFs are still too big, you could use fetch on the Onshape API to pull the triangles. It's probably trivial for public documents, but you'd have to handle credentials for private.
https://cad.onshape.com/glassworks/explorer/#/Part/exportPartGltf
I started working on my own version of this project just to get comfortable with the API and when I run a visualization on an assembly I found myself needing to do API calls to every part studio in the assembly to get the tessellation quality to work. This burned a bunch of my API budget and I was wondering if there's a better way to do it. Like hopefully a single API call to grab all the GLTFs in the assembly at decent quality as well as all the tessellated edges at the same quality. I'd settle for 2 calls. Gonna really put a damper on my application if it burns calls like they're candy.
Derek Van Allen | Engineering Consultant | Meddler@Derek_Van_Allen_BD I haven't used this but I see mesh quality options in the AssemblyExport endpoint.
https://cad.onshape.com/glassworks/explorer/#/Assembly/createAssemblyExportGltf
{ … "meshParams": { "angularTolerance": 0.001, "distanceTolerance": 0.001, "maximumChordLength": 0.01, "resolution": "FINE", "unit": "METER" }, … }