Introduction to A-Frame

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
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

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 ﬂexibility.

<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 speciﬁcation
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>

material="color: pink”> 
</a-entity>

material="color: pink” light="intensity: 2"> 
</a-entity>

<a-entity geometry="primitive: cube; depth: 1;  
material="color: pink”  
light="intensity: 2” position="-1 5 0”  
sound="src: dangerzone.mp3; volume: 2"> 
</a-entity>

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.

Deﬁning 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', {
});

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', 'indeﬁnite'); 
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);  
} 
}

• 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" ﬁll="forwards"  
repeat="indeﬁnite"> 
</a-animation> 
</a-entity>

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}"  
<a-cube color="blue" depth="${size}" height="${size}" width="${size}"  
</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

Introduction to A-Frame

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Introduction to A-Frame

Similar to Introduction to A-Frame (20)

More from Daosheng Mu

More from Daosheng Mu (8)

Recently uploaded

Recently uploaded (20)

Introduction to A-Frame