View and Data API Presentation Material
I presented the
Autodesk View and Data API at the
Basel.js meetup yesterday evening.
Now I would like to share the material that I showed with you as well:
This should provide a handy snapshot and point of reference for my colleagues as well :-)
Before we even start talking about this, let's take a really quick look at a couple of samples that show what it is all about:
Frontloader tractor –
Zoom, rotate, isolate, focus, explode, embedded data.
Waltham office building –
Large building model, explore structure.
Link to external database, double click headrest, look at the linked SAP database data displayed in a separate property palette, edit the price in the database view at the bottom, and watch the properties update immediately.
Morgan steampunk –
Huge model with highly customised UI.
Introduction – aka Stephen's Spiel
Note that the viewer is currently still in preview mode.
The general public will be able to request developer keys and make complete use it within the next few weeks.
There was a time when everybody knew the earth was flat. They knew that if you sailed far enough, you'd fall off the edge of the world. But things change, and by the fifteenth century it was generally accepted that the earth was a sphere. In 1492, Christopher Columbus tried to take advantage of this 3D world to find a westerly trade route to the East Indies. Instead he discovered the Americas. European settlers quickly followed him, and a few hundred years and several genocides later we ended up here – in Silicon Valley.
And then we programmers invented another world – the worldwide web. And just like our ancestors, we all thought it was flat. If you moved your mouse far enough it would fall off the edge of the screen. A few people thought this new world shouldn't be flat, but 3D on the web was hard – you had to download a huge client-side executable, or you had to write a lot of code – so most web developers were happy with their two-dimensional webpages. Just think for a moment how a seller on Amazon or eBay shows you what their product looks like – you have to click through a set of photos taken from different angles. Why can't I see that product in 3D – and zoom it and pan it and rotate it? And maybe even explode it to see what it looks like on the inside?
But the world is changing. Today, all the important browsers support WebGL natively (so there's no need for customers to download a nasty plugin), and we have robust libraries like THREE.js that greatly simplify creating 3D web apps. For the first time, it’s not only possible for us to create 3D content – but we can be confident that our customers can actually view it.
But 3D still isn't that easy. You have to design your model somewhere and then you have to translate it into a format that your WebGL-enabled app can understand. And that's where Autodesk comes in. Our goal is to make 3D on the web so easy that it’s a no-brainer. We are launching our new 3D viewer API, which consists of a state-of-the-art zero-client, WebGL viewer and a REST API that allows you to translate and view almost any 3D file format. Let’s see what it can do.
Slide Deck and Notes
Here is the Autodesk Web Services View and Data API presentation
shown at the Basel.js meetup on July 30, 2014, based on work by Daniel and Cyrille with some additional notes by Jeremy:
The Challenge – Big Data, 2D and/or 3D: Autodesk Large Model Viewer.
Add interactive 3D viewing to your web application.
Single pipeline for integrated interactive viewing, search and data: extend it, find it, see it.
The same pipeline feeds search and viewing.
Two APIs available:
- REST Server and Management API
- Authenticate using oAuth 2.0
- Upload and translate files
- Manage access rights
- Viewing technology based on Three.js
- Embed and control viewer in HTML5 applications
- Implement user interaction, access documents, manipulate objects, camera...
3D First – focus is currently on getting the 3D functionality out there first.
- 3D Functionality
- Select, view properties, zoom, pan, orbit, isolate, focus, highlight
- Access to underlying 3D model, e.g. meshes and materials
- 2D Functionality
- Raster image – zoom and pan only
- Later: Vector graphics soon – select, view properties, zoom, pan, isolate, focus, highlight
Currently supported formats:
Getting started – server side REST server and management workflow:
- Register an account and create an application.
- Use the authentication API to get an access token. The access token is required for all other API calls.
- Create a bucket in which to store your objects.
- Upload an object to the bucket and request that it be translated into a "bubble" for the viewing service.
- At this point you have a uniform resource name (URN) for your object, which you pass to the viewing client.
Here are the steps in more detail:
- Step 1: Register and Create an Application
- List of Registered Applications
- Step 2: Obtain an Access Token
- Step 3: Create a Bucket
- Bucket Policy:
- Transient: persists for 24 hours
- Temporary: persists for 30 days
- Persistent: persists until deleted
- Step 4: Upload a Model File
- Response to Upload Request
- Determine the URN from the upload response: the URN is the Base64 encoded id.
- Step 5: Register the Model for Viewing
- Check Progress: you can start viewing the object as soon as some parts have a 'complete' status
- Retrieve Thumbnail Image
This whole sequence is demonstrated most effectively by the curl shell scripts available from GitHub.
Compatibility Requirements: the A360 Viewer requires a WebGL canvas compatible browser, such as:
- Internet Explorer 11.0+
- Chrome 18.0+
- Opera 15.0+
- Firefox 4.0+
- Chrome on Android
Create a html5 page or web application.
- Model hierarchy
- Metadata and properties
- Camera / Zoom / Navigation
- Access to geometry, textures...
Questions and Answers:
- Rendering optimisations
- [Q] Is this for anyone and everyone? – [A] Yes, sure, not just large complex models; everybody's models, cf. 3D printing, SAT, anything.
- [Q] Other use cases? – [A] Any 3D model; every situation where you can replace a bunch of stupid 2D photos or flat plans by something more real and interactive.
Curl Shell Scripts for Authorisation, Model Upload and Translation
Look at Cyrille's
curl shell scripts that
provide a very practical, efficient, interactive and direct method to step through the entire authorisation, upload and translation process.
Here is an example of uploading, translating and viewing a Revit model test.rvt:
./viewerAPI bucketCreate my_bucket_name
./viewerAPI upload samples/test.rvt
./viewerAPI register test.rvt
./viewerAPI registerProgress test.rvt
./viewerAPI registerProgress test.rvt
./viewerAPI thumbnail test.rvt
sudo ./viewerAPI html test.rvt
Please refer to the GitHub
a more detailed description.
Demo Script and Demos Embedded Everywhere
The viewer can be embedded in almost any web application.
The sample applications presented here include embedding in blogs, Facebook, TypePad, Sharepoint, mechanical models, AEC (architectural, engineering, construction), HVAC (mechanical equipment in buildings), Infraworks (infrastructure and GIS), database integration (SAP), etc.
Here are some notes from a demo held by Jim Quanci in the end of June:
Remember ahead of time that you need decent Internet access.
Attached is a recording where I walked through a typical View and Data web service internal demo including the URLs I used.
Note I have all these set-up as default tabs in chrome, as some of these take a minute to load.
These are also in the order I show them, starting with simple and getting gradually more complex.
- Zero client
- WebGL (and three.js for the 3D web fluent)
- Industry standard architecture – REST and JSON
- Streaming – so big models
- Integrates easily with external data
- 60+ file formats supported – so developers and customers avoid the messiness of having to worry about file formats – including support for lots of general industry formats like OBJ, FBX, DWG, SketchUp – and competitive formats like SWX, CATIA, NX, etc.
Here are the demo links:
Finally, here is Philippe's new slick UI viewer
Transcript of the Demo:
- Integration of multiple js UI libs
- Bootstrap, jquery layout, slickgrid, jsTree
- Load/upload of 2D and 3D models
- Save/load of named views in MongoDB
- startup chrome and shrink to get tabs
- all tabs are pre-setup in the same order as the email
- depends on audience which demos are shown
- some of the tabs do not come up right away
- figure out what is working beforehand, refresh and wait
- plm360 tab has not worked for the last week – kill it
- refresh some tabs now and then
- sap demo one needs several refreshes
- all tabs set up, check them all quickly, remove ones that don't work
- often the demo is used for a MeetUp and you want to set up quickly
- start with the tractor, not embedded, full screen canvas, zero client, html5, pure chrome, api is js, standard, mostly open source, pretty big model, source model is 2 GB
- tractor has structure from mechanical design, metadata, often equally important as graphics
- everything is built on the api and can be changed
- go back to the full loader
- sometimes escape-escape to clear selection
- explode, mech design, assemblies, subassemblies, etc., and explode follows same order
- next demo is car with metadata to demo search, find batteries, wheels
- look at 2D drawings, not just 3D models
- move on to architectural samples, e.g. autodesk waltham office
- very large model, go to structure, look at plumbing, electrical
- this is a very large model, we use streaming to show something right away in viewer
- right click on an air handler, look at the details
- the id is included, and guid, for linking to the model and other databases for permanent links with external data
- go to office, see textures, chairs, focus on a table, round, third floor, data, guid
- good combination of quality and performance
- give me all the doors, for example
- next: embedding
- mostly you are building some kind of app
- here is an example of embedding in SharePoint
- explode, people like that
- here is a Revit house, look at the materials and textures
- you don't explode building, that is for mechanical, but let's do that here too
- we saw SolidWorks, inventor, Revit
- we support 50 file formats, both adsk and non-proprietary such as OBJ
- here is a Typepad blog embedding, and this can be achieved in ten minutes
- Facebook sample: this will be popular for students
- here is a Facebook page with the viewer embedded, the shaver
- the model is actually in DropBox, the viewer in Facebook
- we are looking at federated data with different sources
- currently mostly adsk servers
- look at the external info presented here coming from a db on azure
- here is other data from the model itself
- this is powerful stuff: help access and relate to metadata
- explode this too
- so far the samples were adsk
- here is a sample by a partner called coins in the uk, pilot partner
- this is just a test, a hospital
- show level 2, level 5, navigate, all columns, simply testing how to drive the view based on bits of metadata
- search all the glazing
- some underlying technology is three.js, open source library
- this viewer is very hackable, you can do interesting things
- revit ids for all glazing, to connect with external db
- oauth is our security system, used widely in the web
- here is another 2D sample
- we can select vectors, relate metadata
- I cannot yet select entities, we are working on that
- you can flip the 2D to 3D also
- this is all zero client
- I am showing on chrome, it works on Firefox, currently not on ie11
- we want to enable you to deliver this viewing everywhere you need it
- protected by password or open, however you need it
- on the mobile side, we are building sdks for iOS and android
- this stuff works on mobile devices, but still a bit clunky lacking a mouse
- here is a code sample showing how to hook it up with SAP
- the chair is from inventor
- double click to isolate
- here is the sap data, straight out of an sap enterprise database online
- change the pricing here to $500 in the sap data
- return to the graphics pane, back out, go back to 5468, and here is the new updated pricing, $500
- this demo was put together by Philippe in two days
- he does have prior experience, but it was one of his first viewer samples
- large scale urban planning, InfraWorks
- here is a pretty big model of an apartment block
- how do you get involved?
- get started
- request access key
- documentation is partially there
- rest and js api
- supported file formats
- details on each api call
- security mechanism
- how to register and process a model
- here is everything you need to get started
- I hope this motivates you to do so
- last thing: here are the different file formats:
- url, spreadsheet?
- as a user, you do not have to worry about the format
- you push it up and we convert it automatically
- extra complications with compound models
- also if you have files with supporting files
- you need to know which file to push up
- federated data coming oauth2 is security mechanism
- source files are only stored temporarily, we do not keep the source file
- you should feel comfortable making the viewable public
- the source seed binary is destroyed
- zero client, rest based, js, html 5, use your favorite ui tools and libraries
- one question: business model
- we are currently thinking a certain number of free file uploads per month, e.g. x MB
- if you exceed the limit, it may cost, e.g. $100 for a couple of GB
- zero charge for viewing, view as much as you want, unlimited
- encourage people to stick 3D models everywhere, Facebook, Typepad, anywhere
- the web is pretty cool these days
- html 5 gibes some flashiness and interactivity, but it is still rather flat
- young folks are used to 3D games and are not impressed by a flat 2D world
- time to change that
Here is an overview of the main resources:
As said, please note that the View and Data API is still in pilot program mode right now, so you cannot yet apply for an API key.
We expect that to come within the next week or two.
There you are.
That just about covers what we have right now.
I look forward to seeing wat you can do with all this once you have access to the developer keys.
Good luck, much success, and have fun!
Holiday and Vacation
By the way, tomorrow is the first of August, a public holiday in Switzerland, and I am on vacation next week, so I hope this will help keep you entertained in the meantime.
The public developer key access may even be live by the time I return.
I'll keep my fingers crossed for that.