A frame beginner lesson

A-Frame
aframe.io
Daosheng Mu
@mozilla
2016/05/28
https://goo.gl/de2YG1

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();
}

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.

Items
• Components
• Entity
• Scene
• Utils
aframe
three.js webvr-polyfill

<body>
<a-scene stats="true">
<a-entity geometry="primitive: box;"
material="color: #d00">
</a-entity>
</a-scene>
</body>
Scene

<body>
</a-entity>
</a-scene>
</body>
Scene
Entity

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

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.

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

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>

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>

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
• A-Frame provides developers a rapid way to
make WebVR content
• A-Frame makes “Write once, Run everywhere” to
be real

Platform Support
Oculus Firef
ox
Android Fire
fox
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*
*https://github.com/aframevr/aframe/issues/1295

A frame beginner lesson

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (17)

Ähnlich wie A frame beginner lesson

Ähnlich wie A frame beginner lesson (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

A frame beginner lesson

Hinweis der Redaktion