JSConf US Last Call 2015 - Multiplayer WebVR

Transcript

1. Multiplayer WebVR WebGL, WebVR, WebRTC - let’s do this!
2. How it began...
3. How it began...
4. Who am I? I’m Martin @g33konaut
5. Who am I? I’m Martin from Zurich, Switzerland @g33konaut
6. Who am I? I’m Martin from Zurich, Switzerland I work at Archilogic & the web @g33konaut
7. So… what’s this about?
9. No, seriously… Live Demo volunteers, please!
10. Demo time bit.ly/flying-horse
12. 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
13. 1. WebGL
14. WebGL: Vertices
15. WebGL: Faces
16. [ , , , ] [ , ] WebGL: TypedArrays
17. WebGL: Pipeline
18. 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
19. 2. WebVR
20. WebVR with Three.js var vrEffect = new THREE.VREffect(renderer), vrControls = new THREE.VRControls() … vrControls.update() vrEffect.render(scene, camera)
21. Cool stuff • Cardboard & Oculus - same WebVR APIs • Firefox Nightly (!) & experimental Chromium build • Chrome Android (Canary) has Cardboard tracking support
22. 2. WebRTC
23. Bye, servers!
24. LOL NOPE - we need signalling
25. Oh, and the usual suspects...
26. Meh
27. Show me the options! WebRTC PeerConnection + DataChannel TCP/UDP/SCTP, reliable or unreliable Websockets TCP-like, reliable
28. Show me the options! WebRTC PeerConnection + DataChannel TCP/UDP/SCTP, reliable or unreliable Websockets TCP-like, reliable
29. Ok, let’s talk numbers Per player: position + orientation
30. 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
32. How about speed? Websocket: ~150ms WebRTC: ~10ms
33. Ahem...
34. ...well...
35. Ingredients, revisited 1. interactive 3D content in the browser: WebGL 2. VR rendering & controls in the browser: WebVR 3. High speed networking in the browser: Websockets
36. The server
37. Our server 1. manages a list of players & their state 2. broadcasts player’s messages Needs these message types: Type (binary) 00 01 10 11 Meaning Player moving Unused Player connect Player disconnect Payload Position / Rotation Unused Position / Rotation -
38. The protocol • should be binary • as small as possible Header Uint8 2 bit type 6 bit Player ID Position Float32[3] X,Y,Z Rotation Float32[3] X,Y,Z
39. 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
40. CODE
41. The Client
42. 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
43. CODE
44. We did it!
45. So what’s next?
46. Next steps • some game mechanics • Gamepad API • support for LEAPMotion / Myo
47. Thanks all folks! Slides: bit.ly/jsconf-multi-vr Code: github.com/avgp/multiplayer-vr-demo Twitter: @g33konaut Web: beta.archilogic.com