Welcome to the Onshape forum! Ask questions and join in the discussions about everything Onshape.

First time visiting? Here are some places to start:
  1. Looking for a certain topic? Check out the categories filter or use Search (upper right).
  2. Need support? Ask a question to our Community Support category.
  3. Please submit support tickets for bugs but you can request improvements in the Product Feedback category.
  4. 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.

Building an Onshape model viewer

alan_baljeualan_baljeu Member, User Group Leader Posts: 89 ✭✭
As my next step towards the creation of some amazing Onshape partner app, I want to figure out how to create a nice model view on a web page.  What is the best way to go with this?  Do you recommend a particular project from github as a reference?  Some third party control to integrate?
Creating knowledge-driven design automation software, for molds, etc.
www.virtualmold.com

Comments

  • NeilCookeNeilCooke Moderator, Onshape Employees Posts: 4,160
    This would be the best one using three.js https://github.com/onshape-public/app-gltf-viewer
    Director, Technical Services, EMEAI
  • NikNYCNikNYC Member Posts: 52 ✭✭
    Consider porting it to Babylon which is a mighty upgrade from ThreeJS.
  • alan_baljeualan_baljeu Member, User Group Leader Posts: 89 ✭✭
    @NeilCooke What is the deal with needing Heroku?  So far I haven't gotten into any service like Heroku.  Should I?
    Creating knowledge-driven design automation software, for molds, etc.
    www.virtualmold.com

  • NeilCookeNeilCooke Moderator, Onshape Employees Posts: 4,160
    @alan_baljeu you can run it off your own servers or any other, it's just that Heroku is a popular, low cost cloud hosting platform.
    Director, Technical Services, EMEAI
  • billy2billy2 Member, OS Professional, Mentor, Developers, User Group Leader Posts: 1,760 PRO
    edited May 2021
    @alan_baljeu you're going to need a server to serve up onshape content. This isn't something onshape does. Heroku is one of many online servers in the cloud. Stay away from hosted solutions like cpanel, wordpress or anything shared. You'll need root access to your server.

    Once you purchase a server, then you'll have to load up some server software. Basically you'll need to serve up a web server handling clients. I'd use nginx & nodejs with sockets.

    Once you're handling client requests, you'll have to serve up webgl with some kind of display package. ThreeJS has been around for a long time and Babylon is a more recent incarnation. Neither of these 2 will render OS content. You get to build this.

    Your server will ask Onshape for your data or if you want this to be a product, you'll have to register with the onshape app store to allow access to other people's data (this is the Oauth stuff which is included in the example code). In the past this data was STL and more recently it is now gltf. STL had limited part color information and no understanding of an assembly structure. gltf has more information contained in the format transfer but still doesn't understand the assembly structure. gltf won't give you a webpage that looks like onshape running in a browser, you'll have to build it. You'll have to ask onshape for the parts in an assembly and then build the structure in a client. You'll have to create shaders that look like Onshape in order for your website to look like onshape. There won't be a feature tree unless you build it. gltf is just a polyhedral transfer of geometry.

    @NeilCooke is your example running anywhere?




  • alan_baljeualan_baljeu Member, User Group Leader Posts: 89 ✭✭
    I looked into Babylon vs Three.  It seems Babylon is preferred but not universally.  They say it makes coding easier.  Hoping not much will be required to make this happen. 

    The functions I'll need are basically zoom/rotate with the mouse, and show/hide parts.  Also would like to display dimensions and labels.  Is any of that possible with these technologies?  Nothing stands out on the Three site about this.

    My dev environment is C#, which unfortunately means a bit of reworking server side code from the js example.  I don't imagine a line by line translation, just figure out what calls the gltf example is making and do the same.  And node just won't be the tool then.  Client-side js can probably be mostly unchanged?
    Creating knowledge-driven design automation software, for molds, etc.
    www.virtualmold.com

  • billy2billy2 Member, OS Professional, Mentor, Developers, User Group Leader Posts: 1,760 PRO
    edited May 2021
    I believe babylon is a microsoft product trying to capture this new world of webgl that's emerging. Webgl has a lot of traction right now and things are changing quickly. My problem with these libraries is that the client has to download them making whatever you're building slow. Also, many of these libraries (three.js) aren't modularized so you can't load what you're needing for your application.

    With three.js there's a orbital module that I had to re-write so it wouldn't stop rotating at 180 degrees. It was a little bit of work to match OS rotate behaviour. In OS, and most CAD, you can just keep rotating the model, with three.js it stops. Dimension between parts? you'll be writing that in webgl, I haven't seen a library with that included. Show/hide parts, assemblies? thats your data structure you've created that gets activated with a mouse over event to hide/show/ghost stuff.

    I'm not a windows guy so C# is a foreign language and I'm not sure how that azure thing is setup. I suppose you can map json objects to C# objects and manage the data in C#. This data management will be a significant task and needs to be written in a thoughtful manner to make your web viewer a success.

    Most of the work for an Onshape web viewer will be on the client side handling data packets from OS servers. OS uses Json and the challenge will be to ask for the assembly structure and replicating this structure inside the client. It parses fairly quickly and speed shouldn't be an issue. Then you'll have to associate this structure with the polyhedral part data sets that you've asked for separately. Viewing a large assembly will be a flurry of requests. Eventually you'll want to store the data locally and start running a cache system to make your viewer responsive.

    There's a lot to building a web viewer for OS and I think the guy that does it 1st will become popular. 

    On the server side, their example is using oauth which allows users to use your app with their own data. Another option is to log into your account and access your data without oauth, this is simple. With this approach, the user just shares his data with you. There's other ways to access data from OS servers that might be better for the average guy just browsing the internet. I don't think you want someone to have to login to use your viewer.

    If you getting something running, send me the url I'm interested in your progress.




  • alan_baljeualan_baljeu Member, User Group Leader Posts: 89 ✭✭
    Thank you for your contribution to the discussion.  I follow you quite well.  Based on your explanation, yes that is quite a bit of work, but also fairly doable.  To get the poly model from Onshape and cache it makes complete sense.    JSON is not a problem of course, that's just the language of the web api.  

    Regarding the last paragraph, are you suggesting my webserver logs into my account to access user model that the user shares via Onshape with me?  Not a route I had in mind, but of course that could work.  It's mainly a question of what people want to be viewed and by whom.  If it was your own company's models, you would have an OnShape account to login presumably.  If you want to make a model public, then I guess just the website could use my account.
    Creating knowledge-driven design automation software, for molds, etc.
    www.virtualmold.com

  • alan_baljeualan_baljeu Member, User Group Leader Posts: 89 ✭✭
    I have completed the instructions for app-gltf-viewer, got a page running on Heroku, and can add it as a tab in a document, but it errs from OnShape.

    The page reads:  Error while requesting document elements: TypeError: json is not iterable

    The offending code:
        // Get the Elements for the dropdown
        fetch(`/api/elements${window.location.search}`, { headers: { 'Accept': 'application/json' } })
           .then((resp) => resp.json())
           .then(async (json) => {
               for (const elem of json) {
                   .......
                }).catch((err) => {
              displayError(`Error while requesting document elements: ${err}`);
         });

    Any ideas?  Is this where to ask?
    Creating knowledge-driven design automation software, for molds, etc.
    www.virtualmold.com

  • billy2billy2 Member, OS Professional, Mentor, Developers, User Group Leader Posts: 1,760 PRO
    edited June 2021
    I'd look at $[err] on the heroku server console. It's throwing an error versus giving you data. I'd suspect the error is "who are you?". The error is weird because you haven't parsed json, I'd look at console.log resp and then look at resp.json() and see what they're doing in there. json is now an object in your code which is not what the servers return.

    There are more reasons why this won't work than why it will work. It's probably permissions  or ${window.location.search} is wrong.

    Get your permissions working with a simple call to onshape and make sure your authorized and getting through. Use the api explorer to make a simple call to the servers and then get your code to make the same call and get the same results. You'll never get anywhere until the permissions are correct.

    The api explorer is behind OS and gltf isn't documented very well. You'll have to console debug in your browser to see what OS is sending to the servers to get the gltf call and then compare with ${window.location.search}.

    Do you have the permissions correct? Have you gotten any data back from the servers?




  • alan_baljeualan_baljeu Member, User Group Leader Posts: 89 ✭✭
    Thanks for the response.  Anyway, the answer is I got a 500 error.  So there was no Json to scan.
    Creating knowledge-driven design automation software, for molds, etc.
    www.virtualmold.com

  • alan_baljeualan_baljeu Member, User Group Leader Posts: 89 ✭✭
    edited June 2021
    Okay finally have time to nail this down. 

    It appears the issue starts with 

    Access to XMLHttpRequest at 'https://appstore.onshape.com/api/storeEntrys/F3A4CERWJDBDUHRRUPKLCIQ6USWUTFAKN2OYW4A=' from origin 'https://cad.onshape.com' has been blocked by CORS policy: Request header field accept-language is not allowed by Access-Control-Allow-Headers in preflight response.

    That store key is a private store I created.

    Nope that's an irrelevant quirk in the way OS deals with appstore apps.  The real issue seems to be back to the 500.
    Creating knowledge-driven design automation software, for molds, etc.
    www.virtualmold.com

  • Ethan_KEthan_K Member, Onshape Employees Posts: 57
    Hi @alan_baljeu ,
    Please send the details of the 500 request and response to [email protected] . We can then try to understand what is causing this from the Onshape side.

    Cheers,
    -Ethan

  • billy2billy2 Member, OS Professional, Mentor, Developers, User Group Leader Posts: 1,760 PRO
    edited June 2021
    @alan_baljeu Ethan's very helpful and has helped me many times.

    I'd backup a bit and start at square one. Can you get the api-explorer to work and is it returning data? After that, run the call through your website. These are 2 different things. The api-explorer is hard to understand and then getting your put/get calls from your server working is even harder. 

    I've downloaded the https://github.com/onshape-public/app-gltf-viewer and it's really nice code. I'm currently switching it out from Heroku and porting it to a generic ubuntu server. 

    This is something new, I like it, I need to figure this out, I don't use this:
    const passport = require('passport');
    const OnshapeStrategy = require('passport-onshape');

    I just brute forced my headers and constructed them myself. It took a lot of time to get Onshape to talk back to me. The code I use is in a module that I wrote a long time ago and I haven't been in that module for a while. I believe "500's" are server errors and probably permission errors. 

    I'd strip your code down to a simple get call and get it working. Your site should be receiving exactly what the api-explorer returns.

    FYI The app-gltf-viewer is a bitch'n website and is a great example on how to get something up and running. The only thing it's missing is a react client. Adding react to this little server configuration would make it an awesome little 1st time server.





  • alan_baljeualan_baljeu Member, User Group Leader Posts: 89 ✭✭
    Yes billy2.  Using the api-explorer, the identical call documents/d/w/elements returns 200 and data.  I will get with ethan what the obstacle is.

    I don't understand what you mean by "app-gltf-viewer is a bitch'n website".  Do you mean the website you set up using that onshape-public code?  You say it's missing a react client.  Do you mean you want to write webpage front ends using react, and that isn't available with the provided code?  What advantage would it give you if it had this?
    Creating knowledge-driven design automation software, for molds, etc.
    www.virtualmold.com

  • billy2billy2 Member, OS Professional, Mentor, Developers, User Group Leader Posts: 1,760 PRO
    edited June 2021
    Alan please check your headers on your requests. Onshape won't tell you to "please add data-type to communication", it just says, 500 broken. I think this is your problem. Compare your headers with communications that are working. There's no debugging info sent back on the requests. You have to get them right. Check what the api-explorer is sending and make yours look like them.

    I do a lot of nodejs programming, app-gltf-viewer is a good starter for people setting up a server using nodejs. It's nicely done using some newer modules. I haven't looked at the client side code yet and wonder how sophisticated the rendered page will look. Do they supply the shaders to mimic onshapes look & feel? I'm hoping so, but I doubt it. Why did they put redis in there? To manage hide/show states? For persistence? Should you get data after every refresh? Did they supply a cache validation algorithm?

    Currently your fighting the server and getting data from Onshape. You'll get it soon and it'll seem easy. But this is only a small piece of the puzzle. Eventually you'll need to send something to the client. Client side code is a mess with javascript and I think react is becoming the preferred solution. Possibly C# fixes this.

    Three.js is pretty old and there needs to be something newer & better. I think it's coming as a module in react, angular or vue. There has to be a small army of programmers working on this somewhere. Maybe it's going to be C# & Babylon. This is the future of computing, this is the new frontier or wild west.

    There's a lot more to this than permissions. It'll get more fun, hang in there.


  • alan_baljeualan_baljeu Member, User Group Leader Posts: 89 ✭✭
    edited June 2021
    If you ever had time for a live session going through these things with me (not that I expect it in the slightest), it would save hours. Currently it's like I'm not learning a system, but rather a whole network of interconnected systems all at once: Onshape, oauth, their API, heroku, Angular, etc., etc.
    Creating knowledge-driven design automation software, for molds, etc.
    www.virtualmold.com

  • billy2billy2 Member, OS Professional, Mentor, Developers, User Group Leader Posts: 1,760 PRO
    edited June 2021
    PM me your phone number, I was thinking last night that we could compare headers. Alan, I wrote my permissions years ago and I don't think about it now. Currently I just think about the things I'm trying to do. You'll get there.

    It's new and it seems strange. A few months from now you'll look back and say that it wasn't that hard.


Sign In or Register to comment.