[Martin Splitt] WebVR with A-Frame

Presentation from GDG DevFest Ukraine 2017 - the biggest community-driven Google tech conference in the CEE.

Learn more at: https://devfest.gdg.org.ua

Transcript

2. Who’s talking? Head of Engineering @ Archilogic GDE Web Standards
3. Introduction
5. 799€
6. 99€
7. 5€
9. Can we even do 3D?
10. Can we VR? Detect Headsets Orientation / Position Expose controllers
11. WebVR 1.1
12. WebVR • Available on many devices & platforms
13. WebVR • Available on many devices & platforms • Open Standard (W3C)
14. WebVR • Available on many devices & platforms • Open Standard (W3C) • Lots of tooling & strong community
15. WebVR • Available on many devices & platforms • Open Standard (W3C) • Lots of tooling & strong community • Easier to create & share
16. Getting started var gl = document.querySelector('canvas').getContext('webgl') gl.viewport(0, 0, 250, 250) gl.clearColor(0.0, 0.0, 0.0, 1.0) gl.clear(gl.COLOR_BUFFER_BIT) var vertices = [ -0.5, -0.5, 0.5, -0.5, 0, 0.5 ] var vertexBuf = gl.createBuffer() gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuf) gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW) var program = gl.createProgram() var vs = gl.createShader(gl.VERTEX_SHADER) gl.shaderSource(vs, document.getElementById('vs').textContent) gl.compileShader(vs) gl.attachShader(program, vs) var fs = gl.createShader(gl.FRAGMENT_SHADER) gl.shaderSource(fs, document.getElementById('fs').textContent) gl.compileShader(fs) gl.attachShader(program, fs) gl.linkProgram(program) gl.useProgram(program) var vertexPosAttrib = gl.getAttribLocation(program, 'avPos') gl.enableVertexAttribArray(vertexPosAttrib) gl.vertexAttribPointer(vertexPosAttrib, 2, gl.FLOAT, false, 0, 0) //render loop requestAnimationFrame(function render() { gl.drawArrays(gl.TRIANGLES, 0, 3) requestAnimationFrame(render) })
18. glitch.com/~the-aframe-workshop
19. Show me what you built!
20. Twitter: @g33konaut / @archilogic3d Web: aframe.io 3d.io spaces.archilogic.com