3D + the Web Platform

Transcript

1. 3D + The Web Platform
2. • WebGL • WebVR • WebAR • WebAssembly
3. @vladikoff
4. 2011 webgl 1.0 2009 webgl WG 2010 three.js 2017 webgl 2.0, WebAR WG, React VR 2013 shadertoy.com pixi.js 2014 WebVR WG, PlayCanvas 2016 WebVR 1.0 2012 sketchfab.com Future • WebAR 1.0 • three.js w/ webgl 2.0 • Cross-browser WebVR • Better tooling for 3D • VR / AR web browsers
6. Demo Whitestorm.js & nin
7. WebGL2
8. Demo webgl2
9. Virtual Reality
14. Augmented Reality
16. Demo ar1.vf.io
17. WebAssembly
18. Demo wasm Thanks to Kamaron Peterson for the amazing WASM
19. brew install cmake # Get the emscripten SDK git clone https://github.com/juj/emsdk.git cd emsdk ./emsdk install sdk-incoming-64bit binaryen-master-64bit ./emsdk activate sdk-incoming-64bit binaryen-master-64bit # Make "emcc" available in the PATH source ./emsdk_env.sh # Ready! emcc program.c
20. hacks.mozilla.org/category/webassembly webassembly.org
22. vf.io/3dweb References • Xbox Controller with Babylon.js: https://xboxdesignlab.xbox.com/en-CA/customize • WebGL 2 demo: https://playcanv.as/e/p/44MRmJRU/ • AFrame Gallery: https://aframe.io/examples/showcase/360-image-gallery/ • A-Painter: https://aframe.io/a-painter/ • Servo on Steam VR: https://www.youtube.com/watch?v=STm7VBBM26A • AR.js: https://github.com/jeromeetienne/AR.js • WASM 3d demo: https://github.com/sessamekesh/wasm-3d-animation-demo • Dubstep: https://www.youtube.com/watch?v=hmzvV--FwnM • WASM-init: https://github.com/shamadee/wasm-init • hacks.mozilla.org/category/webassembly • ninjadev tools: https://github.com/ninjadev/nin • whitestorm.js: https://github.com/WhitestormJS/whitestorm.js