Getting Started with WebVR

Deck for the talk at Philly Google Developers conference

Transcript

1. Getting Started with WebVR
   Arpit Mathur
   

   View Slide

2. VR Hardware: 6 DoF vs 3 DoF
   

   View Slide

3. Design Challenges
   ● Keep framerate high
   ● Comfortable motion
   DESIGN A UNIVERSE
   

   View Slide

4. Native vs. WebVR
   

   View Slide

5. Current Support
   

   View Slide

6. WebVR Apis
   

   View Slide

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

   View Slide

8. … Easily
   WebGL
   WebVR APIs
   ThreeJS
   AFrame
   

   View Slide

9. WebGL
   

   View Slide

10. ThreeJS
    https://threejs.org/
    

    View Slide

11. AFrame
    APIs
    https://aframe.io
    

    View Slide

12. Key concepts
    ● Vertices
    ● Mesh (Geometry)
    ● Textures
    ● Shaders
    ● Materials
    ● Lights
    ● Models
    

    View Slide

13. View Slide

14. Hello World
    

    View Slide

15. View Slide

16. Select with Laser Controls
    

    View Slide

17. Code
    

    View Slide

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

    View Slide

19. View Slide

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

    View Slide

21. Other useful libraries
    ● Teleport controls
    ● Aframe Extras
    ○ Look-at
    ○ Superhands
    ● MR-social
    

    View Slide

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
    

    View Slide