Martin Splitt (Archilogic), Frontend Multiplayer WebVR, CodeFest 2017

https://2017.codefest.ru/lecture/1165

Thanks to WebGL we've got interactive 3D content with the ease-of-use and the openness of the Web. Add WebRTC on top of that and we'll see interesting collaborative applications that play out in three-dimensional space right from within our browsers. Paraphrasing the movie Tron: “But then, we got in”. WebVR allows us to hook up the browser to a new universe of VR hardware and immersive experiences.

Let's explore what we can do together by combining the technologies to create a universe that we can explore together and what is yet uncharted land that we can discover.

Transcript

1. Multiplayer WebVR Uncharted territory
2. привет! Head of Engineering @ Archilogic Zurich, Switzerland GDE, Mozillian, W3C @g33konaut
3. Today’s journey... 1. VR - what’s it good for? 2. WebVR - What & How 3. Multiplayer WebVR 4. Wrap up
4. --- VR ---
6. VR - what for? • Education • Healthcare • Construction / Architecture • Design / Arts • Journalism / Entertainment • Marketing
8. The spectrum of VR Oculus $599* Vive $799 Gear VR $99* Daydream $79 Cardboard $5 Position tracking Room scale tracking Controls 2x 2x Touchpad 1x Button Mobile
9. Web = Sharing
10. WebVR = Sharing + VR +
11. WebVR = Sharing + VR
12. Why WebVR? 1/2
13. Why WebVR? 1/2 • Easier, faster content creation
14. Why WebVR? 2/2 Responsiveness • VR available: Show VR content • 3D available: Show 3D content • Neither available: Show classic web content
16. WebGL API 1.1 Spec in progress!
17. WebGL API 1.1 navigator.getVRDisplays() .then((displays) => { // do something with the display })
18. WebGL API 1.1 disp.requestPresent([{ source: canvas }]) .then(() => { render(disp) })
19. WebGL API 1.1 function render(display) { display.requestAnimationFrame(...) display.getFrameData(frameData) render3dThings(frameData) display.submitFrame() }
20. WebGL API 1.1 function render(display) { display.requestAnimationFrame(...) display.getFrameData(frameData) render3dThings(frameData) display.submitFrame() }
21. github.com/googlevr/webvr-polyfill n/a yet
22. Multiplayer WebVR
23. Data per player
24. Data per player Per player: x y z pitch roll yaw
25. Data per player Per player: X 12.34 Float32 Y 98.76 Float32 Z 45.67 Float32 Yaw 67.89 Float32 Roll 23.45 Float32 Pitch 19.56 Float32
26. Data per player Per player: X 12.34 Float32 Y 98.76 Float32 Z 45.67 Float32 Yaw 67.89 Float32 Roll 23.45 Float32 Pitch 19.56 Float32 32 * 6 bit = 192 bit
27. Network traffic 192 bit * 60 fps = 11.5 kbps
28. Network messages Header Uint8 2 bit type 6 bit Player ID Position Float32[3] X, Y, Z Rotation Float32[3] X, Y, Z
29. Network messages Type (binary) 00 01 10 11 Meaning Player moving Unused Player connect Player disconnect Payload Position / Rotation Unused Position / Rotation -
30. Network 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
31. Let’s play
32. --- Wrap up ---
33. Do not do this ;-)
34. “If the computer is the bicycle for our mind, then VR is the teleporter.” - Martin Splitt
35. СПАСИБО Slides: bit.ly/codefest-webvr Web: spaces.archilogic.com 50linesofco.de Twitter: @g33konaut