A-Frame 101

Immersive experiences in HTML


Salvador de la Puente González


![QR of the presentation](./imgs/qr.png)
## Virtual Reality on the Web
VR is a new media.

It is about presence:

the feeling of being there

Content has not to be realistic... ![Cartoon style in Job Simulator](./imgs/job-simulator.jpg)

…but it must provide meaningful, presence-focused interactions.

Can you be more specific?


The Web is open, frictionless and reach millions of individuals around the world. WebVR experiences are always **one link away**.
The Web is the perfect breeding ground for **experimentation**.
Arachnophobia treatment by exposure to virtual spiders

Medical Teraphy

Travelling through Earth


NASA training with advanced VR devices


Lord of The Rings, Gandalf and Balrog fight on the bridge


[This slide is for your project]

The limits of HTML

Do you remember writing your first webpage?
![Editing HTML on notepad](./imgs/img_notepad.png)
![Saving the file as index.html](./imgs/img_saveas.png)
![Open it with a browser](./imgs/img_chrome.png) [HTML editors at W3Schools](

Web technologies welcome every kind of author.

HTML and CSS are friendly, accessible and powerful languages.

They do great for 2D layouts!

A complex grid layout in CSS

Example by Jen Simmons

But for immersive scenes...
You will need JavaScript to create and manipulate 3D scenes, which means using [WebGL](, [WebVR](, [Web Audio](, [Gamepad]( and other powerful but **complex** browser APIs.

The boilerplate for a simple VR gets messy fast:

Making really hard for authors to start experimenting with VR.
## A-Frame
A framework for **building 3D, VR & AR experiences**. It drastically reduces the boilerplate to:
A-Frame uses [Custom Elements]( to extend the HTML vocabulary enabling the use of new **tags for scene management** such as `a-scene`, `a-box` or `a-camera`.
A-Frame uses [three.js]( to render the scene. It exposes all the power of three.js in a **friendly, declarative fashion**.

A 360 picture viewer is 7 lines of HTML code.

See the Pen 360º panorama viewer by Salvador de la Puente González (@lodr) on CodePen.

An AR model viewer in 10 lines of HTML code.

See the Pen AR Viewer by Salvador de la Puente González (@lodr) on CodePen.

Entering VR mode is as simple as clicking ![VR-Mode icon on bottom right corner](./imgs/vr-mode.png)
A-Frame also takes advantage and **leverages HTML**:

The scene hierarchy is built using tag nesting.

See the Pen A-Frame Scene Hierarchy by Salvador de la Puente González (@lodr) on CodePen.

Scene manipulation is achieved by modifying the DOM.

See the Pen A-Frame Scene Manipulation by Salvador de la Puente González (@lodr) on CodePen.

Remix [aframe-planetary sandbox]( on Glitch!
It uses HTML syntax to expose a **component-based architecture**. ```html <a-entity component another-component="value" yet-another-component="property: val; anotherProperty: val"> </a-entity> ```
![Component composition on an entity](./imgs/ecs-composition.gif)
## The Scene Inspector
[The inspector]( allows the developer to look into the whole scene, manipulate its elements and even export the resulting HTML.

Open the inspector pressing ctrl + alt + i.

Go standalone.
## Resources & Community
[@aframevr]( Follow us on Twitter! And get involved in our GitHub community!
[A-Frame schools]( An interactive tutorial covering tons of aspects.
[A-Frame Blog]( News and hot topics regarding A-Frame. Participate and [suggest new content](!
[A-Frame registry]( Exntend your capabilities by using 3rd party components.
[A-Frame slack]( Join live discussions regarding A-Frame and WebVR.
Check the [slide deck]( And its [codepens]( also.
## Questions?