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

WebVR talk for MobCon '17 Europe

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

WebVR talk for MobCon '17 Europe

Avatar for Srushtika Neelakantam

Srushtika Neelakantam

March 24, 2017

More Decks by Srushtika Neelakantam

See All by Srushtika Neelakantam
Realtime data on the JAMstack
Avatar for Srushtika Neelakantam srushtika
0
96
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
Control Planeで育てるBtoB SaaSの認証基盤 - SRE NEXT 2026
Avatar for pokohide pokohide
1
2.6k
壊して学ぶAWS CDK: そのcdk deployで消えるもの、残るもの
Avatar for Kazuki Adachi k_adachi_01
1
390
ZOZOTOWNの進化と信頼性を両立する負荷試験
Avatar for ZOZO Developers zozotech
PRO
2
190
生成AI×AWS CDK×AWS FISで"振り返れる"ミニGameDayをつくろう
Avatar for yoshimi0227 yoshimi0227
1
380
最適な自走を最小限の支援で — M&Aで拡大する組織で少人数SREが挑んだ1年 / SRE NEXT 2026
Avatar for GENDA genda
0
1.5k
AIが実装を自走する時代の認知負債との戦い
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
160
「最後に責任を取るのはチーム」— 人間のPRレビューを最小化してアップデートしたメンタルモデル
Avatar for Jotaro Nishime jnishime_dresscode
0
880
AI時代の開発生産性は、個人技からチーム設計へ
Avatar for Atsushi Nakatsugawa moongift
PRO
4
2.4k
カードゲーム作りが教えてくれた プロダクトオーナーシップ
Avatar for Sammy(MoritaMasami) moritamasami
0
110
そのドキュメント、自動化しませんか？
Avatar for yuk yuksew
1
300
SRE本の知られざる名シーン / The Hidden Gems of Google SRE Book
Avatar for Narimichi Takamura nari_ex
1
420
kintone の AI コワーカーを、 Anthropic にエージェントを"ホストさせて"作った話 #devkinmeetup
Avatar for Kazuya Sugimoto sugimomoto
0
110

Featured

See All Featured
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
990
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
8
830
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.4k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
12k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
510
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
190
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
810

Transcript

  1. Web-Based Virtual Reality made terribly easy

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

    [email protected] Author Learning Web-based Virtual Reality

  3. Virtual Reality

  4. VR HEADSETS

  5. Friction in VR Ecosystems Gatekeepers Installs Closed

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

    the advantages of the WEB

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

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

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

    Chrome For Android Oculus Carmel Microsoft Edge

  9. Too hard to create WebVR experiences?

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

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

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

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

  14. How it looks in the browser:

  15. Hello Metaverse by Ada Rose Edwards

  16. d3.js Vue.js React Redux Angular jQuery

  17. Entity - Component - System

  18. None
  19. None

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

    own components

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

    own components

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

    i

  23. Applications...

  24. A-Painter

  25. Sandbox - City Builder

  26. Data visualization

  27. A-Blast for gaming

  28. Prototyping UI Widgets

  29. Medical Education

  30. Mathematics

  31. But, what about Augmented Reality ?

  32. AR.js + A-Frame

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

    100s of featured projects

  34. Thankyou ! @Srushtika | [email protected]