Multiplayer WebVR

WebGL, WebVR, WebRTC - let’s do this!

@g33konaut

How it began...

@g33konaut

How it began...

@g33konaut

So… what’s this about?

@g33konaut

@g33konaut

@g33konaut

@g33konaut

Demo time

​

​

bit.ly/muchvr

​

​

@g33konaut

@g33konaut

Ingredients

1. interactive 3D content in the browser: WebGL
2. VR rendering & controls in the browser: WebVR
3. High speed networking in the browser: WebRTC

@g33konaut

1. WebGL

@g33konaut

WebGL: Vertices

@g33konaut

WebGL: Faces

@g33konaut

WebGL: TypedArrays

[ , , , ]

​

[ , ]

@g33konaut

WebGL: Pipeline

@g33konaut

Three.js as an abstraction on top

var scene = new THREE.Scene(),

camera = new THREE.PerspectiveCamera(...),

renderer = new THREE.WebGLRenderer()

​

var box = new THREE.Mesh(...)

scene.add(box)

​

renderer.render(scene, camera) // rinse, repeat

@g33konaut

2. WebVR

http://webvr.info/

@g33konaut

@g33konaut

@g33konaut

@g33konaut

WebVR with Three.js

var vrEffect = new THREE.VREffect(renderer),

vrControls = new THREE.VRControls()

​

…

​

vrControls.update()

vrEffect.render(scene, camera)

@g33konaut

Why is it so awesome?

• Cardboard & Oculus - same WebVR APIs
• Firefox Nightly & experimental Chromium build
• Low cost to get into it, great community behind it
• allows you to reach people on a much deeper level

@g33konaut

2. WebRTC

@g33konaut

Bye, servers!

@g33konaut

LOL NOPE - we need signalling

@g33konaut

Oh, and the usual suspects...

@g33konaut

Meh

@g33konaut

Show me the options!

WebRTC PeerConnection + DataChannel

TCP/UDP/SCTP, reliable or unreliable

Websockets

TCP-like, reliable

@g33konaut

Show me the options!

WebRTC PeerConnection + DataChannel

TCP/UDP/SCTP, reliable or unreliable

Websockets

TCP-like, reliable

@g33konaut

Ok, let’s talk numbers

Per player: position + orientation

@g33konaut

Ok, let’s talk numbers

Per player: x, y, z + pitch, roll, yaw

example: 150.384, 10.2, -95.8, 1.53873, 2.63980, 1.87532

​

Hey, that’s in fact 6 Float32 values.

6 * 32 bit = 192 bit * 60 fps = 11,5 kbps

@g33konaut

@g33konaut

How about speed?

Websocket: ~150ms

WebRTC: ~10ms

@g33konaut

Ahem...

@g33konaut

...well...

@g33konaut

Ingredients, revisited

• interactive 3D content in the browser: WebGL
• VR rendering & controls in the browser: WebVR
• High speed networking in the browser: Websockets

@g33konaut

The server

@g33konaut

Our server

1. manages a list of players & their state
2. broadcasts player’s messages

Needs these message types:

​

@g33konaut

The protocol

• should be binary
• as small as possible

​

@g33konaut

The overhead

ws-frame = frame-fin ; 1 bit in length� frame-rsv1 ; 1 bit in length� frame-rsv2 ; 1 bit in length� frame-rsv3 ; 1 bit in length� frame-opcode ; 4 bits in length� frame-masked ; 1 bit in length� frame-payload-length ; either 7, 7+16 or 7+64 bits in length� frame-payload-data ; n*8 bits in length, where n >= 0

​

Our packet = 216 bit (27 byte) in total

@g33konaut

CODE

@g33konaut

The Client

@g33konaut

The client...

1. sets up the game world & game state
2. runs the 3D rendering
3. receives messages from the server about other players
4. sends messages to the server about player movement

@g33konaut

CODE

@g33konaut

We did it!

@g33konaut

So what’s next?

@g33konaut

Next steps

• some game mechanics
• Gamepad API
• support for LEAPMotion / Myo

​

@g33konaut

Thanks all folks!

Slides: bit.ly/jsconf-multi-vr

Code: github.com/avgp/multiplayer-vr-demo

Twitter: @g33konaut

@g33konaut