35
@g33konaut WebVR The next frontier 1

WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut

  • Upload
    vanngoc

  • View
    226

  • Download
    0

Embed Size (px)

Citation preview

Page 1: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut

@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

@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

@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

@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

@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

@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

@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

@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

@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

@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

@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

@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

@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

@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

@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

@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

@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

@g33konaut 18

Page 19: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut

@g33konaut

WebVR demo 1: Photo sphere

19

Page 20: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut

@g33konaut

WebVR Demo 2: Portals

20

Page 21: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut

@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

@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

@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

@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

@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

@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

@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

@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

@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

@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

@g33konaut

How do we move in VR?

32

Source: @walaber [this tweet]

Page 34: WebVR - Contentful: Content Infrastructure for Digital …assets.contentful.com/nn534z2fqr9f/3pqKcOn67uAmmcOooqOa6...What is WebVR? WebVR 101 What are the challenges? 3 @g33konaut

@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

@g33konaut

спасибо!

Slides: bit.ly/holyjs-webvr

Web: 3dify.archilogic.com

Twitter: @g33konaut

35