Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web based Virtual Reality made terribly easy
Search
Srushtika Neelakantam
May 25, 2017
Technology
0
140
Web based Virtual Reality made terribly easy
This talk was presented at ChaDev developer lunch.
Srushtika Neelakantam
May 25, 2017
Tweet
Share
More Decks by Srushtika Neelakantam
See All by Srushtika Neelakantam
Realtime data on the JAMstack
srushtika
0
64
NodeJS worker threads
srushtika
0
24
Building scalable breakout rooms with Node.js worker threads
srushtika
0
84
Building a multiplayer version of space invaders
srushtika
1
89
Ably Masterclass Episode 2 - Building an IoT based realtime attendance system for Slack
srushtika
0
2k
Ably Masterclass Episode 1 - Building a realtime voting app in less than an hour
srushtika
0
2.4k
Understanding how 'Hubs by Mozilla' works
srushtika
1
120
Mixed Reality - Zero to Hero in 25min
srushtika
1
100
The current state of the data sharing economy
srushtika
1
44
Other Decks in Technology
See All in Technology
SLI/SLO・ラプソディあるいは組織への適用の旅
nwiizo
4
700
사이드 프로젝트를 20번 실패한 주니어의 오답노트 훔쳐보기(feat. KMP)
yjyoon
0
580
DevinはクラウドエンジニアAIになれるのか!? 実践的なガードレール設計/devin-can-become-a-cloud-engineer-ai-practical-guardrail-design
tomoki10
1
110
RF問の対策をした話
bata_24
0
140
PHPStan をできる限り高速化してみる
colopl
0
220
開発組織全体で意識するSLI/SLOを実装している話
zepprix
1
510
Engineering Managementのグローバルトレンド #emoasis / Engineering Management Global Trend
kyonmm
PRO
4
850
Oracle Cloud Infrastructure:2025年3月度サービス・アップデート
oracle4engineer
PRO
0
240
RubyKaigi 2025でプロポーザルが初めて採択されるまでにやったこと
yuuu
1
130
EM初心者として半年間マネジャーをやってみて分かったこと
sansantech
PRO
0
180
一人QA時代が終わり、 QAチームが立ち上がった話
ma_cho29
0
200
MLflowの現在と未来 / MLflow Present and Future
databricksjapan
1
240
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.2k
4 Signs Your Business is Dying
shpigford
183
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
176
52k
How to train your dragon (web standard)
notwaldorf
91
5.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Transcript
Web-Based Virtual Reality made terribly easy !
Srushtika Neelakantam Mozilla Rep, Techspeaker, Campus Advisory Committee member @Srushtika
Co-Author Learning Web-based Virtual Reality
Virtual Reality
VR HEADSETS
Friction in VR Ecosystems
Friction in VR Ecosystems Gatekeepers
Friction in VR Ecosystems Gatekeepers Installs
Friction in VR Ecosystems Gatekeepers Installs Closed
WebVR An open Virtual Reality platform with the advantages of
the WEB
WebVR Open An open Virtual Reality platform with the advantages
of the WEB
WebVR Open Connected An open Virtual Reality platform with the
advantages of the WEB
WebVR Open Connected Instant An open Virtual Reality platform with
the advantages of the WEB
Browser APIs that enable WebGL rendering to headsets and access
to VR sensors https://w3c.github.io/webvr/
Support https://webvr.rocks Firefox Nightly Chromium (Experimental) Samsung Internet Mobile Polyfill
Chrome For Android Oculus Carmel Microsoft Edge
Too hard to create WebVR experiences?
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
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
A-Frame It wraps the power of WebGL in HTML custom
elements, so creating a high performance VR experience becomes extremely simple.
.d3.js. .Vue.js. .React. .Redux. Angular. .jQuery. Works with everything !
Hello Metaverse by Ada Rose Edwards aframe.io
None
Hello World ! <html> <script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script> <a-scene> </a-scene> </html>
Hello World ! <html> <script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script> <a-scene> <a-box color="#4CC3D9" position="-1
0.5 -3" rotation="0 45 0"></a-box> <a-cylinder color="#FFC65D" position="1 0.75 -3" radius="0.5" height="1.5"></a-cylinder> <a-sphere color="#EF2D5E" position="0 1.25 -5" radius="1.25"></a-sphere> <a-plane color="#7BC8A4" position="0 0 -4" rotation="-90 0 0" width="4" height="4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> </html>
How it looks in the browser:
.Entity - Component - System.
How about a more real example !?
Registry Curated collection of A-Frame components/ shaders ! create your
own components
Registry Curated collection of A-Frame components/ shaders ! create your
own components
None
None
Inspector A visual tool for A-Frame <ctrl> + <alt> +
i
Applications...
A-Painter
Data visualization
Medical Education
But, what about Augmented Reality ?
AR.js + A-Frame
Community https://aframe.io/blog 125 contributors 5000 stargazers 3000 members On slack
100s of featured projects
thanks! ANY QUESTIONS? You can find me at: @Srushtika n.srushtika@gmail.com