view and data api (web based viewer) autodesk vr initiatives...
TRANSCRIPT
@kevinvandecar
Autodesk Developer Network
http://www.autodesk.com/joinadn
Boston VR
Autodesk VR Initiatives� View and Data API (web based viewer)
� http://vr.autodesk.io and http://www.vrok.it
Autodesk VR Initiatives� Stingray (real-time game engine)
� https://creativemarket.com/apps/stingray/examples
Autodesk VR Initiatives� Autodesk live design
� http://autodesklivedesign.com
Autodesk VR Initiatives
� Autodesk University
� http://aupano.autodesk.com
Autodesk VR Initiatives
� Research
� AutoCAD -> Oculus http://adndevblog.typepad.com/autocad/2015/03/integrating-autocad-with-oculus-rift-dk2.html
� Maya -> Hololenshttps://www.youtube.com/watch?v=ywXWqNdVtjs
� Plug-in developers, too:
V-RAY Renderer
http://gfxspeak.com/2015/06/09/supports-oculus-samsung/
Fundamental Requirements?
�3D content and worlds
�Many tools and formats
�Accessibility
�#3dweb
Today the web is fairly “flat”…
Our goal is to bring 3D to the web!
#3dweb Examples
� http://madebyevan.com/webgl-water/
� http://www.iamnop.com/particles/
� http://www.visualiser.fr/Babylon/character/
� http://seemore.playcanvas.com/
� http://www.mountainsofmouthness.com/
� http://lights.helloenjoy.com/
Autodesk Large Model Viewer
http://lmv.rocks
http://viewer.autodesk.io/node/gallery/#/viewer?id=54464d47af600b5c0a872553
http://calm-inlet-4387.herokuapp.com/
WebGL
� Easy?
� Not so much
� but very powerful, and lightweight
� Sample code from here:
�WebGL Lesson 4 with pyramid removed…
�http://learningwebgl.com
�Tony Parisi
THREE.js
� Easier…
� A bit easier than pure WebGL
� Sample code from here:
http://threejs.org/examples/#webgl_geometry_cube
But what about this?
Or these?
WebGL Based tools and viewers
�Three.js http://threejs.org/
�Cl3ver https://www.cl3ver.com/
�Sketch fab https://sketchfab.com/
�Autodesk Large Model Viewer http://lmv.rocks/
What if 3D on the web was really EASY?� http://viewer.autodesk.io/node/gallery/#/viewer?id=55197673b2fb886006e6b954
View and Data web API services
� Translation
� large models into lightweight web viewable data
� Examples: Large Revit or Inventor models
� Supports 70± formats including others
� Viewing
� Uses WebGL on back end
� Easily hosted in HTML 5 browsers and clients
� Searching
� Includes meta data
� Can be searched later
� Storage
� We store it
The Stack
�Server-Side REST API
� Upload
� Translation
� Storage
� Viewables stored in the cloud
� No WebGL knowledge needed
� Client-Side JavaScript API
� Viewing - THREE.js based
� Embed in Webpage
� Various JavaScript APIs
Server-side RESTful API
� Register + create app
� Get access token
� Create bucket
� Upload file/object to bucket
� Request translation
� Access from client
� A quick-start guide is provided
�http://developer-autodesk.github.io/LmvQuickStart/
Client-Side JavaScript API
� reference the JS lib and style sheet
� make a Div tag with the viewer instance id
� token handler
� document properties
� create an instance of viewer
� A sample is provided
� ~ 60 lines of JavaScript + HTML
� https://github.com/Developer-Autodesk/View-and-Data-Barebone
Client-Side
JavaScript API
� On your page, Create a <div> tag with viewer id:
<div id="viewer"></div>
Client-Side
JavaScript API – Setup document and viewer instance
function initialize() {
var options = {
'document' :
'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6bXlidWNrZXQvc2t5c2NwcjEuM2Rz',
'env':'AutodeskProduction',
'getAccessToken': getToken,
'refreshToken': getToken,
};
var viewerElement = document.getElementById('viewer');
var viewer = new Autodesk.Viewing.Viewer3D(viewerElement, {});
Autodesk.Viewing.Initializer(options,function() {
viewer.initialize();
loadDocument(viewer, options.document);
});
}
Client-Side
JavaScript API
� A note about the Token:
function getToken() {
return “The Token”;
}
� You will need to write your own token service.
� The samples provide approaches.
Client-Side
JavaScript API – Load document / setup propertiesfunction loadDocument(viewer, documentId) {
// Find the first 3d geometry and load that.
Autodesk.Viewing.Document.load(documentId, function(doc) {
var geometryItems = [];
geometryItems =
Autodesk.Viewing.Document.getSubItemsWithProperties(doc.getRootItem(), {
'type' : 'geometry',
'role' : '3d'
}, true);
if (geometryItems.length > 0) {
viewer.load(doc.getViewablePath(geometryItems[0]));
}
}, function(errorMsg) {// onErrorCallback
alert("Load Error: " + errorMsg);
});
}
Virtual Reality on the web?
� https://www.google.com/get/cardboard/
Virtual Reality on the web?
� Using http://mozvr.com/ plugin
� Firefox nightly browser provides device connectivity for Oculus
� JoyToKey to allow joystick customization
Autodesk View and Data API
…one option for 3D on the web…
� Free programming tools:
�http://developer.autodesk.com
�http://developer-autodesk.github.io
� try it out with your models:
�https://360.autodesk.com/viewer
Autodesk View and Data API
additional resources
� http://the360view.typepad.com/blog/2015/02/autodesk-view-and-data-api-intro-overview.html
� tutorial style in addition to the other official resources
� http://the360view.typepad.com/blog/2015/04/3d-web-viewing-technologies-from-recent-meetups.html
� http://the360view.typepad.com/blog/2015/07/lmvdbg-learning-tool-for-view-and-data-api.html
� http://lmvdbg.iab.app42paas.com/
� Running instance of Debug tools
� http://the3dwebcoder.typepad.com/
� General cloud blog from ADN perspective.