Upload
vanngoc
View
220
Download
0
Embed Size (px)
Citation preview
@g33konaut
WebVRThe next frontier
1
@g33konaut
Привет москва!
I’m Martin from Zürich, Switzerland.
Software Engineer
@ Archilogic
2
@g33konaut
What we’ll cover
● Making 3D things on the web● What is WebVR?● WebVR 101● What are the challenges?
3
@g33konaut
Making 3D things on the web
4
@g33konaut
WebGL
● Using a <canvas> element and WebGL● Libraries such as Three.js, Babylon, …
5
@g33konaut
Three.js
Canvas + Renderer Camera Scene
6
@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?
● Maps / Navigation● Education / Research● Healthcare● Entertainment / Journalism● Marketing
10
@g33konaut
VR Hardware
● Oculus Rift● GearVR● HTC Vive● Google Cardboard● OSVR● ...etc...
11
@g33konaut
It is a fragmented ecosystem
● Capabilities● Applications
12
@g33konaut
Devices & Capabilities
13
Oculus Rift HTC Vive Gear VR Cardboard
Position tracking
Roomscale tracking
Controls 2x 2x Touchpad ButtonMobile
@g33konaut
What is WebVR?
14
@g33konaut
Creating should be for everyone
15
@g33konaut
Why WebVR?
16
@g33konaut
WebVR...
...will work on all devices with a browser
...will allow to respond to the capabilities
...will make sharing & discovery easier
17
@g33konaut 18
@g33konaut
How does it work?
21
@g33konaut
What’s the VR web gonna be?
22
@g33konaut
Open Questions & Challenges
24
@g33konaut
Input
25
@g33konaut
The obvious choices may not be the best...
26
@g33konaut
Using gaze or “ray input”
27
@g33konaut
UI
28
@g33konaut
We need to rethink common UI patterns
29
@g33konaut
A few ideas for input hardware
● Gamepad● LEAPMotion● Myo● Microsoft Kinect● Intel RealSense
30
@g33konaut
Navigation / Locomotion
31
@g33konaut
How do we move in VR?
32
Source: @walaber [this tweet]
@g33konaut
Try it out!
● A-Frame● jonathanzwhite.github.io/vrlist● webvr.info
33
@g33konaut
One more thing...
34
“If the computer is the bicycle for our mind,
then VR is the teleporter.”
- Martin Splitt
@g33konaut
спасибо!
Slides: bit.ly/holyjs-webvr
Web: 3dify.archilogic.com
Twitter: @g33konaut
35