As presented in Droidcon Tel Aviv 2017: http://il.droidcon.com

1. WebVR
Fast and easy VR for you and me
Uri Shaked
@UriShaked
Droidcon Tel Aviv
December 2017

2. @UriShaked
Meet The Speaker
• Google Developer Expert

3. @UriShaked
Meet The Speaker
• Google Developer Expert
• I love Robotics and Electronics

4. @UriShaked
Meet The Speaker
• Google Developer Expert
• I love Robotics and Electronics

5. @UriShaked
Meet The Speaker
• Google Developer Expert
• I love Robotics and Electronics
• I dance Salsa and play the Peruvian pan flute

6. @UriShaked
Meet The Speaker
• Google Developer Expert
• I love Robotics and Electronics
• I dance Salsa and play the Peruvian pan flute
• I work for BlackBerry

7. @UriShaked
Virtual Reality
• Immersive experience
• Fool our brains
• Headset, controllers & more

8. @UriShaked
Sometimes… too real

9. @UriShaked
VR in the past...

10. @UriShaked
VR in the past...

11. @UriShaked
VR Today

12. @UriShaked
Let's code!
Creating WebGL "Hello World":
let canvas = document.querySelector('canvas');
let gl = canvas.getContext('webgl');
gl.viewport(0, 0, 300, 150);
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
let vertices = [-0.5, 0.5, 0];
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices),
gl.STATIC_DRAW);
let vertShader = gl.createShader(gl.VERTEX_SHADER);
let prog = document.querySelector('#vertex').textContent;
gl.shaderSource(vertShader, prog);
gl.compileShader(vertShader);
let fragShader = gl.createShader(gl.FRAGMENT_SHADER);
let prog = document.querySelector('#frag').textContent;
gl.shaderSource(fragShader, prog);
gl.compileShader(fragShader);
let shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
gl.getAttribLocation(shaderProgram, 'coordinates');
gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(coord);
gl.drawArrays(gl.POINTS, 0, 1);
Complete code: https://codepen.io/urishaked/pen/PEpoYo

13. @UriShaked
Can we do better?
urish.org/vr

14. @UriShaked
Introducing… a-frame!

15. @UriShaked
Get 3D Models Quickly
Poly
3d.io plugin

16. @UriShaked
Meet the a-frame inspector
Alt+Ctrl+I

17. @UriShaked
Mixed / Augmented Reality

18. @UriShaked
WebARCore / WebARKit
Experimental Web Browser with AR APIs
Demo video
Link: http://homestaging-ar.glitch.me/
Another demo: http://webxmas.glitch.me/

19. @UriShaked
Key Takeaways
• WebVR + A-Frame provide easy way to get
started with 3D + VR
• AR is coming to the web… it's gonna be big!
• Go home, start hacking!

20. @UriShaked
Learn More...
https://urish.org

21. See you next time!
@UriShaked
Thank you !