- Onboard web developers into the 3D and VR world with easy-to-use tools
- Prototype WebVR experiences faster
- Ask how many have tried VR.
- Virtual reality is a technology platform that transports you to realistic, interactive, immersive 3D environments
- It's the next platform, will change how we work + play + communicate digitally, face of society
- Backed by the largest corporations in the world, everyone wants in
- Range from cheap to expensive, tethered and untethered, controllers, tracking
- HTC Vive with Steam currently offers the most compelling experiences, but never know
- See a lot of different devices, systems, platforms competing against each other...
- App stores and corporations control distribution: can take down or block content
- Downloads / installs are a barrier to consumption: small business pages
- Closed ecosystem: proprietary engines, steep learning curves, siloed experiences, fragmentation
- We want VR to be successful, so we want a platform without these points of friction. The answer is WebVR...
An open virtual reality platform with the advantages of the Web
WebVR is...virtual reality in the browser, powered by the Internet
Open:
- Anyone can publish
- Open source culture with open standards
Connected:
- Traverse worlds
Instant:
- Click a link on Twitter or Weibo, immediate VR experiences
- No installs
- Imagine for long tail experiences: shopping & personal spaces
- Great for long tail bite-sized experiences
Transition:
- Web has advantages that make it the best platform for the people
- Need to act to make it reality, can't wait for VR to bake and crystallize
- Get involved
Browser APIs that enable WebGL rendering to headsets and access to VR sensors
API:
- Optimized rendering path to headsets
- Access position and rotation (pose) data
History:
- Initial WebVR API by Mozilla
- Working W3C community group
- Mozilla, Google, Samsung, Microsoft, community currently iterating WebVR 1.0 API
Not just a specification, it's implemented...
- Firefox + Chrome WebVR 1.0 hits release channels by early 2017
- Currently behind Nightly, custom builds, and flags
- Mobile Polyfill: use device motion / orientation sensors to polyfill on smartphones
- With all the browsers behind it...
- Shared persistent collective virtual spaces
- Alternate digital reality that the world may live, work, play
- Must be decentralized/open/connected, the Web is best platform to fully realize
- Where do we begin?
- three.js abstracts WebGL, 3D, and WebVR, but could still make it more accessible
Too hard to create WebVR experiences...
Import WebVR polyfill
Set up camera
Set up lights
Initialize scene
Declare and pass canvas
Listen to window resize
Install VREffect
Instantiate renderer
Create render loop
Preload assets
Figure out responsiveness
Deal with metatags and mobile
- It's still too difficult to create WebVR experiences
- Huge obstacle if doing small prototypes and experiments
- Boilerplate needs updating with new versions of WebVR, three.js, and browser quirks
- Encapsulate all of that into one line...
A web framework for building virtual reality experiences
- Launched last December
- Why:
- Easy for web developers to create VR content, without graphics knowledge
- Prototype and experiment WebVR and VR UX faster
- Vehicle to kickstart WebVR ecosystem
<html>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<a-scene>
</a-scene>
</html>- Just HTML
- Drop a script tag, no build steps
- Using Custom HTML Elements
- One line of HTML
<a-scene>handles- canvas, camera, renderer, lights, controls, render loop, WebVR polyfill, VREffect
- Put stuff inside our scene...
<html>
<script src="https://aframe.io/releases/0.5.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>- Basic 3D primitives with Custom Elements
- Readable: HTML arguably most accessible language in computing
- Encapsulated: copy-and-paste HTML anywhere else and still work, no state or variables
- Quickly look at a live example...
by Ada Rose Edwards (@lady_ada_king)
- A-Frame scene by Ada Rose Edwards running from inside my HTML slides
- Works on desktop, Android, iOS, Samsung Gear VR, Oculus Rift, HTC Vive
- Could open up the DOM Inspector to change values live
- Is an entity-component framework
- Popular in game development, used by Unity
- All objects in scene are entities that inherently empty objects. Plug in components to attach appearance / behavior / functionality
- 2D web where every element was fixed
- 3D/VR is different, objects of infinite types and complexities, need an easy way to build up different kinds of objects
<a-entity>- Start with an
<a-entity> - By itself, has no appearance, behavior, functionality
- Plug in components to add appearance, behavior, functionality
<a-entity
geometry="primitive: sphere; radius: 1.5"
material="color: #343434; roughness: 0.4; sphericalEnvMap: #texture">- Syntax similar to CSS styles
- Component names as HTML attributes
- Component properties and values as HTML attribute value
<a-entity
geometry="primitive: sphere; radius: 1.5"
material="color: #343434; roughness: 0.4; sphericalEnvMap: #texture"
position="-1 2 4" rotation="45 0 90" scale="2 2 2"><a-entity
geometry="primitive: sphere; radius: 1.5"
material="color: #343434; roughness: 0.4; sphericalEnvMap: #texture"
position="-1 2 4" rotation="45 0 90" scale="2 2 2"
animation="property: rotation; loop: true; to: 0 360 0"
movement-pattern="type: spline; speed: 4"><a-entity
json-model="src: #robot"
position="-1 2 4" rotation="45 0 90" scale="2 2 2"
animation="property: rotation; loop: true; to: 0 360 0"
movement-pattern="type: spline; speed: 4"><a-entity
json-model="src: #robot"
position="-1 2 4" rotation="45 0 90" scale="2 2 2"
animation="property: rotation; loop: true; to: 0 360 0"
movement-pattern="type: attack; target: #player"
explode="on: hit">- These are some components that ship with A-Frame
- A-Frame is fully extensible at its core so...
- Community has filled the ecosystem with tons of components
- Components can do whatever they want, have full access to three.js and Web APIs
- The component ecosystem the lifeblood of A-Frame
- Physics, leap motion, particle systems, audio visualizations, oceans
- Drop these components as script tags and use them straight from HTML
- Advanced developers empowering other developers
- Working on collecting these components...
Curated collection of A-Frame components.
- Collecting them into the A-Frame registry
- Like a store of components that we make sure work well
- People can browse and search for components or install them....
Curated collection of A-Frame components.
Visual tool for A-Frame. Just <ctrl>+<alt>+i.
@mozillavr
Amnesty International UK
The Washington Post
@kfarr
@datatitian
@mozillavr
@whoyee
@sleighdogs
@jerome_etienne
@webvrstudio
iStaging
@drryanjames
- Open source and inclusive project
- Most work done on GitHub
- Active community on Slack to share projects, interact, hang out, seek help
- Featured projects on the
awesome-aframerepository and A Week of A-Frame blog