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
93
NodeJS worker threads
Avatar for Srushtika Neelakantam srushtika
0
40
Building scalable breakout rooms with Node.js worker threads
Avatar for Srushtika Neelakantam srushtika
0
110
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.8k
Ably Masterclass Episode 1 - Building a realtime voting app in less than an hour
Avatar for Srushtika Neelakantam srushtika
0
3.4k
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
79

Other Decks in Technology

See All in Technology
Disciplined Vibes: Scaling AI-Assisted Engineering
Avatar for Sheharyar Naseer sheharyar
0
120
手塩にかけりゃいいってもんじゃない
Avatar for ming ming_ayami
0
220
"何を作るか"を任される エンジニアは、どう育つのか
Avatar for ofuji-works yutaokafuji
1
560
ルールやカスタム機能、どう活かす?ハンズオンで体感するIBM Bobの出力コントロール
Avatar for mu (Mizuho Uehara) muehara
1
120
Socrates × Looker　〜セマンティックレイヤーで進化するデータ分析エージェント〜
Avatar for Uchide Hiroki(ucchi-) hanon52_
3
2k
フロンティアAIのゲート化と地政学リスク
Avatar for 長津孝輔 nagatsu
0
110
Oracle AI Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
1.9k
LLMにもCAP定理があるという話
Avatar for Haruka Sakihara harukasakihara
0
280
やさしいA2A入門
Avatar for みのるん minorun365
PRO
10
1.7k
タクシーアプリ『GO』の実践的データ活用
Avatar for GO Inc. dev mot_techtalk
3
190
チームで進めるAI駆動アジャイル×ウォーターフォール
Avatar for 熊井悠 kumaiu
0
140
On-behalf-of Token exchange with AgentCore Identity
Avatar for iganin hironobuiga
2
130

Featured

See All Featured
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.7k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.1k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
390
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
610
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
220
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
200
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
400
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
200
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
140
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.5k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k

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]