Srushtika Neelakantam
Mozilla Rep, Techspeaker,
Campus Advisory Committee
member
@Srushtika
Co-Author
Learning
Web-based
Virtual Reality
Slide 3
Slide 3 text
Virtual Reality
Slide 4
Slide 4 text
VR HEADSETS
Slide 5
Slide 5 text
Friction in VR Ecosystems
Slide 6
Slide 6 text
Friction in VR Ecosystems
Gatekeepers
Slide 7
Slide 7 text
Friction in VR Ecosystems
Gatekeepers Installs
Slide 8
Slide 8 text
Friction in VR Ecosystems
Gatekeepers Installs Closed
Slide 9
Slide 9 text
WebVR
An open Virtual Reality platform with the advantages of
the WEB
Slide 10
Slide 10 text
WebVR
Open
An open Virtual Reality platform with the advantages of
the WEB
Slide 11
Slide 11 text
WebVR
Open Connected
An open Virtual Reality platform with the advantages of
the WEB
Slide 12
Slide 12 text
WebVR
Open Connected Instant
An open Virtual Reality platform with the advantages of
the WEB
Slide 13
Slide 13 text
Browser APIs that enable WebGL rendering to headsets
and access to VR sensors
https://w3c.github.io/webvr/
Slide 14
Slide 14 text
Support
https://webvr.rocks
Firefox
Nightly
Chromium
(Experimental)
Samsung
Internet
Mobile
Polyfill
Chrome
For Android
Oculus
Carmel
Microsoft
Edge
Slide 15
Slide 15 text
Too hard to create WebVR
experiences?
Slide 16
Slide 16 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 METATAGS AND MOBILE
Slide 17
Slide 17 text
Introducing
A-Frame
A declarative framework that allows you to
get unlimited access to Javascript and
three.js while limiting the code to
just HTML
Slide 18
Slide 18 text
A-Frame
It wraps the power of WebGL in HTML
custom elements, so creating a high
performance VR experience becomes
extremely simple.
Slide 19
Slide 19 text
.d3.js. .Vue.js. .React. .Redux.
Angular. .jQuery.
Works with everything !
Slide 20
Slide 20 text
Hello Metaverse
by Ada Rose Edwards
aframe.io
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Hello World !
Slide 23
Slide 23 text
Hello World !
Slide 24
Slide 24 text
How it looks in the browser:
Slide 25
Slide 25 text
.Entity - Component - System.
Slide 26
Slide 26 text
How about a more real
example !?
Slide 27
Slide 27 text
Registry
Curated collection of A-Frame components/ shaders !
create your own components
Slide 28
Slide 28 text
Registry
Curated collection of A-Frame components/ shaders !
create your own components
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Inspector
A visual tool for A-Frame
+ + i
Slide 32
Slide 32 text
Applications...
Slide 33
Slide 33 text
A-Painter
Slide 34
Slide 34 text
Data visualization
Slide 35
Slide 35 text
Medical Education
Slide 36
Slide 36 text
But, what about
Augmented Reality ?
Slide 37
Slide 37 text
AR.js + A-Frame
Slide 38
Slide 38 text
Community
https://aframe.io/blog
125 contributors
5000 stargazers
3000 members
On slack
100s of featured
projects
Slide 39
Slide 39 text
thanks!
ANY
QUESTIONS?
You can find me at:
@Srushtika
n.srushtika@gmail.com