Recommended
More Related Content
What's hot
What's hot (20)
Similar to A look into A-Frame
Similar to A look into A-Frame (20)
More from Luis Diego González-Zúñiga, PhD
More from Luis Diego González-Zúñiga, PhD (19)
Recently uploaded
Recently uploaded (20)
A look into A-Frame
- 2. What is this A-Frame thing everybody talks about?
- 4. 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
- 5. Scene and elements DOM manipulation Access to Web APIs Everything is an Entity A-Frame
- 7. <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>
- 11. Delivery Platform Widest delivery network in existence: web
- 12. source: webvr.rocks * Compatible with WebVR
- 13. A-Frame 101 Basics beyond the basics
- 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 Trying to fetch assets while rendering is slower than fetching all assets before rendering.
- 17. 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.
- 18. performance is ultimately determined by the complexity and characteristics of each individual scene.
- 19. A-Frame Tips Sharing is caring.
- 20. The A-Frame Registry: Free open-source components https://aframe.io/aframe-registry/
- 21. 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.
- 22. -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
- 23. Hey! Check out this 360° pic I took on my holidays! http://bit.ly/penca-beach
- 24. 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?
- 25. 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:
- 26. Hands-On Time to put this in practice
- 28. Useful Links • @samsunginternet • @aframevr • https://aframevr-slack.herokuapp.com/ • /samsunginternet • Samsunginternet • https://aframe.io • https://samsunginter.net
Editor's Notes
- -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.
- So lets start with something simple. What is this?
- 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.
- 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
- Would be experienced like this
- Experience that would be formed like this
- And distributed like this:
- 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!
- Good for performance. Resources that are already cached.
- 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.
- 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.
- https://aframe.io/aframe-registry/
- FRICTIONLESS BY DESIGN