A-Frame 101

Immersive experiences in HTML

Salvador de la Puente González

@salvadelapuente

http://github.com/delapuente

https://delapuente.github.io/presentations/

![QR of the presentation](./imgs/qr.png) http://bit.ly/2w6Gucv

## 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?

Nope

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

Training

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

Art

[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](https://www.w3schools.com/html/html_editors.asp)

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](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API), [WebVR](https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API), [Web Audio](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API), [Gamepad](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API) 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-scene></a-scene>

A-Frame uses [Custom Elements](http://jonrimmer.github.io/are-we-componentized-yet/) 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](https://threejs.org/) 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](https://glitch.com/~aframe-planetary) 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](https://github.com/aframevr/aframe-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](https://twitter.com/aframevr) Follow us on Twitter!

https://github.com/aframevr/aframe And get involved in our GitHub community!

[A-Frame schools](https://aframe.io/aframe-school/#/) An interactive tutorial covering tons of aspects.

[A-Frame Blog](https://aframe.io/blog/) News and hot topics regarding A-Frame. Participate and [suggest new content](https://github.com/aframevr/aframe/issues/2957)!

[A-Frame registry](https://aframe.io/aframe-registry/) Exntend your capabilities by using 3rd party components.

[A-Frame slack](https://aframevr-slack.herokuapp.com/) Join live discussions regarding A-Frame and WebVR.

Check the [slide deck](http://bit.ly/2w6Gucv) And its [codepens](http://codepen.io/collection/XMjmvm/) also.

## Questions?