SlideShare a Scribd company logo

Introduction to A-Frame

•
•
Daosheng Mu
Daosheng Mu

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.

Related slideshows

Angular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP ServicesAngular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP Services
 
jQuery Fundamentals
jQuery FundamentalsjQuery Fundamentals
jQuery Fundamentals
 
AngularJS
AngularJS AngularJS
AngularJS
 
1 of 41
Download to read offline
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 • Responsible for Gaming, Graphics @daoshengmu
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’); // In meters
 var leftEyeTranslation = leftEyeParams.eyeTranslation; 
 var rightEyeTranslation = rightEyeParams.eyeTranslation; 
 var leftEyeFOV = leftEyeParams.recommendedFieldOfView; 
 var rightEyeFOV = rightEyeParams.recommendedFieldOfView;
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 ); 
 }
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();
 }
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, 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.
<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 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
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, {
 })
 }
 );
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+.
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>
 </body> Scene Entity Component
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>
<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-entity>
<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>
Introduction to A-Frame
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
Component • Components are reusable and modular chunks of data that modify an aspect of an entity, changing its appearance, behavior, or functionality.
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
Building a Component require('aframe').registerComponent('vibrate', { });
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); 
 }
 }
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
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
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>
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-entity geometry="primitive: box; width: 3" material="color: red">
 </a-entity> <a-cube width="3" color="red"></a-cube>
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>
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>
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>
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
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
Thanks for your attention

More Related Content

Introduction to A-Frame

  • 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. Outline • WebVR • A-Frame • Customize HTMLElement • Entity-Component system • Build own component
  • 4. Mozilla VR team - “Our goal is to help bring high performance virtual reality to the open web.”
  • 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. 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. 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. Ready to WebVR 1.0? • Refresh rate • Fullscreen • VR Gamepad • Merge HMD/Pose
  • 12. A-Frame Building blocks for the virtual reality web
  • 13. A-Frame Demo • VR Shopping • 360 Video • Panorama
  • 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. <a-entity geometry="primitive: cube; material="color: pink”></a-entity> webcomponents.js ?
  • 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. 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. 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. Elements
 • Templates • Events Core
 • Components • Entity • Scene • Utils aframe aframe-core
  • 20. <body>
 <a-scene stats="true">
 <a-entity geometry="primitive: box;" material="color: #d00">
 </a-entity>
 </a-scene>
 </body> Scene Entity Component
  • 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. <a-entity geometry="primitive: cube; depth: 1; height: 1; width: 1"
 material="color: pink”>
 </a-entity>
  • 23. <a-entity geometry="primitive: cube; depth: 1; height: 1; width: 1"
 material="color: pink” light="intensity: 2">
 </a-entity>
  • 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>
  • 26. 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
  • 27. Component • Components are reusable and modular chunks of data that modify an aspect of an entity, changing its appearance, behavior, or functionality.
  • 28. 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
  • 30. 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); 
 }
 }
  • 31. 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
  • 32. 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
  • 33. 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>
  • 34. Elements
 • Templates • Events Core
 • Components • Entity • Scene • Utils aframe aframe-core
  • 35. 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>
  • 36. 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>
  • 37. 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>
  • 38. 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>
  • 39. 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
  • 40. 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
  • 41. Thanks for your attention