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

16b6c87229eaf58768d25ed7b2bbbf52?s=47 CodeFest
January 31, 2018

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.

16b6c87229eaf58768d25ed7b2bbbf52?s=128

CodeFest

January 31, 2018
Tweet

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 ---

  5. None
  6. VR - what for? • Education • Healthcare • Construction

    / Architecture • Design / Arts • Journalism / Entertainment • Marketing
  7. None
  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
  15. None
  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