Downloaded 18 times
More Related Content
![Selenium 4 with Simon Stewart [Webinar]](https://cdn.slidesharecdn.com/ss_thumbnails/selenium4browserstackwebinar-190702161824-thumbnail.jpg?width=640&height=640&fit=bounds)
More from Luis Diego González-Zúñiga, PhD
![Getting Started with Apache Spark: Big Data Made Simple [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/apachesparkgettingstarted-260203175547-8361bcc3-thumbnail.jpg?width=640&height=640&fit=bounds)
A look into A-Frame
- 1.
- 2. What is this A-Framething everybody talks about?
- 4. A-Frame Web frameworkfor 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
- 5. Scene and elementsDOM manipulation Access to Web APIs Everything is an Entity A-Frame
- 6.
- 7. <html> <head> <script src="https://aframe.io/releases/0.5.0/aframe.min.js"> </script> </head> <body> <a-scene> <a-box position="-10.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>
- 10.
- 11. Delivery Platform Widest deliverynetwork in existence: web
- 12. source: webvr.rocks * Compatiblewith WebVR
- 13. A-Frame 101 Basics beyondthe basics
- 14.
- 15. 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
- 16. A-Frame handles Assets Tryingto fetch assets while rendering is slower than fetching all assets before rendering.
- 17. Performance • Uses CustomElements 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.
- 18. performance is ultimatelydetermined by the complexity and characteristics of each individual scene.
- 19. A-Frame Tips Sharing iscaring.
- 20. The A-Frame Registry:Free open-source components https://aframe.io/aframe-registry/
- 21. Progressive Enhancement Content thatadapts 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.
- 22. -Hey! Check outthis 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
- 23. Hey! Check outthis 360° pic I took on my holidays! http://bit.ly/penca-beach
- 24. You want tobreak free • Pre-approved content. • Closed environment. • Only most downloaded apps are featured prominently. • Restrictive policies. • Huge amount of friction. • No search engine discoverability. “ ” …Seriously?
- 25. Go offline. PWA-iseit. 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:
- 26. Hands-On Time to putthis in practice
- 28. Useful Links • @samsunginternet •@aframevr • https://aframevr-slack.herokuapp.com/ • /samsunginternet • Samsunginternet • https://aframe.io • https://samsunginter.net
Editor's Notes
- #5 -HTML: we can place objects within our scene using assorted primitive elements. This is extremely readable, and we could copy and paste this HTML to any other scene and it would behave the same. -JS: We can use traditional JavaScript DOM APIs to manipulate A-Frame scenes to add logic, behavior, and functionality -ECS: is a pattern popular in game development and is prominent in game engines like Unity. ECS favors composition over inheritance. Every single object in the scene is an entity.
- #7 So lets start with something simple. What is this?
- #8 Describe the code VR experience that would be built like this a-scene: Tons of repeated code eliminated with one clean line of HTML. Lights, camera, support for VR devices.
- #9 A VR experience that looks like this: Has anybody built a VR experience? If so, what do you use? How do you build something like this? NOTICE: Switch to WebVR button
- #10 Would be experienced like this
- #11 Experience that would be formed like this
- #12 And distributed like this:
- #13 A bit more complicated, if you wanna target VR development youre probably thinking one of the plat on the left. One common denominator: WebVR It would be up to you to make sure that the experience scales gracefully!
- #17 Good for performance. Resources that are already cached.
- #18 More about custom elements: http://www.w3.org/TR/custom-elements/ The effects of setAttribute are synchronous. When modifying an entity’s position, there is almost zero overhead. Doing setAttribute('position', {x: 1, y: 2, z: 3}) is practically directly modifying the underlying three.js objects themselves. When changing an entity’s properties, data is not serialized back to the DOM. This reduces the DOM overhead and most modifications are done directly in memory, similar to Virtual DOM. HTML attributes explicitly set from an HTML file are cached in memory.
- #19 More about custom elements: http://www.w3.org/TR/custom-elements/ The effects of setAttribute are synchronous. When modifying an entity’s position, there is almost zero overhead. Doing setAttribute('position', {x: 1, y: 2, z: 3}) is practically directly modifying the underlying three.js objects themselves. When changing an entity’s properties, data is not serialized back to the DOM. This reduces the DOM overhead and most modifications are done directly in memory, similar to Virtual DOM. HTML attributes explicitly set from an HTML file are cached in memory.
- #21 https://aframe.io/aframe-registry/
- #23 FRICTIONLESS BY DESIGN