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 look into A-Frame

483 views

Published on

Brief introduction to A-Frame before hands on tutorial

Published in: Technology
  • Be the first to comment

A look into A-Frame

  1. 1. Looking into A- Frame @diekus @samsunginternet
  2. 2. What is this A-Frame thing everybody talks about?
  3. 3. A-Frame Web framework for building VR experiences Allows to build scenes with HTML that have unlimited access to JavaScript, three.js and existing Web APIs. It is based in the Entity- Component-System
  4. 4. Scene and elements DOM manipulation Access to Web APIs Everything is an Entity A-Frame
  5. 5. <html> <head> <script src=""> </script> </head> <body> </body> </html>
  6. 6. <html> <head> <script src="https://aframe.io/releases/0.5.0/aframe.min.js"> </script> </head> <body> <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#706CF5"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5“ color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4“ color="#7BC8A4"></a-plane> <a-sky color="#E3E3E3"></a-sky> </a-scene> </body> </html>
  7. 7. headset*mobilebrowserA-Frame content ++-> *optional
  8. 8. Delivery Platform Widest delivery network in existence: web
  9. 9. source: webvr.rocks * Compatible with WebVR
  10. 10. A-Frame 101 Basics beyond the basics
  11. 11. Type of experiences
  12. 12. Entity-Component-System AFRAME.registerComponent('foo', { schema: { bar: {type: 'number'}, baz: {type: 'string'} }, init: function () { // Do something when component is plugged in. }, update: function () { // Do something when component's data is updated. } }); <entity></entity> Entity Component
  13. 13. A-Frame handles Assets Trying to fetch assets while rendering is slower than fetching all assets before rendering.
  14. 14. Performance • Uses Custom Elements that are not touched by the browser rendering system. • Rendered in WebGL. • 90+ FPS room scale experiences (HTC Vive). • Effects of setAttribute are synchronous. • Data is not serialised back to the DOM.
  15. 15. performance is ultimately determined by the complexity and characteristics of each individual scene.
  16. 16. A-Frame Tips Sharing is caring.
  17. 17. The A-Frame Registry: Free open-source components https://aframe.io/aframe-registry/
  18. 18. Progressive Enhancement Content that adapts to the platform it is displayed on is accessible and elegant. You can go from an ‘engaging’ magic window to a full 6-DoF experience.
  19. 19. -Hey! Check out this 360° pic I took on my holidays! -unlock phone. -navigate home screen to get to App Store. -open App Store. -click on search -type the name of a 360° pic player -click install. -wait till it downloads. -search for app icon on home screen. -click on app icon. -load picture. -view
  20. 20. Hey! Check out this 360° pic I took on my holidays! http://bit.ly/penca-beach
  21. 21. You want to break free • Pre-approved content. • Closed environment. • Only most downloaded apps are featured prominently. • Restrictive policies. • Huge amount of friction. • No search engine discoverability. “ ” …Seriously?
  22. 22. Go offline. PWA-ise it. From the browser to your home screen to your headset. Independent of network and connectivity. Frictionless experiences by design. Just share a link. Try it now:
  23. 23. Hands-On Time to put this in practice
  24. 24. Useful Links • @samsunginternet • @aframevr • https://aframevr-slack.herokuapp.com/ • /samsunginternet • Samsunginternet • https://aframe.io • https://samsunginter.net

×