3D web powered by

Augusto GoncalvesAPI Evangelist @ Autodesk

@augustomaia

The web is flat!So is the Earth!

Why live on a flat-web?Can I fit on

my car?

Does it fit my room?

What about the engine?

Enough! It’s time for 3DAnd make it easy, please!And mobile!With support for my models!

With real-world information!

There is the engine!

And information about the objects!

Yes, perfect fit!

The web is full of cool samples!• 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/

The e-commerce is getting onboard• http://customiser.pennyskateboards.com/us/ • https://human.biodigital.com/index.html • http://www.ford.com/cars/mustang/customizer

But what about developers?(repeat clapping hands!)

https://youtu.be/Vhh_GeBPOhs

Here it is!• WebGL: HTML5 + JavaScript

• Compatible with mostbrowsers

• And supported on mobile

Choose your weaponEasy

Customizable

File format

Library

Pure/raw

Give me some samples!• Three.js http://threejs.org/ • Cl3ver https://www.cl3ver.com/ • Sketch fab https://sketchfab.com/ • Autodesk View & Data http://lmv.rocks/

Try Autodesk V&D

Autodesk View & Data API• Back-end: REST API• Upload• Translation• Storage• Any language

(no WebGL equired)• Many formats

• Front-end: JavaScript• Three.js based• Embed on any page• Various APIs

IFC

OBJFBX

DXF

IGES

STEP

STL

Back-end: NodeJS• As usual:

npm install view-and-data(this package contains the REST API methods: upload, translate, etc.)

• Need a developer key & secrethttp://developer.autodesk.com

Front-end: AngularJSHTML5 + JavaScript• The viewer goes here

<div id="viewer"></div>

• JavaScriptautodeskviewer.com/viewers/2.2/viewer3D.min.js

• CSSdeveloper.api.autodesk.com/viewingservice/v1/viewers/style.css

Give me some sample code!• Check lot’s of samples at

https://github.com/Developer-Autodesk

• Gallery (NodeJS + AngularJS)http://viewer.autodesk.io/node/gallerySource: https://github.com/Developer-Autodesk/ng-gallery

• Get your key & secrethttp://developer.autodesk.com

17

June 15-16 at Fort Mason in San Francisco

Pre DevCon DevCon Post DevConJune 13-14 June 15-16 June 17-19

Accelerator

June 20-24

Come Early Stay Late

Thank you!@augustomaia

augusto.goncalves@autodesk.com http://developer.autodesk.com