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