A-Frame: building virtual reality experiences for the web
- 1. A-Frame: Building virtual reality experiences for the Web @doJester13
- 2. Nice to meet you Erik Minarini @doJester13 Unity and Android Developer at Touchlabs Manager at GDG Bologna Founder of ToughNutToCrack
- 3. Virtual reality (VR) is an interactive computer-generated experience taking place within a simulated environment, that incorporates mainly auditory and visual, but also other types of sensory feedback like haptic What is VR?
- 5. Virtual reality is growing so fast in many areas. VR isn’t just for games, it is also largely used in business, marketing, commercial and many others. VR is growing
- 8. The WebVR is a javascript API that provides interfaces to VR hardware to allow developers to build compelling, comfortable VR experiences on the web.
- 10. Developing a virtual reality application, in particular for the web, could seem hard, but you shouldn’t be afraid. There is a solution! Are you scared?
- 11. A open source web framework for building virtual reality experiences A-Frame
- 14. <html> <head> <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> </head> <body> <a-scene> <a-box color="#4CC3D9" position="-1 0.5 -3" rotation="0 45 0"></a-box> <a-cylinder color="#FFC65D" position="1 0.75 -3" radius="0.5" height="1.5"></a-cylinder> <a-sphere color="#EF2D5E" position="0 1.25 -5" radius="1.25"></a-sphere> <a-plane color="#7BC8A4" position="0 0 -4" rotation="-90 0 0" width="4" height="4"></a-plane> <a-sky color="#303030"></a-sky> </a-scene> </body> </html>
- 15. <html> <head> <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> </head> <body> <a-scene> <a-box color="#4CC3D9" position="-1 0.5 -3" rotation="0 45 0"></a-box> <a-cylinder color="#FFC65D" position="1 0.75 -3" radius="0.5" height="1.5"></a-cylinder> <a-sphere color="#EF2D5E" position="0 1.25 -5" radius="1.25"></a-sphere> <a-plane color="#7BC8A4" position="0 0 -4" rotation="-90 0 0" width="4" height="4"></a-plane> <a-sky color="#303030"></a-sky> </a-scene> </body> </html>
- 17. ECS architecture is a common and desirable pattern in 3D and game development that follows the composition over inheritance and hierarchy principle Entity-Component-System
- 18. Entities are container objects into which components can be attached. Entities are the base of all objects in the scene. Without components, entities neither do not render anything, similar to empty <div>s. Entities
- 19. Components are reusable modules or data containers that can be attached to entities to provide appearance, behavior, and/or functionality. All logic is implemented through components, and we define different types of objects by mixing, matching, and configuring components. Components
- 20. Systems provide global scope, management, and services for classes of components. Systems are often optional, but we can use them to separate logic and data; systems handle the logic, components act as data containers. Systems
- 21. Entities are represented by the <a-entity> element and prototype. Components are represented by HTML attributes on <a-entity>‘s. Systems are represented by <a-scene>‘s HTML attributes. ...in A-Frame
- 22. <a-scene> <a-box color="#4CC3D9" position="-1 0.5 -3" rotation="0 45 0"></a-box> <a-cylinder color="#FFC65D" position="1 0.75 -3" radius="0.5" height="1.5"></a-cylinder> <a-sphere color="#EF2D5E" position="0 1.25 -5" radius="1.25"></a-sphere> <a-plane color="#7BC8A4" position="0 0 -4" rotation="-90 0 0" width="4" height="4"></a-plane> <a-sky color="#303030"></a-sky> </a-scene>
- 23. A curated collection of A-Frame ready-to-use components. Registry https://aframe.io/aframe-registry/
- 29. 250+ contributors 8000+ stargazers 4500+ members 100s of featured projects
- 31. Fear of the Sky http://www.360syria.com/ Amnesty International UK