Introduction to A-Frame
•
6 recomendaciones•3,523 vistas
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.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Introduction to A-Frame
Similar a Introduction to A-Frame (20)
Más de Daosheng Mu
Último
Último (20)
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.”
- 5. Recap: WebVR
- 6. Recap: WebVR
- 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
- 11. SUCCESS STORIES
- 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