webvr - contentful: content infrastructure for digital...

@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

WebVR demo 1: Photo sphere

19

@g33konaut

WebVR Demo 2: Portals

20

@g33konaut

How does it work?

21

@g33konaut

What’s the VR web gonna be?

22

@g33konaut

By @Lane_Max

23

@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