webvr - contentful: content infrastructure for digital...
TRANSCRIPT
![Page 1: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/1.jpg)
@g33konaut
WebVRThe next frontier
1
![Page 2: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/2.jpg)
@g33konaut
Привет москва!
I’m Martin from Zürich, Switzerland.
Software Engineer
@ Archilogic
2
![Page 3: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/3.jpg)
@g33konaut
What we’ll cover
● Making 3D things on the web● What is WebVR?● WebVR 101● What are the challenges?
3
![Page 4: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/4.jpg)
@g33konaut
Making 3D things on the web
4
![Page 5: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/5.jpg)
@g33konaut
WebGL
● Using a <canvas> element and WebGL● Libraries such as Three.js, Babylon, …
5
![Page 6: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/6.jpg)
@g33konaut
Three.js
Canvas + Renderer Camera Scene
6
![Page 7: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/7.jpg)
@g33konaut
Three.js
var renderer = new THREE.WebGLRenderer(),
scene = new THREE.Scene(),
camera = new THREE.PerspectiveCamera(...),
box = new THREE.Mesh(...)
scene.add(box)
7
![Page 8: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/8.jpg)
@g33konaut
Three.js
function update() {
box.rotation.y += Math.PI / 100
renderer.render(scene, camera)
requestAnimationFrame(update)
}
requestAnimationFrame(update)
8
![Page 9: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/9.jpg)
@g33konaut
VR
9
![Page 10: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/10.jpg)
@g33konaut
VR - what’s it good for?
● Maps / Navigation● Education / Research● Healthcare● Entertainment / Journalism● Marketing
10
![Page 11: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/11.jpg)
@g33konaut
VR Hardware
● Oculus Rift● GearVR● HTC Vive● Google Cardboard● OSVR● ...etc...
11
![Page 12: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/12.jpg)
@g33konaut
It is a fragmented ecosystem
● Capabilities● Applications
12
![Page 13: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/13.jpg)
@g33konaut
Devices & Capabilities
13
Oculus Rift HTC Vive Gear VR Cardboard
Position tracking
Roomscale tracking
Controls 2x 2x Touchpad ButtonMobile
![Page 14: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/14.jpg)
@g33konaut
What is WebVR?
14
![Page 15: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/15.jpg)
@g33konaut
Creating should be for everyone
15
![Page 16: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/16.jpg)
@g33konaut
Why WebVR?
16
![Page 17: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/17.jpg)
@g33konaut
WebVR...
...will work on all devices with a browser
...will allow to respond to the capabilities
...will make sharing & discovery easier
17
![Page 18: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/18.jpg)
@g33konaut 18
![Page 21: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/21.jpg)
@g33konaut
How does it work?
21
![Page 22: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/22.jpg)
@g33konaut
What’s the VR web gonna be?
22
![Page 24: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/24.jpg)
@g33konaut
Open Questions & Challenges
24
![Page 25: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/25.jpg)
@g33konaut
Input
25
![Page 26: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/26.jpg)
@g33konaut
The obvious choices may not be the best...
26
![Page 27: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/27.jpg)
@g33konaut
Using gaze or “ray input”
27
![Page 28: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/28.jpg)
@g33konaut
UI
28
![Page 29: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/29.jpg)
@g33konaut
We need to rethink common UI patterns
29
![Page 30: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/30.jpg)
@g33konaut
A few ideas for input hardware
● Gamepad● LEAPMotion● Myo● Microsoft Kinect● Intel RealSense
30
![Page 31: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/31.jpg)
@g33konaut
Navigation / Locomotion
31
![Page 32: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/32.jpg)
@g33konaut
How do we move in VR?
32
Source: @walaber [this tweet]
![Page 33: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/33.jpg)
@g33konaut
Try it out!
● A-Frame● jonathanzwhite.github.io/vrlist● webvr.info
33
![Page 34: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/34.jpg)
@g33konaut
One more thing...
34
“If the computer is the bicycle for our mind,
then VR is the teleporter.”
- Martin Splitt
![Page 35: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut](https://reader031.vdocument.in/reader031/viewer/2022022012/5b1c67f57f8b9aa1588b62a4/html5/thumbnails/35.jpg)
@g33konaut
спасибо!
Slides: bit.ly/holyjs-webvr
Web: 3dify.archilogic.com
Twitter: @g33konaut
35