Building Realtime VR on the web

Slide 1

Slide 1 text

Building Realtime VR on the web Frontend-Connect 2017

Slide 2

Slide 2 text

Hi ! I’m Srushtika @Srushtika https://srushtika.github.io n.srushtika@gmail.com

Slide 3

Slide 3 text

Virtual Reality

Slide 4

Slide 4 text

Virtual Reality means tricking your brain into believing something that’s not. even. real. !

Slide 5

Slide 5 text

Gatekeepers

Slide 6

Slide 6 text

Installs

Slide 7

Slide 7 text

Closed

Slide 8

Slide 8 text

Solution?

Slide 9

Slide 9 text

Image source: The Engineer’s cafe An open Virtual Reality platform with the advantages of the WEB

Slide 10

Slide 10 text

Open

Slide 11

Slide 11 text

Connected

Slide 12

Slide 12 text

Instant

Slide 13

Slide 13 text

IMPORT WEBVR POLYFILL SET UP CAMERA SET UP LIGHTS INITIALIZE SCENE DECLARE AND PASS CANVAS LISTEN TO WINDOW RESIZE INSTALL VR EFFECT INSTANTIATE RENDER CREATE RENDER LOOP PRELOAD ASSETS FIGURE OUT RESPONSIVENESS DEAL WITH META TAGS AND MOBILE

Slide 14

Slide 14 text

Hello A-Frame ! A-Frame is a web framework for building virtual reality (VR) experiences. As originators of WebVR, the Mozilla VR team developed A-Frame to be the easiest as well as the most powerful way to develop WebVR content.

Slide 15

Slide 15 text

How does it work?

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Virtual Reality

Slide 18

Slide 18 text

on the web Virtual Reality

Slide 19

Slide 19 text

on the web Virtual Reality Now let’s make it realtime

Slide 20

Slide 20 text

Live Demo goo.gl/6ecwid

Slide 21

Slide 21 text

deepstream.io

Slide 22

Slide 22 text

● Records ● Events ● RPCs ● Presence

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

LIFE IS REALTIME !

Slide 26

Slide 26 text

Building Realtime VR on the web Frontend-Connect 2017 @Srushtika n.srushtika@gmail.com Srushtika Neelakantam That’s all folks! Thankyou.