3d web

1. 3d web
nh.js
2016-12-14
Kevin Vandecar
Forge Developer Advocate
kevin.vandecar@autodesk.com
@kevinvandecar

2. First…
 Sorry forYAP
 JavaScript Newbie
https://hackernoon.com/how-it-feels-to-
learn-javascript-in-2016-
d3a717dd577f#.nrssh54e6

3. Today the web is fairly “flat”…
Our goal is to help bring 3D to the web!

4. Why NOT use
3D on the web?!
 HTML 5 +WebGL enables it
 Lots of 3D content already available
 Different ways to make it “easier”
 http://lmv.rocks example

5. The time has come …

6. 3d web creative examples – http://www.3dwebfest.com
 http://edankwan.com/experiments/particle-love/
 http://osr.org/oms/
 http://madebyevan.com/webgl-water/
 http://www.visualiser.fr/Babylon/character/
 http://seemore.playcanvas.com/
 http://lights.helloenjoy.com/

7. 3d web commercial examples
 http://customiser.pennyskateboards.com/us/
 https://human.biodigital.com/index.html
 http://www.ford.com/cars/mustang/customizer

8. Why NOT use
3D on the web?!
 Industrial Equipment
 2D Sample #1
 3D Sample #1
 Real Estate
 2D Sample #2
 3D Sample #2
 Retail
 2D Sample #3
 3D Sample #3

9. How to get started? - Choose your weapon..

10. WebGL
 Easy?
 Not so much
 Requires serious graphics knowledge
 but very powerful, and lightweight
 https://www.khronos.org/webgl/
 Sample code from here:
WebGL Lesson 4 with pyramid removed…
http://learningwebgl.com
Tony Parisi
demo code

11. THREE.js
 Easier…
 A bit easier than pureWebGL
 Still requires graphics knowledge
 http://threejs.org/
 Sample code from here:
http://threejs.org/examples/#webgl_geometry_cube
demo code

12. But what about this?

13. Or these?

14. How to get started? - Choose your (easier) weapon..
(goo create)

15. How easy is it?
demo code

16. How to do 3D on the web really EASYily?
1. Obtain/Conversion of assets
2.ViewingTechnology
3.Viewing Experience

17.  Supporting ~ 50 2D and 3D vector formats
 https://developer.autodesk.com/en/docs/model-
derivative/v2/overview/supported-translations/
 Translate into SVF/F2D forViewer
 Can also be translated into other formats
Convert Asset - Forge Model Derivative REST API

18. Viewing technology - Autodesk Forge
Viewer – Client side
1. Register an App
2. Build your HTML / JS
3. Token Handling
4. View Content

19. Viewable Content
 The viewer uses a proprietary
light-weight viewable as an
SVF or F2D package
 The viewable is stored online
(or can be local if needed to be
offline)
 Viewable comes from Model
Derivative service

20. Forge Model Derivative REST API

21. Autodesk ForgeViewer - Examples
 https://a360.autodesk.com/viewer/
User-side use and easy way to evaluate theViewer capabilities
 http://lmv.rocks.autodesk.com/
NiceViewer overview
 http://viewer.autodesk.io/node/gallery/#/home
Uses Angular.js and Node.js
 http://calm-inlet-4387.herokuapp.com/
Example showing how to hook up data outside of viewer

22. What about mobile andVR/AR?
 WebGL is supported in
most mobile browsers
 But is that enough?
 3d is obviously key toVR/AR
 WebVR
 Hardware
 Processor and hardware
 Gestures
 Sensors

24. Autodesk ForgeViewer
…one option for 3D on the web…
 programming tools:
http://forge.autodesk.com
http://developer.autodesk.com
http://developer-autodesk.github.io
 try it out with your models:
https://360.autodesk.com/viewer

25. MobileVR Demo
 http://www.vrok.it/landing.html