Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web based Virtual Reality made terribly easy

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Srushtika Neelakantam Srushtika Neelakantam
May 25, 2017
Technology
160
0

Web based Virtual Reality made terribly easy

This talk was presented at ChaDev developer lunch.

Avatar for Srushtika Neelakantam

Srushtika Neelakantam

May 25, 2017

More Decks by Srushtika Neelakantam

See All by Srushtika Neelakantam
Realtime data on the JAMstack
Avatar for Srushtika Neelakantam srushtika
0
95
NodeJS worker threads
Avatar for Srushtika Neelakantam srushtika
0
42
Building scalable breakout rooms with Node.js worker threads
Avatar for Srushtika Neelakantam srushtika
0
120
Building a multiplayer version of space invaders
Avatar for Srushtika Neelakantam srushtika
1
120
Ably Masterclass Episode 2 - Building an IoT based realtime attendance system for Slack
Avatar for Srushtika Neelakantam srushtika
0
2.9k
Ably Masterclass Episode 1 - Building a realtime voting app in less than an hour
Avatar for Srushtika Neelakantam srushtika
0
3.5k
Understanding how 'Hubs by Mozilla' works
Avatar for Srushtika Neelakantam srushtika
1
140
Mixed Reality - Zero to Hero in 25min
Avatar for Srushtika Neelakantam srushtika
1
120
The current state of the data sharing economy
Avatar for Srushtika Neelakantam srushtika
1
81

Other Decks in Technology

See All in Technology
そのハーネス、本当に境界になっていますか？ AIエージェント時代の実行環境設計【MEGU-Meet #4】
Avatar for サイバーセキュリティクラウド cscengineer
PRO
0
110
AIに「使われる」時代のSaaS戦略 〜既存WebAPIのMCPサーバー化における開発ノウハウ〜
Avatar for 駅すぱあと API ekispert_api
0
290
AIをフル活用してオンコール機能のプロトタイプを2日で作った話 / Building an AI-Powered On-Call Prototype in Just Two Days
Avatar for Narimichi Takamura nari_ex
0
180
『AIに負けない』より『AIと遊ぶ』」〜ワクワクが最強のテスト・QA学習戦略_公開用
Avatar for odan tomohiro odan611
1
380
AWS Summit Japan 2026の振り返りと2027へ向けて / AWS Summit Japan 2026 Recap and Prospects for 2027
Avatar for 株式会社カミナシ kaminashi
1
200
アラート調査向けAIエージェントの本番導入とその後/AI Agents for Alert Investigation: Production Deployment and After
Avatar for SadayoshiTada taddy_919
1
380
RAGの精度向上とエージェント活用
Avatar for KintoTech_Dev kintotechdev
2
130
GuardrailからGovernanceへ～AIエージェント運用の次の課題～
Avatar for 吉岡駿 sbspsy
1
120
次世代ランサムウェア対策の考察 / 20260704 Mitsutoshi Matsuo
Avatar for SHIFT EVOLVE shift_evolve
PRO
5
1.7k
4人目のSREはAgent
Avatar for tanimuyk tanimuyk
0
380
テスト設計の本質を改めて考えてみる～生成AIを活用する時代だからこそ、作ったテストの説明性を高めよう～
Avatar for YAMASAKI Takashi yamasaki696
1
290
最近評価が難しくなった
Avatar for Mitsui maroon8021
0
220

Featured

See All Featured
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
3.8M
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.8k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
430
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.9k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
180
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
170
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
460
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
3.6k
A Soul's Torment
Avatar for Nat Ma seathinner
6
3k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.7k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
410

Transcript

  1. Web-Based Virtual Reality made terribly easy !

  2. Srushtika Neelakantam Mozilla Rep, Techspeaker, Campus Advisory Committee member @Srushtika

    Co-Author Learning Web-based Virtual Reality

  3. Virtual Reality

  4. VR HEADSETS

  5. Friction in VR Ecosystems

  6. Friction in VR Ecosystems Gatekeepers

  7. Friction in VR Ecosystems Gatekeepers Installs

  8. Friction in VR Ecosystems Gatekeepers Installs Closed

  9. WebVR An open Virtual Reality platform with the advantages of

    the WEB

  10. WebVR Open An open Virtual Reality platform with the advantages

    of the WEB

  11. WebVR Open Connected An open Virtual Reality platform with the

    advantages of the WEB

  12. WebVR Open Connected Instant An open Virtual Reality platform with

    the advantages of the WEB

  13. Browser APIs that enable WebGL rendering to headsets and access

    to VR sensors https://w3c.github.io/webvr/

  14. Support https://webvr.rocks Firefox Nightly Chromium (Experimental) Samsung Internet Mobile Polyfill

    Chrome For Android Oculus Carmel Microsoft Edge

  15. Too hard to create WebVR experiences?

  16. 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

  17. 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

  18. A-Frame It wraps the power of WebGL in HTML custom

    elements, so creating a high performance VR experience becomes extremely simple.

  19. .d3.js. .Vue.js. .React. .Redux. Angular. .jQuery. Works with everything !

  20. Hello Metaverse by Ada Rose Edwards aframe.io

  21. None

  22. Hello World ! <html> <script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script> <a-scene> </a-scene> </html>

  23. 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>

  24. How it looks in the browser:

  25. .Entity - Component - System.

  26. How about a more real example !?

  27. Registry Curated collection of A-Frame components/ shaders ! create your

    own components

  28. Registry Curated collection of A-Frame components/ shaders ! create your

    own components
  29. None
  30. None

  31. Inspector A visual tool for A-Frame <ctrl> + <alt> +

    i

  32. Applications...

  33. A-Painter

  34. Data visualization

  35. Medical Education

  36. But, what about Augmented Reality ?

  37. AR.js + A-Frame

  38. Community https://aframe.io/blog 125 contributors 5000 stargazers 3000 members On slack

    100s of featured projects

  39. thanks! ANY QUESTIONS? You can find me at: @Srushtika [email protected]