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

Getting Started with WebVR

0b0edcef2f3aee7b51cda719e5f82d7c?s=47 Arpit Mathur
December 01, 2017
0
1.8k

Getting Started with WebVR

Deck for the talk at Philly Google Developers conference

0b0edcef2f3aee7b51cda719e5f82d7c?s=128

Arpit Mathur

December 01, 2017
Tweet

More Decks by Arpit Mathur

See All by Arpit Mathur
0b0edcef2f3aee7b51cda719e5f82d7c?s=48 arpit
0
15
0b0edcef2f3aee7b51cda719e5f82d7c?s=48 arpit
0
2.2k
0b0edcef2f3aee7b51cda719e5f82d7c?s=48 arpit
0
33
0b0edcef2f3aee7b51cda719e5f82d7c?s=48 arpit
1
14
0b0edcef2f3aee7b51cda719e5f82d7c?s=48 arpit
0
16
0b0edcef2f3aee7b51cda719e5f82d7c?s=48 arpit
0
3.1k
0b0edcef2f3aee7b51cda719e5f82d7c?s=48 arpit
0
1.6k
0b0edcef2f3aee7b51cda719e5f82d7c?s=48 arpit
0
3k
0b0edcef2f3aee7b51cda719e5f82d7c?s=48 arpit
0
52

Featured

See All Featured
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
40
2k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
167
20k
78b475797a14c84799063c7cd073962f?s=48 holman
451
140k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
261
25k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
449
36k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
129
22k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
224
48k
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
779
210k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
91
9k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
191
14k
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
263
20k
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
106
5.5k

Transcript

  1. Getting Started with WebVR Arpit Mathur

  2. VR Hardware: 6 DoF vs 3 DoF

  3. Design Challenges • Keep framerate high • Comfortable motion DESIGN

    A UNIVERSE

  4. Native vs. WebVR

  5. Current Support

  6. WebVR Apis

  7. Building WebVR Experiences ... JavaScript + HTML WebGL

  8. … Easily WebGL WebVR APIs ThreeJS AFrame

  9. WebGL

  10. ThreeJS https://threejs.org/

  11. AFrame APIs https://aframe.io

  12. Key concepts • Vertices • Mesh (Geometry) • Textures •

    Shaders • Materials • Lights • Models
  13. None

  14. Hello World

  15. None

  16. Select with Laser Controls

  17. Code

  18. Adding models https://poly.google.com/view/cw4xlvbKzWF • Obj • GLTF 2

  19. None

  20. Creating custom components https://github.com/ngokevin/aframe-component-bo ilerplate/blob/master/index.js

  21. Other useful libraries • Teleport controls • Aframe Extras ◦

    Look-at ◦ Superhands • MR-social

  22. Links • AFrame.io • Glitch.com ◦ https://glitch.com/aframe • poly.google.com •

    vr.google.com • https://speakerdeck.com/arpit/bringing-cable-tv-to-virtual-reality