VR for Web Developers with A-frame

Transcript

1. VR for Web Developers with A-Frame Rebecca Poulson
2. What is WebVR?
3. But what does that really mean? • Gives you access to your VR device • VR device “pose” • Field of view • Renders an immersive three dimensional display
4. How does VR mode change an image? • Split screens • Mesh-based barrel distortion • Chromatic aberration correction
5. And this is all available right in my browser? webvr.rocks
6. But there’s a Polyfill! (yay!)
7. Why is WebVR important? • We want the Metaverse to be built by and for all kinds of people • Open standards and Open source make it easier for new and smaller companies to bring their products to market. • Very few people have VR headsets, very many people have smartphones with web browsers!
8. Where is this all going?
11. Break/Questions
12. Good things to keep in mind when you make VR for the web
13. What is “good” VR? https://medium.com/@beaucronin/the-hierarchy-of-needs-in-virtual-reality-development-4333a4833acc#.gqdx d8s5r
14. How do we avoid barfing? • Keep the framerate up • Low latency. • Avoid sharp and unexpected camera rotations • Add fixed points of reference for fixed objects so you don’t think you’re moving when you’re not. • Don’t try to fake cinematic depth of field (there’s no frame to encourage the viewer to focus on a specific area) • Avoid sudden lighting transitions.
15. Encourage your user to discover information using strategies other than left → right and up → down https://medium.com/the-language-of-vr/in-the-blink-of-a-mind-attention-1fdff60fa045#.pdmehsi9b By Jessica Brillhart
16. • Built on top of Three.js • Entity-Component-System • A-Frame Inspector
17. https://aframe.io/
18. Ctrl + alt + i
19. Let’s get started!
20. If you get lost, steps are at https://github.com/rapoulson/codeland-vr-de mo/commits/master
22. What’s Entity-Component-System?
23. • General purpose object • Pretty much does nothing • Ships with position, rotation and scale components attached Entity <a-entity>
24. • An entity with components already attached to it • Useful, basic shapes for building scenes • Box, sky, camera, light, octahedron, text... Primitive <a-sky>
25. <a-sky color="#595b5a"></a-sky>
27. • Kind of like CSS • Modular chunk of data that you can “plug in” to an entity • Describes behavior, functionality, or appearance Component color: size:
34. View it on your phone!
35. 1. Make sure your phone is on the same WiFi network as your laptop 2. Go to “Systems Preferences” on your laptop and open up “Network” 3. Type the IP address that you see into your phone’s browser, followed by a “:” and the number of the port you’re running your server on 4. Hit the VR mode button in the bottom right corner of your phone’s screen and pop your phone into your Cardboard!
36. But our sky is still an ugly color!
39. Don’t puke!
41. aframe.io/aframe-registry
43. Where should this other break slide go?