Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

WebVR talk for MobCon '17 Europe

Avatar for Srushtika Neelakantam Srushtika Neelakantam
March 24, 2017
Technology
54
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
110
NodeJS worker threads
Avatar for Srushtika Neelakantam srushtika
0
47
Building scalable breakout rooms with Node.js worker threads
Avatar for Srushtika Neelakantam srushtika
0
130
Building a multiplayer version of space invaders
Avatar for Srushtika Neelakantam srushtika
1
130
Ably Masterclass Episode 2 - Building an IoT based realtime attendance system for Slack
Avatar for Srushtika Neelakantam srushtika
0
3k
Ably Masterclass Episode 1 - Building a realtime voting app in less than an hour
Avatar for Srushtika Neelakantam srushtika
0
3.7k
Understanding how 'Hubs by Mozilla' works
Avatar for Srushtika Neelakantam srushtika
1
150
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
89

Other Decks in Technology

See All in Technology
アプリログインとWeb認証基盤をつなぐ ASWebAuthenticationSession 作法
Avatar for Go Takagi shimastripe
1
340
事業課題から技術的負債に向き合う
Avatar for SansanTech sansantech
PRO
2
2k
作って終わりじゃないサーバーレス 〜9年運用する大規模EC物流API基盤の設計・運用のリアル〜
Avatar for ZOZO Developers zozotech
PRO
0
160
SREへの勘違いに気づいた後の話
Avatar for yuden tomodakengo
0
110
あけおめLINE 傾向とその対策
Avatar for nasa9084 nasa9084
0
130
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
12k
データ_AIの事業の勝敗をわけるもの
Avatar for KJ(Kenji Matsuda) nek0128
1
450
エージェントはローカル、検証はMicroVM — Lambda MicroVMsでつくるServerless CI
Avatar for fujioka-a fujioka6789
3
320
顧客に向き合う開発組織へ。リアーキテクチャとフィーチャーチーム化で挑む組織改革
Avatar for セーフィー safie
0
2.1k
Claude Codeを「使うほど育つ」AI秘書にするノウハウ
Avatar for みのるん minorun365
PRO
31
27k
AIは推し活である。
Avatar for くらず / Kurazu kurazuuuuuu
0
200
10Xに技術的負債をもたらした「2つの境界の歪み」その構造と解消への営み
Avatar for 10xinc 10xinc
0
2.1k

Featured

See All Featured
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
41k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
2.1k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
4.9M
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
430
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
1.1k
Music & Morning Musume
Avatar for Bryan Veloso bryan
48
7.4k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
560
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
700

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]