We've already received a lot of responses to the announcement of our first Autodesk Cloud Accelerator program (which takes place March 9th-20th in the Autodesk San Francisco office - autodeskcloudaccelerator.com). Unfortunately, a not insignificant number of these were questions along the lines of "what exactly does the View & Data API do?". That is understandable because the current information on our developer portal (developer.autodesk.com) assumes you know exactly what the API is and just want to use it. This blog post is a stopgap while we're working to fix that.
The executive summary ...
The View & Data API enables web developers to very easily display 3D (and 2D) models on a WebGL-enabled browser. If you've got a model you've created using some kind of design software, then you can probably display it on your website using this API.
Executives like pretty pictures, so here is a small example of the API capability at its most basic. This is just a simple iframe embed of a file uploaded to the Autodesk A360 service (which uses the View & Data API as a component):
Go ahead and play with it before you continue reading. This blog page is too narrow to display the default toolbar, so click the fullscreen button to start. Try the explode button and clicking around in the model to select various elements.
(If you can't see the embedded model above its probably because you're using an unsupported browser, or you've turned WebGL off. Try using Chrome instead).
Drilling a little deeper ...
The API comes in two parts -
- A (server-side) REST API that allows you to translate any of almost 100 design file formats into a common (JSON) file format. The data extracted from the original file is the geometry of every element in the model and the metadata that was attached to each of those model elements.
- A (client-side) JavaScript API that simplifies displaying and interacting with a model that has been processed by ther translator. The UI for the viewer defined by the API can be heavily customized, viewer actions can be automated (zoom, pan rotate, explode, etc), and callbacks are available for user-driven events (e.g. a mouse click on a specific model element, a change in camera position, etc).
This allows you to very easily add rich 3D, interactive content to your web page. All you need to know is a little bit of server-side programming (to send a file for translation and request an OAuth access token), and some basic JavaScript (to initialize and control the viewer). The viewer is built using the THREE.js library, so as well as the high level control provided by the Autodesk View & Data API, you also have access and control over the underlying THREE.js objects that define the model scene (meshes, textures, camera, etc).
Autodesk creates software used in the design industry, so most of the models I have are of machines and buildings, but you can pretty much display any model you have. For example, OBJ is one of the file formats supported (and over 100 other file types). The real power of the View & Data API is how easy it makes it for you to take a model you've created in almost any format and display it on your web page with no requirement for downloading plug-ins or applications. And if your model contains additional data (part numbers, materials, etc) then they are made available in your web-client too.
More advanced samples ...
Because the client-side API also allows access to the lower-level THREE.js (and WebGL) objects, there's very little you can't do with the viewer. We've posted a few samples on GitHub (and are hosting live versions so you can play with them before trying to set them up for your own environment). Here are links to a few live samples for you to play with. Watch the videos for a quick walkthrough of each sample.
Steampunk
Demonstrates customizing the viewer UI to create a 'steampunk' theme. Cllick on the buttons on the left to activate set camera viewpoints, or click/drag/scroll with your mouse inside the viewer window to move the camera around.
SAP
Demonstrates linking individual elements in a model to an external database (SAP in this case, but it could be any database you like). Pricing data from the SAP data is inserted into the property panel for each element when you select it. Watch the video to understand the featrures we've implemented.
Gallery
This is a general purpose sample that allows you to upload your own models and is also home for many of our client-side API samples, which can be activated and deactivated using our 'extensions' API. This is another one where you really need to watch the video to fully understand how cool it is. Sample extensions include adding new meshes to the model, moving parts, replacing textures, associative annotation, creating guided tours (view automation), tailoring the UI, data driven graphing, physics behavior, and more.
(Check out the q-bik model with the Physics extension. Although the View & Data API is a viewing engine rather than a gaming engine, its easy to hook up your model to the physics engine of your choice - Ammo.js in this case. Here's a short video).
Getting started ...
Want to experiment with the API yourself? Everything you need is available at developer.autodesk.com. Create an Autodesk Id, click the 'Request an Access Key' link and request an app key for the 'View & Data API'. (Don't also request a key for AutoCAD I/O, unless you want to wait for your request to be manually approved - they View & Data API keys are generated instantly, the AutoCAD I/O ones have to be approved). Once you have a key, I recommend you start learning the API by working through this interactive quickstart guide. Then follow the links from the developer portal to our samples poisted on GitHub, the API documentation, and the discussion forum where you can ask questions.
Subscribe
Comments