Tweet
Tweet

Slide 1

Slide 1 text

3D + The Web Platform

Slide 2

Slide 2 text

• WebGL • WebVR • WebAR • WebAssembly

Slide 3

Slide 3 text

@vladikoff

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Demo Whitestorm.js & nin

Slide 7

Slide 7 text

WebGL2

Slide 8

Slide 8 text

Demo webgl2

Slide 9

Slide 9 text

Virtual Reality

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Augmented Reality

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Demo ar1.vf.io

Slide 17

Slide 17 text

WebAssembly

Slide 18

Slide 18 text

Demo wasm Thanks to Kamaron Peterson for the amazing WASM

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

hacks.mozilla.org/category/webassembly webassembly.org

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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