Uploaded byDaosheng Mu
A frame beginner lesson
This document discusses A-Frame, an open-source web framework for building virtual reality experiences. It outlines the goals of the Mozilla VR team to bring high performance VR to the web. It then summarizes the basics of A-Frame, including how it uses entities and components to build scenes, and supports primitives, animation, and mixins to facilitate development. Platform support is discussed, with A-Frame currently supporting various VR and mobile browsers through different VR APIs and polyfills. The document aims to introduce developers to A-Frame for rapidly creating WebVR content that can run across platforms.
A frame beginner lesson
- 1.
- 2.
- 3. Mozilla VR team- “Our goal is to help bring high performance virtual reality to the open web.”
- 4.
- 5.
- 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. 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. 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.
- 10. A-Frame Building blocks forthe virtual reality web
- 11. A-Frame Demo • VR Shopping •360 Video • Panorama
- 12. A-Frame • Building blocksfor 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. Items • Components • Entity •Scene • Utils aframe three.js webvr-polyfill
- 14. <body> <a-scene stats="true"> <a-entity geometry="primitive:box;" material="color: #d00"> </a-entity> </a-scene> </body> Scene
- 15. <body> <a-scene stats="true"> <a-entity geometry="primitive:box;" material="color: #d00"> </a-entity> </a-scene> </body> Scene Entity
- 16. <body> <a-scene stats="true"> <a-entity geometry="primitive:box;" material="color: #d00"> </a-entity> </a-scene> </body> Scene Entity Component
- 17. Entity system inA-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. <a-entity geometry="primitive: cube;depth: 1; height: 1; width: 1" material="color: pink”> </a-entity>
- 19. <a-entity geometry="primitive: cube;depth: 1; height: 1; width: 1" material="color: pink” light="intensity: 2"> </a-entity>
- 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>
- 22. Entity <a-entity> • Entities aregeneral 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
- 23. Component • Components arereusable and modular chunks of data that modify an aspect of an entity, changing its appearance, behavior, or functionality.
- 24. Defining Component Data <a-entitygeometry="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
- 25. Scene • Set upwhat 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
- 26. 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>
- 27. 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>
- 28. Mixin <a-mixin> • Mixins providea 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>
- 29. Conclusion • A-Frame providesdevelopers a rapid way to make WebVR content • A-Frame makes “Write once, Run everywhere” to be real
- 30. Platform Support Oculus Firef ox AndroidFire 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
- 31. Thanks for yourattention
Editor's Notes
- #2 VR device is “hot”, but software platform? 2012 Oculus from Kickstarter 2014 Mozilla WebVR 2015 many success stories 2016 commercial VR devices A-Frame is a project from mozVR team. Rapid prototyping. Proving for users to show them making webVR content can be easy.
- #4 Mozilla (Vlad), Google (Brandon Jones), M$ in progress…
- #5 Stereo render
- #7 Developers need to know - WebGL 3D computer graphics can not be reusable.
- #8 Developers need to know - WebGL 3D computer graphics can not be reusable.
- #9 Developers need to know - WebGL 3D computer graphics can not be reusable.
- #11 WebGL developers are much less than web developers Easy to use / Quick to prototype Cross all browsers
- #19 very easy to compose entities with mixtures of behavior and functionality and everyone can write their own components to modify entities however they desire.
- #20 very easy to compose entities with mixtures of behavior and functionality and everyone can write their own components to modify entities however they desire.
- #21 very easy to compose entities with mixtures of behavior and functionality and everyone can write their own components to modify entities however they desire.
- #22 To solve a real world problem: In a game, if we define Tree / Solider, Tree has no HP no weapon. How to update their own specific functions at the right place?
- #23 An entity can have multiple components, and an entity’s behavior can be changed at runtime by adding, removing, or modifying components.
- #25 http://localhost:8000/defineComponent.html
- #26 registers callback functions on every frame or tick. —> this.el.sceneEl.addBehavior(this);
- #27 http://localhost:8000/animation.html
- #28 http://localhost:8000/primitive.html