Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
•
1 like•465 views
This document provides an overview and introduction to building virtual reality (VR) experiences using WebVR and the A-Frame framework. It discusses: - What WebVR is and how it allows creating VR tools, standards, and experiences for the open web. - What A-Frame is and its features for building VR scenes in HTML such as being easy to learn, cross-platform support, performance optimizations, and a visual inspector. - Examples of VR experiences that have been built with A-Frame, Mozilla's work in mixed reality and VR including Firefox Reality, Spoke for creating 3D environments, and Unity WebVR assets.
Recommended
More Related Content
What's hot
What's hot (14)
Similar to Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
Similar to Build (Web)VR with A-Frame (COSCUP 2019 Taipei) (20)
More from Robert 'Bob' Reyes
More from Robert 'Bob' Reyes (20)
Recently uploaded
Recently uploaded (20)
Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
- 1. Build (Web)VR with A-Frame Robert “Bob” Reyes COSCUP 2019 18 AUG 2019 | Taipei, Taiwan #Mozilla #WebVR #WebXR
- 2. About Me • Mozilla Rep for the PHL since 2011 • CTO at ALIAC.edu.ph • Technopreneur at TurfSitePH.net • Technology Columnist at MB.com.ph • Team Manager at SIPFC.org • @bobreyes in Twitter • Dad of Xeon & Haswell • Firefox user since Version 1.0
- 3. Being a Pinoy Mozillian…
- 5. History of Mozilla On 23 Jan 1998, Netscape Communications Corp. created a project called Mozilla. Mozilla was launched 31 Mar 1998.
- 7. Mozilla’s Mission To ensure the Internet is a global public resource, open & accessible to all. An Internet that truly puts people first, where individuals can shape their own experience & are empowered, safe & independent.
- 8. We have a NEW brand identity…
- 9. We have a NEW brand identity…
- 12. Starting with Firefox 63, all desktop versions of Firefox include an experimental cookie policy that blocks cookies & other site data from third-party tracking resources.
- 15. Mixed Reality
- 16. Mozilla Mixed Reality • Virtual Reality (VR) seems complicated. • But with a few JavaScript libraries & tools, & the power of WebGL, you can make very nice VR scenes that can be viewed & shared in a headset like an Oculus Go or HTC Vive, in a desktop web browser, or on your smartphone.
- 18. Mozilla Mixed Reality • Our mission is to keep the Internet open to innovators, creators, & builders on the web. • Virtual Reality is set to change the future of web interaction. • The ability for anyone to access & enjoy VR experiences is critical. • This is why Mozilla set out to bring virtual reality to web browsers, & why we are enabling WebVR in Firefox.
- 19. What is WebVR?
- 20. What is WebVR? Bringing virtual reality tools, standards, & experiences to the Open Web.
- 21. What is WebVR? • WebVR is an experimental JavaScript API that provides access to Virtual Reality devices, such as the Oculus Rift, HTC Vive, Samsung Gear VR, or Google Cardboard, in your browser. • Currently available on: • Firefox • Chromium (experimental builds) • Samsung Internet Browser for Gear VR
- 22. What is WebVR? • WebVR has been instrumental in democratizing VR -- more people can experience 3D content without expensive headsets. • WebVR is a huge time-saver for content creators, who need to test & verify that their work renders well on every viewing platform. • Having a stable API to work with means 3D content can find a wider audience -- cuts down on the rework creators have to do to deliver
- 23. A-Frame
- 24. What is A-Frame? • A-Frame is an open-source WebVR framework for creating virtual reality (VR) experiences with HTML. • With A-Frame, you can build VR scenes that work across smartphones, desktop, the Oculus Rift/Go, & the room-scale HTC Vive. • A-Frame is powerful, open source, & is easy to learn.
- 25. What A-Frame is NOT? • A-Frame is NOT just a 3D scene graph or a markup language. • The core is a powerful entity-component framework that provides a declarative, extensible, & composable structure to three.js.
- 26. A-Frame Features
- 27. A-Frame Features • VR Made Simple • Just drop in a <script> tag and <a-scene>. • A-Frame will handle 3D boilerplate, VR setup, & default controls. • Nothing to install, no build steps.
- 28. A-Frame Features • Declarative HTML • HTML is easy to read, understand, & copy- and-paste. • A-Frame is accessible to everyone: web developers, VR enthusiasts, artists, designers, educators, makers, kids (since it is based on top of HTML).
- 29. A-Frame Features • Entity-Component Architecture • A-Frame is a powerful three.js framework, providing a declarative, composable, reusable entity-component structure. • HTML is just the tip of the iceberg. • Developers have unlimited access to JavaScript, DOM APIs, three.js, WebVR, & WebGL.
- 30. A-Frame Features • Cross-Platform VR • Build VR applications for Vive, Rift, Windows Mixed Reality, Daydream, GearVR, & Cardboard with support for all respective controllers. • If you don’t have a headset or controllers, it’s not a problem at all! • A-Frame still works on standard desktop & smartphones.
- 31. A-Frame Features • Performance • A-Frame is optimized from the ground up for WebVR. • While A-Frame uses the DOM, its elements don’t touch the browser layout engine. • 3D object updates are all done in memory with little garbage & overhead. • Large scale WebVR applications have been done in A-Frame running smoothly at 90fps.
- 32. A-Frame Features • Visual Inspector • A-Frame provides a handy built-in visual 3D inspector (<ctrl> + <alt> + i).
- 33. A-Frame Features • Components • Core components such as geometries, materials, lights, animations, models, raycasters, shadows, positional audio, text, & controls for most major headsets. • Get even further from the hundreds of community components including environment, state, particle systems, physics, multiuser, oceans, teleportation, super hands, & augmented reality.
- 34. A-Frame Features • Proven & Scalable • A-Frame has been used by companies such as Google, Disney, Samsung, Toyota, Ford, Chevrolet, Amnesty International, CERN, NPR, Al Jazeera, The Washington Post, & NASA. • Companies such as Google, Microsoft, Oculus, & Samsung have made contributions to A-Frame.
- 35. A-Frame Hello World <html> <script src="https://aframe.io/releases/0.9.0/aframe.min.js"> </script> <a-scene> </a-scene> </html>
- 36. A-Frame Hello World <html> <script src="https://aframe.io/releases/0.9.0/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>
- 39. Works With…
- 40. A-Frame Showcase
- 44. What is WebXR? An API that allows developers to create XR experiences. XR a catch-all term that spans AR, VR & newly-developed immersive technologies.
- 45. Why WebXR? • Mixed Reality is going to be a powerful platform, bringing highly engaging & emotionally evocative immersive content to the web. • Like any new creative medium, we want it to be widely accessible, so curious viewers can experience the next generation of digital media without having to shell out hundreds of dollars for a high-end viewer. • For instance, the camera on most mobile phones can be used to overlay information on
- 46. Firefox Reality was specifically designed to tackle all of the new opportunities (& challenges) that come with browsing in VR.
- 47. Firefox Reality on Oculus Go
- 48. Easily create custom 3D environments with Spoke by Mozilla.
- 49. Spoke by Mozilla • Create 3D social scenes for Hubs. • Hubs by Mozilla [https://hubs.mozilla.com/] is an immersive communication on any device. • Beginners can learn Spoke in 5 minutes. • Advanced Spoke can be learned in 10 minutes.
- 50. Mozilla’s Unity WebVR Assets are FREE & available via the Unity Asset Store. It allows creators to publish & share VR experiences created in Unity on the Open Web.
- 51. Photo from #BrazilJS 2016
- 53. Thank you! Maraming salamat po! bob@mozillaph.org
Editor's Notes
- Mixed Reality for the Open Web
- Firefox Reality in Oculus Go
- - IDE for Rust
- - IDE for Rust