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

691 views

Published on

A-Frame user guide for introduction.

Published in: Technology

A frame beginner lesson

  1. 1. A-Frame aframe.io Daosheng Mu @mozilla 2016/05/28 https://goo.gl/de2YG1
  2. 2. Outline • WebVR • A-Frame
  3. 3. Mozilla VR team - “Our goal is to help bring high performance virtual reality to the open web.”
  4. 4. Recap: WebVR
  5. 5. Recap: WebVR
  6. 6. 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;
  7. 7. 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 ); }
  8. 8. 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(); }
  9. 9. SUCCESS STORIES
  10. 10. A-Frame Building blocks for the virtual reality web
  11. 11. A-Frame Demo • VR Shopping • 360 Video • Panorama
  12. 12. 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.
  13. 13. Items • Components • Entity • Scene • Utils aframe three.js webvr-polyfill
  14. 14. <body> <a-scene stats="true"> <a-entity geometry="primitive: box;" material="color: #d00"> </a-entity> </a-scene> </body> Scene
  15. 15. <body> <a-scene stats="true"> <a-entity geometry="primitive: box;" material="color: #d00"> </a-entity> </a-scene> </body> Scene Entity
  16. 16. <body> <a-scene stats="true"> <a-entity geometry="primitive: box;" material="color: #d00"> </a-entity> </a-scene> </body> Scene Entity Component
  17. 17. 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>
  18. 18. <a-entity geometry="primitive: cube; depth: 1; height: 1; width: 1" material="color: pink”> </a-entity>
  19. 19. <a-entity geometry="primitive: cube; depth: 1; height: 1; width: 1" material="color: pink” light="intensity: 2"> </a-entity>
  20. 20. <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>
  21. 21. 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
  22. 22. Component • Components are reusable and modular chunks of data that modify an aspect of an entity, changing its appearance, behavior, or functionality.
  23. 23. 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
  24. 24. 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
  25. 25. 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>
  26. 26. 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>
  27. 27. 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>
  28. 28. Conclusion • A-Frame provides developers a rapid way to make WebVR content • A-Frame makes “Write once, Run everywhere” to be real
  29. 29. 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
  30. 30. Thanks for your attention

×