Autodesk View and Data API: Rendering 3D in Your Browser

Before I dig in any more deeper to how to write apps with Autodesk’s APIs I’d like to show some demos and what problem(s) it’s solving.

Why we need to render 3D models in a browser

Autodesk is a computer aided design (CAD) software company. The company was founded with the product AutoCAD, still one of the most, if not the most influential CAD software. From then on it also offered many other software for more specific domain. E.g. Revit for architectural design, Inventor or Fusion for industrial design, Maya or 3ds Max for special effects in movies, etc.

If you’re not in this space, just think that most 3D designed objects, like the Herman Miller Aeron chair, or the San Francisco Bay Bridge, or Pixar movies, have some involvement with some Autodesk software. CAD is everywhere, it’s in buildings, it’s in computers, it’s in furniture, it’s in movies, it’s in every engineering student’s curriculum. In every single domain, there’s one or more different CAD software that caters exactly towards the industry for design. There’s a gazillion number of CAD software, from Autodesk and many other companies.

The problem with a gazillion of CAD software is that there are a gazillion of file formats they export to. When people in different domains have to work with each other, like in constructing a new building, the use case is often very clunky. When a new building is being constructed, there are architects that design the building, structural engineers to make sure the building won’t tip over, mechanical engineers who design the heating, ventilation and air conditioning (HVAC) system and plumbing system, electrical engineers that design the wiring, then there’s engineers that put everything together to make sure a electrical wires don’t go right through a water pipe. Every single team use a software of their choice that exports to different file formats.

There’s another problem: CAD software is very expensive. It’s in the thousand dollar per year range. So the person who created the design has no cheap way to give their work to their client, if they’re not looking at the same computer screen.

This is where the View and Data API comes in.

View and Data API renders 3D models using WebGL. It takes existing 3D models, translate that model into a bunch of JSON, which then can be rendered by a WebGL-enabled browser. Not only it translate the 3D rendering, but all the information associated with each component, just like in the original software.

Supported Formats:

Almost all Autodesk 3D model formats and most major non-Autodesk formats are supported. See Autodesk developer portal’s list of supported file formats.

Flow

view-and-data-flow
Here’s a minimal list of steps you’ll have to take to render your CAD model in the browser.
1. Authenticate
2. Create a bucket in Object Storage Service (OSS) for storage
3. Upload files to OSS bucket
4. Register that file for translation
5. Instantiate the viewer in the browser

Only use the API if you’d like to automate the above process. If you would like to manually upload the models and can live with embedding an iframe in your page to render your CAD model, feel free to use A360, a service Autodesk has built around the APIs.

REST APIs

Authentication, OSS, Reference and Viewing all fall under REST APIs. You can upload your file to OSS, register for translation, and download the viewable files.

Read the documentation for the REST APIs.

Demo



^interact with the 3D model! (If you don’t see anything, use a WebGL-enabled device/browser)

JavaScript APIs

There’s a whole range of JavaScript APIs you can play with the viewer. Read the documentation from Autodesk.

In this particular blog post I’ve instantiate the viewer with a custom element called lmv-viewer. I’ve also grabbed the viewer using document.querySelector("lmv-viewer") Here are just some functions I can call to manipulate the viewer.

Click on the buttons underneath the code and look at how the viewer changes at the top of the post.

Explode the model by a factor of 0.5:

viewer.viewer.explode(0.5)

Change the lighting on the viewer, where lighting is a number between 0 and 11:

viewer.viewer.setLightPreset(lighting)

Go to developer.autodesk.com to start using the View and Data API.

Additional Resources/Info

Here’s a Quick Start Guide to go through the REST APIs, if you don’t need to automate the process of uploading and translate the software.

I will be writing code snippets and samples in later posts. In the meantime, there’s a page with demos and samples to refer to.

Leave a Reply

Your email address will not be published. Required fields are marked *