VR Hero

Engaging Virtual Reality with HTML

Alex Castillo

@castillo__io

Uri Shaked

@UriShaked

Before start:

Meet The Speakers - Alex

  • Google Developer Expert for Web Technologies
  • Passionate about the human brain
  • Involved in Angular, React and NeuroTech communities

@castillo__io
@UriShaked

Meet The Speakers - Uri

@castillo__io
@UriShaked

Inspiration

@castillo__io
@UriShaked

Virtual Reality

  • Immersive experience
  • Fool our brains
  • Headset, controllers & more

@castillo__io
@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);

@castillo__io
@UriShaked

Introducing… a-frame!

@castillo__io
@UriShaked

Initial scene:

<center>

<h1>Welcome 😻</h1>

</center>

<img src="https://cdn.arstechnica.net/wp-content/uploads/2016/04/Android-VR-HTC-Vive2.jpg"

style="max-width: 100%" />

Can we do better?


https://urish.org/vr

@castillo__io
@UriShaked

The game controller

Myo Armband

  • Gesture Control
  • Bluetooth
  • Web Sockets

@castillo__io
@UriShaked

The game controller

Getting started

@castillo__io
@UriShaked

Let's Play!

It's live coding time!

@castillo__io
@UriShaked

Where to get more 3D Content?

@castillo__io
@UriShaked

Key Takeaways

  • WebVR + A-Frame provide easy way to get started with 3D + VR
  • Combined with Angular, RxJS and Firebase you get a powerful, collaborative experience
  • Go home, start hacking!

@castillo__io
@UriShaked

Source Code

@castillo__io
@UriShaked

See you next time!

@UriShaked

Thank you !

@castillo__io

VR Hero - ng-conf 2018 - Google Slides