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

Getting Started with WebVR

Avatar for Arpit Mathur Arpit Mathur
December 01, 2017
0
2.3k

Getting Started with WebVR

Deck for the talk at Philly Google Developers conference

Avatar for Arpit Mathur

Arpit Mathur

December 01, 2017
Tweet

More Decks by Arpit Mathur

See All by Arpit Mathur
Living at the Intersection of Blockchains and Machine Learning
Avatar for Arpit Mathur arpit
0
40
The Humane Machine: Building AI systems with Emotional Intelligence
Avatar for Arpit Mathur arpit
0
2.6k
Building Ethereum powered DApps
Avatar for Arpit Mathur arpit
0
57
Firebase For Mobile Developers
Avatar for Arpit Mathur arpit
1
43
Towards a Decentralized Web
Avatar for Arpit Mathur arpit
0
61
The State of Blockchain Technology
Avatar for Arpit Mathur arpit
0
4k
Coding Different
Avatar for Arpit Mathur arpit
0
1.8k
Going (React) Native
Avatar for Arpit Mathur arpit
0
3.8k
SXSW 2017
Avatar for Arpit Mathur arpit
0
59

Featured

See All Featured
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Done Done
Avatar for chrislema chrislema
185
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
111
20k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
6k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
696
190k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.6k
Visualization
Avatar for Eitan Lees eitanlees
148
16k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
33
8.8k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k

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