Virtual Reality
with A-Frame
Andrzej Mazur • @end3r • Enclave Games
Academy of Fine Arts in Warsaw, Poland, October 27th 2017
Andrzej Mazur
- HTML5 Game Developer
- Enclave Games studio
- js13kGames competition
- Gamedev.js meetups
- Gamedev.js Weekly newsletter
- Warsaw Open Device Lab
- website: end3r.com
- twitter: @end3r
- github: end3r
Devices
History of VR
View Master (1939)
History of VR
Project Headsight (1961)
VR in pop culture
Tron (1982), Star Trek (1987), Matrix (1999)
VR gaming history
Sega Genesis (1991)
VR gaming history
Virtua Racing (1993)
Modern times
Norvegian Army (2014)
What's WebVR?
Browser APIs that enable WebGL rendering to headsets and access to VR sensors.
Why WebVR?
Power of the Web
Progressive enhancement
WebVR browser support
Documentation status
Editor's Draft
more info: mozvr.com, webvr.info.
Is WebVR Ready?
WebVR boilerplate
A-Frame to the rescue!
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
Registry
Shapes
A-Break
Inspector
Ctrl + Alt + i
Hologram
Showcase
A-Painter
A-Blast
A Saturday Night
Journey to Mars
City Builder
Data Visualization
AR.js
A week of A-Frame
Lessons learned
Input
Keyboard and mouse, Leap Motion, Gamepad API, Device Orientation...
Totally new UX and UI
Motion sickness
Framerate, camera, horizon... nose?
New 360 view
Give reasons to look around.
Immersion over gameplay & gfx
You have to be "inside".
js13kGames
Where to go next?
Go and build the future of the Web!
Find out how millions of people will use it.
Thanks! Questions?
@end3r