SlideShare ist ein Scribd-Unternehmen logo
1 von 33
Downloaden Sie, um offline zu lesen
A-Frame: Building virtual
reality experiences for the
Web
@doJester13
Nice to meet you
Erik Minarini
@doJester13
Unity and Android Developer at Touchlabs
Manager at GDG Bologna
Founder of ToughNutToCrack
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?
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
https://immersive-web.github.io/webvr/
The WebVR is a javascript API that provides interfaces to VR hardware to allow
developers to build compelling, comfortable VR experiences on the web.
https://webvr.rocks/
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?
A open source web framework for building virtual reality experiences
A-Frame
<html>
<head>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
</head>
</html>
<html>
<head>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
</head>
<body>
<a-scene>
</a-scene>
</body>
</html>
<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>
<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>
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
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
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
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
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
<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>
A curated collection of A-Frame ready-to-use components.
Registry
https://aframe.io/aframe-registry/
Just <ctrl>+<alt>+i.
Inspector
Community
https://aframe.io/blog/
250+ contributors
8000+ stargazers
4500+ members
100s of featured projects
A-Painter
https://blog.mozvr.com/a-painter/
Mozilla
Fear of the Sky
http://www.360syria.com/
Amnesty International UK
Musical Forest
https://experiments.withgoogle.com/musical-forest
Google Creative Lab
Thank you
@doJester13

Weitere ähnliche Inhalte

Ähnlich wie A-Frame: building virtual reality experiences for the web

iPhone/iPad Development with Titanium
iPhone/iPad Development with TitaniumiPhone/iPad Development with Titanium
iPhone/iPad Development with Titanium
Axway Appcelerator
 
Y1 gd engine_terminology
Y1 gd engine_terminologyY1 gd engine_terminology
Y1 gd engine_terminology
Shaz Riches
 
Y1 gd engine_terminologyhj
Y1 gd engine_terminologyhjY1 gd engine_terminologyhj
Y1 gd engine_terminologyhj
Shaz Riches
 
A Conceptual Model Of An Erp System Using Uml
A Conceptual Model Of An Erp System Using UmlA Conceptual Model Of An Erp System Using Uml
A Conceptual Model Of An Erp System Using Uml
Deborah Gastineau
 

Ähnlich wie A-Frame: building virtual reality experiences for the web (20)

Introduction to html5 game programming with ImpactJs
Introduction to html5 game programming with ImpactJsIntroduction to html5 game programming with ImpactJs
Introduction to html5 game programming with ImpactJs
 
iPhone/iPad Development with Titanium
iPhone/iPad Development with TitaniumiPhone/iPad Development with Titanium
iPhone/iPad Development with Titanium
 
Appcelerator iPhone/iPad Dev Con 2010 San Diego, CA
Appcelerator iPhone/iPad Dev Con 2010 San Diego, CAAppcelerator iPhone/iPad Dev Con 2010 San Diego, CA
Appcelerator iPhone/iPad Dev Con 2010 San Diego, CA
 
What Is BuildContext In Flutter And It's Importance
What Is BuildContext In Flutter And It's ImportanceWhat Is BuildContext In Flutter And It's Importance
What Is BuildContext In Flutter And It's Importance
 
Gridforum Rick Reesen Virtual World Technologies To Manage A Grid 20080402
Gridforum Rick Reesen Virtual World Technologies To Manage A Grid 20080402Gridforum Rick Reesen Virtual World Technologies To Manage A Grid 20080402
Gridforum Rick Reesen Virtual World Technologies To Manage A Grid 20080402
 
Build UI of the Future with React 360
Build UI of the Future with React 360Build UI of the Future with React 360
Build UI of the Future with React 360
 
Resume_A_Vinod
Resume_A_VinodResume_A_Vinod
Resume_A_Vinod
 
Y1 gd engine_terminology
Y1 gd engine_terminologyY1 gd engine_terminology
Y1 gd engine_terminology
 
Y1 gd engine_terminology
Y1 gd engine_terminologyY1 gd engine_terminology
Y1 gd engine_terminology
 
Making real time data accessible through mixed reality
Making real time data accessible through mixed realityMaking real time data accessible through mixed reality
Making real time data accessible through mixed reality
 
Y1 gd engine_terminologyhj
Y1 gd engine_terminologyhjY1 gd engine_terminologyhj
Y1 gd engine_terminologyhj
 
Byte Conf React Native 2018
Byte Conf React Native 2018Byte Conf React Native 2018
Byte Conf React Native 2018
 
Bhavin_Resume
Bhavin_ResumeBhavin_Resume
Bhavin_Resume
 
A Conceptual Model Of An Erp System Using Uml
A Conceptual Model Of An Erp System Using UmlA Conceptual Model Of An Erp System Using Uml
A Conceptual Model Of An Erp System Using Uml
 
Best-AI-Image-Generator.pdf
Best-AI-Image-Generator.pdfBest-AI-Image-Generator.pdf
Best-AI-Image-Generator.pdf
 
Miha Lesjak Mobilizing The Web with Web Runtime
Miha Lesjak Mobilizing The Web with Web RuntimeMiha Lesjak Mobilizing The Web with Web Runtime
Miha Lesjak Mobilizing The Web with Web Runtime
 
Stanfy - Crafting Custom Software Systems
Stanfy - Crafting Custom Software SystemsStanfy - Crafting Custom Software Systems
Stanfy - Crafting Custom Software Systems
 
Unity Game Engine - Basics
Unity Game Engine - BasicsUnity Game Engine - Basics
Unity Game Engine - Basics
 
Flutter Introduction and Architecture
Flutter Introduction and ArchitectureFlutter Introduction and Architecture
Flutter Introduction and Architecture
 
Lessons Learned: Designer/Developer Productivity in Windows Presentation Foun...
Lessons Learned: Designer/Developer Productivity in Windows Presentation Foun...Lessons Learned: Designer/Developer Productivity in Windows Presentation Foun...
Lessons Learned: Designer/Developer Productivity in Windows Presentation Foun...
 

Kürzlich hochgeladen

Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Kürzlich hochgeladen (20)

Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 

A-Frame: building virtual reality experiences for the web