Tools for the Immersive Web

A-Frame & Unity


Salvador de la Puente González


![QR of the presentation](./imgs/qr.png)

The limits of HTML

Do you remember writing your first webpage?
![Editing HTML on notepad](../aframe-101/imgs/img_notepad.png)
![Saving the file as index.html](../aframe-101/imgs/img_saveas.png)
![Open it with a browser](../aframe-101/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 scene gets messy quickly:

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.

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)
## Unity + WebVR Assets
A complete **IDE + game engine** to create games. With a built-in exporter to **WebGL + wasm**.
### WebVR Assets ![Download the assets from Unity Store](./imgs/asset-store-download.png)
![Adapt the Survival Shooter demo](./imgs/tutorial-project.png) We are going to adapt the _Survival Shooter_ Unity tutorial project.
![Some assets to interface with WebVR and a HTML5 template](./imgs/asset-store-import-options.png) A combination of a HTML5 template and C# scripts.
![The VR camera riggin prefab is the core piece of the assets](./imgs/adding-camera-prefab.png) As simple as replacing the main camera with the **VR camera rigging prefab**.
![You can consider the mono camera as the center of the eyes](./imgs/make-main-camera.png) Consider the **CameraMain camera** as the center of the eyes.
![Code adaptation](./imgs/adapt-rotation.png) Adapt the gameplay, considering **CameraMain** as a your regular _main camera_.
![UI placement](./imgs/ui-placement.png) And **place the UI into world space**, child of the camera.
![Change platform to WebGL](./imgs/build-settings.png) Switch platform to **WebGL**.
![Choose the WebVR template](./imgs/configure-template.png) And choose the **WebVR template**.

Check the demo!

## Resources & Community
### Other important players * [Three.js]( * [BabylonJS]( * [Amazon Sumerian]( * [PlayCanvas](
### A-Frame * [A-Frame]( * [A-Frame Twitter]( * [A-Frame Slack]( * [A-Frame Blog]( * [A-Frame Schools]( * [A-Frame Registry](
### Unity WebVR Assets * [Unity WebVR Assets]( * [#Unity Channel on WebVR Slack]( * [On GitHub](
## Questions?