Building immersive

worlds with

Mixed Reality

Andrzej Mazur • @end3r • Enclave Games
FullStack London 2019, July 10th 2019

Andrzej 'End3r' Mazur

Web Game Developer
end3r.com | @end3r
Enclave Games studio
js13kGames competition
Gamedev.js meetups in Poland
Gamedev.js Weekly newsletter
Mozilla Tech Speaker
Excited about WebXR and PWAs

Logos

Devices

What's WebXR?

Mixed Reality = Virtual Reality + Augmented Reality

Why WebXR?

Power of the Web
Front-end developers

What's immersion?

Input

Keyboard and mouse, Leap Motion, Gamepad API, Device Orientation...

Motion sickness

Framerate, camera, horizon...

New 360 view

Give reasons to look around.

Immersion over gameplay & gfx

You have to be "inside".

Documentation status

Editor's Draft: immersive-web.github.io/webxr

WebXR browser support

Samples

Spec not ready?

Use the tools instead:
Three.js, A-Frame, React360, Babylon.js, ...

WebVR boilerplate

A-Frame to the rescue!

<a-scene>

Cube example

Cube example

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>A-Frame demo - cube</title>
  <script src="aframe.min.js"></script>
</head>
<body>
  <a-scene>
    <a-cube color="#0095DD" position="0 1 0" rotation="20 40 0"></a-cube>
  </a-scene>
</body>
</html>

Entity Component System

Entities

<a-camera>, <a-light>, <a-cylinder>, <a-entity>...

Components - attributes

<a-entity
  geometry="primitive: torus; radiusTubular: 0.1; segmentsTubular: 12;"
  material="color: #EAEFF2; roughness: 0.1; metalness: 0.5;"
  rotation="10 0 0"
  position="-3 1 0">
</a-entity>

Registry

It's just JavaScript

var scene = document.querySelector('a-scene');
var cylinder = document.createElement('a-cylinder');
cylinder.setAttribute('color', '#FF9500');
cylinder.setAttribute('height', '2');
cylinder.setAttribute('radius', '0.75');
cylinder.setAttribute('position', '3 1 0');
scene.appendChild(cylinder);

Shapes

Animations

<a-cube color="#0095DD" rotation="20 40 0" position="0 1 0">
  <a-animation
    attribute="rotation"
    from="20 0 0"
    to="20 360 0"
    direction="alternate"
    dur="4000"
    repeat="indefinite"
    easing="ease">
  </a-animation>
</a-cube>

Animations

var t = 0;
function render() {
  t += 0.01;
  requestAnimationFrame(render);
  cylinder.setAttribute('position', '3 '+(Math.sin(t*2)+1)+' 0');
}
render();