kevin.vandecar@autodesk.com

@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.