Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
A-Frame
aframe.io


Daosheng Mu
@mozilla
2016/01/08
https://goo.gl/de2YG1
About Me
• Six years experience in the game industry
• Contributor to three.js
• Working on Firefox OS TV product
• Respon...
Outline
• WebVR
• A-Frame
• Customize HTMLElement
• Entity-Component system
• Build own component
Mozilla VR team -
“Our goal is to help
bring high
performance virtual
reality to the open
web.”
Recap: WebVR
Recap: WebVR
Recap: WebVR
var leftEyeParams = vrHMD.getEyeParameters(‘left’);

var rightEyeParams = vrHMD.getEyeParameters(‘right’);
//...
Recap: WebVR
function onRequestAnimationFrame() {

if ( vrPosSensor ) {

var state = vrPosSensor.getState();

if ( state.h...
Recap: WebVR
function render( camera ) {

// Left eye

setViewport( leftEyeParams );

setProjMatrix( leftEyeFOV );

setVie...
Ready to WebVR 1.0?
• Refresh rate
• Fullscreen
• VR Gamepad
• Merge HMD/Pose
SUCCESS STORIES
A-Frame
Building blocks for the
virtual reality web
A-Frame
Demo
• VR Shopping
• 360 Video
• Panorama
A-Frame
• Building blocks for the virtual reality web
• Use markup to create VR experiences that work across desktop,
iPho...
<a-entity geometry="primitive: cube; material="color:
pink”></a-entity>
webcomponents.js ?
webcomponents.js ?
“webcomponents.js is a set of polyfills built on top of the Web
Components specifications.”
•Custom Eleme...
webcomponents.js ?
A-Framedocument-register-element.js



A stand-alone working lightweight version of the W3C
Custom Elem...
A-Frame Core
A DOM-based Entity-Component System to
declaratively create 3D and VR worlds in the browser.
Entity-Component...
Elements

• Templates
• Events
Core

• Components
• Entity
• Scene
• Utils
aframe
aframe-core
<body>

<a-scene stats="true">

<a-entity geometry="primitive: box;"
material="color: #d00">

</a-entity>

</a-scene>

</b...
Entity system in A-Frame
Entities are HTML elements (i.e., <a-entity>).
Components are HTML attributes that are set on
the...
<a-entity geometry="primitive: cube; depth: 1;
height: 1; width: 1"

material="color: pink”>

</a-entity>
<a-entity geometry="primitive: cube; depth: 1;
height: 1; width: 1"

material="color: pink” light="intensity: 2">

</a-ent...
<a-entity geometry="primitive: cube; depth: 1; 

height: 1; width: 1"

material="color: pink” 

light="intensity: 2” posit...
Entity
<a-entity>
• Entities are general purpose objects (e.g., to
create a player, monster, sky, or cube).
• They inheren...
Component
• Components are reusable and modular chunks
of data that modify an aspect of an entity,
changing its appearance...
Defining Component Data
<a-entity geometry="primitive: box; width: 5"></a-entity>
var entity = document.querySelector('a-en...
Building a Component
require('aframe').registerComponent('vibrate', {
});
Building a Component
require('aframe').registerComponent('vibrate', {
});
init: function () {
this.animationEl
= null;
},
...
Building a Component
• Implement Particle component
• three.js: points / sprites (http://threejs.org/
examples/#webgl_poin...
Scene
• Set up what to render, where to render, and is where all of the entities live.
• Initialization
• Creating a canva...
Animation
<a-animation>
<a-entity geometry="primitive: box;" material="color: pink" position="0 0 0"
rotation="0 0 0">

<a...
Elements

• Templates
• Events
Core

• Components
• Entity
• Scene
• Utils
aframe
aframe-core
Primitives
Primitives are concise, semantic building blocks
that wrap A-Frame’s underlying entity-component
system.
<a-ent...
Templates
• Templates package multiple entities or primitives
into a custom element for easy reuse.
<template is="a-templa...
Templates
<template is="a-template" element="a-lot-of-cubes" size="1">

<a-cube color="red" depth="${size}" height="${size...
Mixin
<a-mixin>
• Mixins provide a way to compose and reuse
commonly-used sets of component properties.
<a-assets>

<a-mix...
Conclusion
• Next version of WebVR API is working on
• A-Frame provides developers a rapid way to
make WebVR content
• A-F...
Platform Support
Oculus

Firefox
Android

Firefox
iOS

Safari
FxOS
HMD WebVR WebVR webvr-polyfill WebVR
Position WebVR X X ...
Thanks for your attention
Introduction to A-Frame
Upcoming SlideShare
Loading in …5
×

Introduction to A-Frame

2,738 views

Published on

A-Frame is a WebVR framework for developers to make their VR content rapidly. It is based on Entity-Component system. So, it could bring us flexibility and usability for developing.

Published in: Technology

Introduction to A-Frame

  1. 1. A-Frame aframe.io 
 Daosheng Mu @mozilla 2016/01/08 https://goo.gl/de2YG1
  2. 2. About Me • Six years experience in the game industry • Contributor to three.js • Working on Firefox OS TV product • Responsible for Gaming, Graphics @daoshengmu
  3. 3. Outline • WebVR • A-Frame • Customize HTMLElement • Entity-Component system • Build own component
  4. 4. Mozilla VR team - “Our goal is to help bring high performance virtual reality to the open web.”
  5. 5. Recap: WebVR
  6. 6. Recap: WebVR
  7. 7. Recap: WebVR var leftEyeParams = vrHMD.getEyeParameters(‘left’);
 var rightEyeParams = vrHMD.getEyeParameters(‘right’); // In meters
 var leftEyeTranslation = leftEyeParams.eyeTranslation; 
 var rightEyeTranslation = rightEyeParams.eyeTranslation; 
 var leftEyeFOV = leftEyeParams.recommendedFieldOfView; 
 var rightEyeFOV = rightEyeParams.recommendedFieldOfView;
  8. 8. Recap: WebVR function onRequestAnimationFrame() {
 if ( vrPosSensor ) {
 var state = vrPosSensor.getState();
 if ( state.hasOrientation ) {
 camera.quaternion.set(
 state.orientation.x, state.orientation.y,
 state.orientation.z, state.orientation.w);
 }
 }
 render( camera ); 
 }
  9. 9. Recap: WebVR function render( camera ) {
 // Left eye
 setViewport( leftEyeParams );
 setProjMatrix( leftEyeFOV );
 setViewMatrix( camera.matrixWorld, leftEyeTranslation );
 drawScene();
 // Right eye
 setViewport( rightEyeParams );
 setProjMatrix( rightEyeFOV );
 setViewMatrix( camera.matrixWorld, rightEyeTranslation );
 drawScene();
 }
  10. 10. Ready to WebVR 1.0? • Refresh rate • Fullscreen • VR Gamepad • Merge HMD/Pose
  11. 11. SUCCESS STORIES
  12. 12. A-Frame Building blocks for the virtual reality web
  13. 13. A-Frame Demo • VR Shopping • 360 Video • Panorama
  14. 14. A-Frame • Building blocks for the virtual reality web • Use markup to create VR experiences that work across desktop, iPhones, and the Oculus Rift. Android support coming soon. • Virtual Reality: Drop in the library and have a WebVR scene within a few lines of markup. • Based on the DOM: Manipulate with JavaScript, use with your favorite libraries and frameworks. • Entity-Component System: Use the entity-component system for better composability and flexibility.
  15. 15. <a-entity geometry="primitive: cube; material="color: pink”></a-entity> webcomponents.js ?
  16. 16. webcomponents.js ? “webcomponents.js is a set of polyfills built on top of the Web Components specifications.” •Custom Elements: Define new elements in HTML. var Mytag = document.registerElement('my-tag');
 document.body.appendChild(new Mytag());
 
 var mytag = document.getElementsByTagName(‘my-tag’)[0];
 mytag.textContent = ‘I am a my-tag element.’; dom.webcomponents.enabled;true X Cross-all-browsers
  17. 17. webcomponents.js ? A-Framedocument-register-element.js
 
 A stand-alone working lightweight version of the W3C Custom Elements specification var Mytag = document.registerElement(
 'my-tag',
 {
 prototype: Object.create(
 HTMLElement.prototype, {
 })
 }
 );
  18. 18. A-Frame Core A DOM-based Entity-Component System to declaratively create 3D and VR worlds in the browser. Entity-Component System is an architectural pattern commonly used in game engines such as Unity, PlayCanvas, an Unreal Engine 4+.
  19. 19. Elements
 • Templates • Events Core
 • Components • Entity • Scene • Utils aframe aframe-core
  20. 20. <body>
 <a-scene stats="true">
 <a-entity geometry="primitive: box;" material="color: #d00">
 </a-entity>
 </a-scene>
 </body> Scene Entity Component
  21. 21. Entity system in A-Frame Entities are HTML elements (i.e., <a-entity>). Components are HTML attributes that are set on the entity. <a-entity geometry="primitive: cube; depth: 1; height: 1; width: 1"
 material="color: pink”></a-entity>
  22. 22. <a-entity geometry="primitive: cube; depth: 1; height: 1; width: 1"
 material="color: pink”>
 </a-entity>
  23. 23. <a-entity geometry="primitive: cube; depth: 1; height: 1; width: 1"
 material="color: pink” light="intensity: 2">
 </a-entity>
  24. 24. <a-entity geometry="primitive: cube; depth: 1; 
 height: 1; width: 1"
 material="color: pink” 
 light="intensity: 2” position="-1 5 0” 
 sound="src: dangerzone.mp3; volume: 2">
 </a-entity>
  25. 25. Entity <a-entity> • Entities are general purpose objects (e.g., to create a player, monster, sky, or cube). • They inherently have a position, rotation, and scale in the scene. Properties - components - sceneEl 
 Methods - emit - get/setAttribute - getComputedAttribute - removeAttribute 
 Events - componentChanged - loaded
  26. 26. Component • Components are reusable and modular chunks of data that modify an aspect of an entity, changing its appearance, behavior, or functionality.
  27. 27. Defining Component Data <a-entity geometry="primitive: box; width: 5"></a-entity> var entity = document.querySelector('a-entity');
 entity.setAttribute('material', 'color: red');
 entity.setAttribute('geometry', {primitive: 'box'});
 entity.setAttribute('geometry', 'width', 5); OR
  28. 28. Building a Component require('aframe').registerComponent('vibrate', { });
  29. 29. Building a Component require('aframe').registerComponent('vibrate', { }); init: function () { this.animationEl = null; }, schema: {
 dur: {
 default: 20
 },
 offset: {
 default: 0.01
 }
 }, update: function () {
 var anim = document.createElement('a- animation');
 var position = this.el.getAttribute('position');
 anim.setAttribute('attribute', 'position');
 anim.setAttribute('direction', 'alternate');
 anim.setAttribute('dur', this.data.dur);
 anim.setAttribute('repeat', 'indefinite');
 anim.setAttribute('to', position.x + this.data.offset + ' ' + position.y + this.data.offset + position.z + this.data.offset);
 
 …
 remove: function () { 
 if (this.animationEl) {
 this.el.removeChild(
 this.animationEl); 
 }
 }
  30. 30. Building a Component • Implement Particle component • three.js: points / sprites (http://threejs.org/ examples/#webgl_points_sprites) • Add components/particle to index.js • npm run dev
  31. 31. Scene • Set up what to render, where to render, and is where all of the entities live. • Initialization • Creating a canvas • Instantiating a renderer • Attaching event and full screen listeners • Setting up default lighting and camera • Injecting <meta> tags and button to Enter VR • Registering keyboard shortcuts • Render Loop • requestAnimationFrame <a-scene> AScene three.js
  32. 32. Animation <a-animation> <a-entity geometry="primitive: box;" material="color: pink" position="0 0 0" rotation="0 0 0">
 <a-animation attribute="rotation" to="0 360 0" dur="3000" fill="forwards" 
 repeat="indefinite">
 </a-animation>
 </a-entity>
  33. 33. Elements
 • Templates • Events Core
 • Components • Entity • Scene • Utils aframe aframe-core
  34. 34. Primitives Primitives are concise, semantic building blocks that wrap A-Frame’s underlying entity-component system. <a-entity geometry="primitive: box; width: 3" material="color: red">
 </a-entity> <a-cube width="3" color="red"></a-cube>
  35. 35. Templates • Templates package multiple entities or primitives into a custom element for easy reuse. <template is="a-template" element="a-lot-of-cubes">
 <a-cube color="red" depth="1" height="1" width="1" position="-1 0 0">
 </a-cube>
 <a-cube color="blue" depth="1" height="1" width="1" position="0 1 0">
 </a-cube>
 <a-cube color="green" depth="1" height="1" width="1" position="1 0 0">
 </a-cube>
 </template> <a-lot-of-cubes></a-lot-of-cubes>
 <a-lot-of-cubes position="10 0 0"></a-lot-of-cubes>
  36. 36. Templates <template is="a-template" element="a-lot-of-cubes" size="1">
 <a-cube color="red" depth="${size}" height="${size}" width="${size}" 
 position="-${size} 0 0"></a-cube>
 <a-cube color="green" depth="${size}" height="${size}" width="${size}" 
 position="-${size} 0 0"></a-cube>
 <a-cube color="blue" depth="${size}" height="${size}" width="${size}" 
 position="-${size} 0 0"></a-cube>
 </template> <a-lot-of-cubes size="5"></a-lot-of-cubes>
 <a-lot-of-cubes position="10 0 0"></a-lot-of-cubes>
  37. 37. Mixin <a-mixin> • Mixins provide a way to compose and reuse commonly-used sets of component properties. <a-assets>
 <a-mixin id="red" material="color: red"></a-mixin>
 <a-mixin id="blue" material="color: blue"></a-mixin>
 <a-mixin id="cube" geometry="primitive: box"></a-mixin>
 </a-assets>
 <a-scene>
 <a-entity mixin="red cube"></a-entity>
 <a-entity mixin="blue cube"></a-entity>
 </a-scene>
  38. 38. Conclusion • Next version of WebVR API is working on • A-Frame provides developers a rapid way to make WebVR content • A-Frame makes “Write once, Run everywhere” to be real
  39. 39. Platform Support Oculus
 Firefox Android
 Firefox iOS
 Safari FxOS HMD WebVR WebVR webvr-polyfill WebVR Position WebVR X X X Orientation WebVR WebVR webvr-polyfill: devicemotion WebVR: but quiet slow Fullscreen WebVR X distortion correction filter X distortion correction filter X distortion correction filter
  40. 40. Thanks for your attention

×