WebVR
The next frontier
1
@g33konaut
Привет москва!
I’m Martin from Zürich, Switzerland.
Software Engineer
@ Archilogic
2
@g33konaut
What we’ll cover
3
@g33konaut
Making 3D things on the web
4
@g33konaut
WebGL
5
@g33konaut
Three.js
6
Canvas + Renderer
Camera
Scene
@g33konaut
Three.js
var renderer = new THREE.WebGLRenderer(),� scene = new THREE.Scene(),� camera = new THREE.PerspectiveCamera(...),
box = new THREE.Mesh(...)
scene.add(box)
7
@g33konaut
Three.js
function update() {
box.rotation.y += Math.PI / 100
renderer.render(scene, camera)
requestAnimationFrame(update)
}
requestAnimationFrame(update)
8
@g33konaut
VR
9
@g33konaut
VR - what’s it good for?
10
@g33konaut
VR Hardware
11
@g33konaut
It is a fragmented ecosystem
12
@g33konaut
Devices & Capabilities
13
| Oculus $599* | Vive $799 | Gear VR $99* | Daydream $79 | Cardboard $5 |
Position tracking | | | | | |
Roomscale tracking | | | | | |
Controls | 2x | 2x | Touchpad | 1x | Button |
Mobile | | | | | |
@g33konaut
What is WebVR?
14
@g33konaut
Creating is AWESOME
15
@g33konaut
Creating should be for everyone & shareable!
16
@g33konaut
How about...
17
+
@g33konaut
We’ve got this now!
18
+
=
@g33konaut
WebVR...
...will work on all devices with a browser*
...will allow to respond to the capabilities
...will make sharing & discovery easier
19
@g33konaut
20
@g33konaut
How does it work?
21
@g33konaut
Spec in progress!
22
@g33konaut
Step 1: Get VR displays
navigator.getVRDisplays()�.then((displays) => {� // do something with the display�})
23
@g33konaut
Step 2: Start to render on the display
disp.requestPresent([{ source: canvas }])�.then(() => {� render(disp)�})
24
@g33konaut
Step 3: Get position/orientation & draw
function render(display) {� display.requestAnimationFrame(...)� display.getFrameData(frameData)� render3dThings(frameData)� display.submitFrame()�}
25
@g33konaut
Wait wait wait - VRFrameData?
readonly DOMHighResTimeStamp timestamp� readonly Float32Array leftProjectionMatrix� readonly Float32Array leftViewMatrix� readonly VRPose pose
...�
26
@g33konaut
What’s the VR web gonna be?
27
@g33konaut
By @Lane_Max
28
@g33konaut
Responsive WebVR
29
@g33konaut
Responsive WebVR
30
@g33konaut
WebVR Polyfill
31
@g33konaut
Open Questions & Challenges
32
@g33konaut
Input
33
@g33konaut
The obvious choices may not be the best...
34
@g33konaut
Using gaze or “ray input”
35
@g33konaut
Using the controllers is possible
36
@g33konaut
UI
37
@g33konaut
We need to rethink common UI patterns
38
@g33konaut
A few ideas for input hardware
39
@g33konaut
Navigation / Locomotion
40
@g33konaut
How do we move in VR?
41
Source: @walaber [this tweet]
@g33konaut
Presence / Social
42
@g33konaut
43
@g33konaut
State of the union
44
n/a yet
@g33konaut
Beyond VR
45
@g33konaut
Beyond VR
46
@g33konaut
Try it out!
47
@g33konaut
One more thing...
48
“If the computer is the bicycle for our mind,
then VR is the teleporter.”
@g33konaut
спасибо!
49
@g33konaut