Important Notice: This is a repost of The Building Coder by Jeremy Tammik. Provided for the community.
Looking for AI-powered Revit automation? Check out ArchiLabs →

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 :-)

Appetiser Demos

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:

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 slide deck, 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:

Empowered by WEBGL and Three.js.

3D First – focus is currently on getting the 3D functionality out there first.

Currently supported formats:

Getting started – server side REST server and management workflow:

Here are the steps in more detail:

This whole sequence is demonstrated most effectively by the curl shell scripts available from GitHub.

Getting Started – Client Side JavaScript

Compatibility Requirements: the A360 Viewer requires a WebGL canvas compatible browser, such as:

Load URN in JavaScript Viewer.

Create a html5 page or web application.

Add references to CSS style sheet and JavaScript library:

  <link rel="stylesheet"
    href="https://developer.api.autodesk.com/viewingservice/v1/viewers/style.css"
    type="text/css">

  <script
    src="https://developer.api.autodesk.com/viewingservice/v1/viewers/viewer3D.min.js">
  </script>

JavaScript Client Side Extension

Questions and Answers:

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 auth
./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 readme for 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.

And remember:

Here are the demo links:

Finally, here is Philippe's new slick UI viewer nodeview/bootstrap sample:

Transcript of the Demo:
  1. startup chrome and shrink to get tabs
  2. all tabs are pre-setup in the same order as the email
  3. depends on audience which demos are shown
  4. some of the tabs do not come up right away
  5. figure out what is working beforehand, refresh and wait
  6. plm360 tab has not worked for the last week – kill it
  7. refresh some tabs now and then
  8. sap demo one needs several refreshes
  9. all tabs set up, check them all quickly, remove ones that don't work
  10. often the demo is used for a MeetUp and you want to set up quickly
  11. 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
  12. tractor has structure from mechanical design, metadata, often equally important as graphics
  13. everything is built on the api and can be changed
  14. go back to the full loader
  15. sometimes escape-escape to clear selection
  16. explode, mech design, assemblies, subassemblies, etc., and explode follows same order
  17. next demo is car with metadata to demo search, find batteries, wheels
  18. look at 2D drawings, not just 3D models
  19. move on to architectural samples, e.g. autodesk waltham office
  20. very large model, go to structure, look at plumbing, electrical
  21. this is a very large model, we use streaming to show something right away in viewer
  22. right click on an air handler, look at the details
  23. the id is included, and guid, for linking to the model and other databases for permanent links with external data
  24. go to office, see textures, chairs, focus on a table, round, third floor, data, guid
  25. good combination of quality and performance
  26. give me all the doors, for example
  27. next: embedding
  28. mostly you are building some kind of app
  29. here is an example of embedding in SharePoint
  30. explode, people like that
  31. here is a Revit house, look at the materials and textures
  32. you don't explode building, that is for mechanical, but let's do that here too
  33. we saw SolidWorks, inventor, Revit
  34. we support 50 file formats, both adsk and non-proprietary such as OBJ
  35. here is a Typepad blog embedding, and this can be achieved in ten minutes
  36. Facebook sample: this will be popular for students
  37. here is a Facebook page with the viewer embedded, the shaver
  38. the model is actually in DropBox, the viewer in Facebook
  39. we are looking at federated data with different sources
  40. currently mostly adsk servers
  41. look at the external info presented here coming from a db on azure
  42. here is other data from the model itself
  43. this is powerful stuff: help access and relate to metadata
  44. explode this too
  45. so far the samples were adsk
  46. here is a sample by a partner called coins in the uk, pilot partner
  47. this is just a test, a hospital
  48. show level 2, level 5, navigate, all columns, simply testing how to drive the view based on bits of metadata
  49. search all the glazing
  50. some underlying technology is three.js, open source library
  51. this viewer is very hackable, you can do interesting things
  52. revit ids for all glazing, to connect with external db
  53. oauth is our security system, used widely in the web
  54. here is another 2D sample
  55. we can select vectors, relate metadata
  56. I cannot yet select entities, we are working on that
  57. you can flip the 2D to 3D also
  58. this is all zero client
  59. I am showing on chrome, it works on Firefox, currently not on ie11
  60. we want to enable you to deliver this viewing everywhere you need it
  61. protected by password or open, however you need it
  62. on the mobile side, we are building sdks for iOS and android
  63. this stuff works on mobile devices, but still a bit clunky lacking a mouse
  64. here is a code sample showing how to hook it up with SAP
  65. the chair is from inventor
  66. double click to isolate
  67. here is the sap data, straight out of an sap enterprise database online
  68. change the pricing here to $500 in the sap data
  69. return to the graphics pane, back out, go back to 5468, and here is the new updated pricing, $500
  70. this demo was put together by Philippe in two days
  71. he does have prior experience, but it was one of his first viewer samples
  72. large scale urban planning, InfraWorks
  73. here is a pretty big model of an apartment block
  74. how do you get involved?
  75. url
  76. get started
  77. request access key
  78. documentation is partially there
  79. rest and js api
  80. supported file formats
  81. details on each api call
  82. security mechanism
  83. how to register and process a model
  84. here is everything you need to get started
  85. I hope this motivates you to do so
  86. last thing: here are the different file formats:
  87. url, spreadsheet?
  88. as a user, you do not have to worry about the format
  89. you push it up and we convert it automatically
  90. extra complications with compound models
  91. also if you have files with supporting files
  92. you need to know which file to push up
  93. federated data coming oauth2 is security mechanism
  94. source files are only stored temporarily, we do not keep the source file
  95. you should feel comfortable making the viewable public
  96. the source seed binary is destroyed
  97. easy
  98. zero client, rest based, js, html 5, use your favorite ui tools and libraries
  99. one question: business model
  100. we are currently thinking a certain number of free file uploads per month, e.g. x MB
  101. if you exceed the limit, it may cost, e.g. $100 for a couple of GB
  102. zero charge for viewing, view as much as you want, unlimited
  103. encourage people to stick 3D models everywhere, Facebook, Typepad, anywhere
  104. the web is pretty cool these days
  105. html 5 gibes some flashiness and interactivity, but it is still rather flat
  106. young folks are used to 3D games and are not impressed by a flat 2D world
  107. time to change that

Resources

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.