Building immersive

worlds with

Mixed Reality

FullStack London 2019

Andrzej Mazur@end3rEnclave Games
FullStack London 2019, July 10th 2019

Andrzej 'End3r' Mazur

Andrzej Mazur

Logos

Devices

What's WebXR?

Mixed Reality = Virtual Reality + Augmented Reality

Why WebXR?

  • Power of the Web
  • Front-end developers

What's immersion?

Input

Oculus Touch

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

Motion sickness

Motion sickness

Framerate, camera, horizon...

New 360 view

Polar Sea

Give reasons to look around.

Immersion over gameplay & gfx

Rainbow Membrane

You have to be "inside".

Documentation status

WebXR spec

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

WebXR browser support

CanIUse

Samples

WebXR samples

Spec not ready?

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

WebVR boilerplate

Stuff is hard

A-Frame to the rescue!

A-Frame

<a-scene>

Cube example

A-Frame cube

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

A-Frame 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();

Animations demo

end3r.github.io/MDN-Games-3D/A-Frame/shapes.html

A-Break

A-Break

Quack Whack

Quack Whack

Inspector

A-Frame inspector

Ctrl + Alt + i

Amazon Sumerian

Sumerian

Spoke

Spoke

Hubs

Hubs

hubs.mozilla.com

Need inspiration?

A week of A-Frame

A-Painter

A-Painter

aframe.io/a-painter/

A-Blast

A-Blast

aframe.io/a-blast/

A Saturday Night

A Saturday Night

aframe.io/a-saturday-night/

Journey to Mars

City Builder

Data Visualization

AR.js

15:45, Merging Realities by Fabien Benetou

A week of A-Frame

aframe.io/blog

js13kGames

js13kGames WebXR

js13kgames.com/webxr

Where to go next?

Go and build

the future of the Web!

Thanks! Questions?

 

 

end3r.com/slides/fullstack19-webxr

 

 

Andrzej Mazur@end3rEnclave Games

Ender Efka @end3r