Tools for the Immersive Web

A-Frame & Unity

Salvador de la Puente González

@salvadelapuente

http://github.com/delapuente

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

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

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](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 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-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.

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.

![](./imgs/loading.png)

![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](https://threejs.org/) * [BabylonJS](https://www.babylonjs.com/) * [Amazon Sumerian](https://aws.amazon.com/sumerian/) * [PlayCanvas](https://playcanvas.com/)

### A-Frame * [A-Frame](https://github.com/aframevr/aframe) * [A-Frame Twitter](https://twitter.com/aframevr) * [A-Frame Slack](https://aframevr-slack.herokuapp.com/) * [A-Frame Blog](https://aframe.io/blog/) * [A-Frame Schools](https://aframe.io/aframe-school/#/) * [A-Frame Registry](https://aframe.io/aframe-registry/)

### Unity WebVR Assets * [Unity WebVR Assets](https://assetstore.unity.com/packages/templates/systems/webvr-assets-109152) * [#Unity Channel on WebVR Slack](http://webvr-slack.herokuapp.com/) * [On GitHub](https://github.com/mozilla/unity-webvr-export)

## Questions?