TheURBN game #highload2017

TheURBN game #highload2017

320f3b558c773592bba16c976d1b28d1?s=128

Alex Khaerov

November 06, 2017
Tweet

Transcript

  1. Как мы делали многопользовательскую браузерную игру для HL++ с воксельной

    графикой Александр Хаёров / Unit Manager / t.me/hayorov
  2. difficulty level Ad Voxel Art Designer Wanted https://urbn.odn.pw x

  3. difficulty level Ad Voxel Art Designer Wanted https://urbn.odn.pw x

  4. None
  5. Who Are Indie Game Developers? Source: somewhere from the Internet

  6. Who Are Indie Game Developers? Source: somewhere from the Internet

    Indie is a shortform of "independent"
  7. Who Are Indie Game Developers? 97% men Source: somewhere from

    the Internet Indie is a shortform of "independent"
  8. Who Are Indie Game Developers? 97% men 60% singles Source:

    somewhere from the Internet Indie is a shortform of "independent"
  9. Who Are Indie Game Developers? 97% men 60% singles 1-3

    months/game Source: somewhere from the Internet Indie is a shortform of "independent"
  10. None
  11. Who We Are

  12. Who We Are Alex Khaerov a Unit Manager at Ingram

    Micro Cloud
  13. Who We Are and the Great Team of Engineers Alex

    Khaerov a Unit Manager at Ingram Micro Cloud
  14. Who We Are and the Great Team of Engineers @themaxbelov

    @ToxicWar @weglov @spukst3r Alex Khaerov a Unit Manager at Ingram Micro Cloud
  15. Who We Are @themaxbelov @ToxicWar @weglov and the Great Team

    of voxel jedis, optimisation masters, gurus of the 3d, lords of the big data @spukst3r Alex Khaerov a Unit Manager at Ingram Micro Cloud
  16. Background

  17. Background Exhibition stand at HL++2017

  18. Background Exhibition stand at HL++2017 Reddit r/Place influence

  19. None
  20. /r/Place a social experiment by Reddit

  21. /r/Place 1,000 x 1,000 px canvas a social experiment by

    Reddit
  22. /r/Place 1,000 x 1,000 px canvas pixel * user per

    5 min a social experiment by Reddit
  23. /r/Place 1,000 x 1,000 px canvas pixel * user per

    5 min 72 hours of fun a social experiment by Reddit
  24. /r/Place 1,000 x 1,000 px canvas pixel * user per

    5 min 72 hours of fun a social experiment by Reddit
  25. /r/Place 1,000 x 1,000 px canvas pixel * user per

    5 min 72 hours of fun a social experiment by Reddit
  26. /r/Place 1,000 x 1,000 px canvas pixel * user per

    5 min 72 hours of fun > 1M players a social experiment by Reddit
  27. /r/Place 1,000 x 1,000 px canvas pixel * user per

    5 min 72 hours of fun > 1M players a social experiment by Reddit 90K simultaneously
  28. Background Exhibition stand at HL++2017 Reddit r/Place influence

  29. Background Exhibition stand at HL++2017 Reddit r/Place influence Games are

    full of fun
  30. Background Exhibition stand at HL++2017 Reddit r/Place influence Games are

    full of fun A new dev experience
  31. The Game

  32. Features The Game

  33. multi-player Features The Game

  34. multi-player Features multi-player and networked The Game

  35. multi-player 2D computer graphics Features multi-player and networked The Game

  36. multi-player 2D 3D computer graphics Features multi-player and networked The

    Game
  37. multi-player 2D 3D computer graphics hyped tech Features multi-player and

    networked The Game
  38. multi-player 2D 3D computer graphics hyped Virtual Reality tech Features

    multi-player and networked The Game
  39. multi-player 2D computer graphics 2D 3D computer graphics hyped tech

    hyped Virtual Reality tech Features multi-player and networked The Game
  40. multi-player 2D computer graphics 2D 3D computer graphics hyped tech

    hyped Virtual Reality tech Features Concessions multi-player and networked The Game
  41. multi-player 2D computer graphics 2D 3D computer graphics hyped tech

    hyped Virtual Reality tech client-based Features Concessions multi-player and networked The Game
  42. multi-player 2D computer graphics 2D 3D computer graphics hyped tech

    hyped Virtual Reality tech client-based Browser Features Concessions multi-player and networked The Game
  43. multi-player 2D computer graphics 2D 3D computer graphics hyped tech

    hyped Virtual Reality tech client-based Browser voxel “block-style” objects Features Concessions multi-player and networked The Game
  44. multi-player 2D computer graphics 2D 3D computer graphics hyped tech

    hyped Virtual Reality tech client-based Browser voxel “block-style” objects Features Concessions multi-player and networked The Game
  45. multi-player 2D computer graphics 2D 3D computer graphics hyped tech

    hyped Virtual Reality tech client-based Browser voxel “block-style” objects Features Concessions multi-player and networked The Game
  46. multi-player 2D computer graphics 2D 3D computer graphics hyped tech

    hyped Virtual Reality tech client-based Browser voxel “block-style” objects Features Concessions world size 1000x1000x200 multi-player and networked The Game
  47. Gameplay and rules

  48. Gameplay and rules find spots with the flag

  49. Gameplay and rules capture flags find spots with the flag

  50. Gameplay and rules capture flags hold and earn scores find

    spots with the flag
  51. Gameplay and rules capture flags hold and earn scores find

    spots with the flag win a prize
  52. Enterprise architecture

  53. Enterprise architecture

  54. Enterprise architecture +

  55. Enterprise architecture game-frontend +

  56. Enterprise architecture game-storage game-frontend +

  57. Enterprise architecture game-storage game-frontend +

  58. Enterprise architecture game-storage game-frontend + ?

  59. Replication problem

  60. Replication problem

  61. Replication problem

  62. Replication problem Active

  63. Active Passive Replication problem

  64. Active Passive Replication problem

  65. Active Passive Replication problem

  66. Active Passive + Easy to understand Replication problem

  67. Active Passive + Easy to understand + More efficient Replication

    problem
  68. Active Passive + Easy to understand + More efficient -

    Fragile Replication problem
  69. Active Passive + Robust to de-sync + Easy to understand

    + More efficient - Fragile Replication problem
  70. Active Passive + Robust to de-sync + Easy to understand

    + More efficient - Fragile + Easier to secure Replication problem
  71. Active Passive + Robust to de-sync + Easy to understand

    + More efficient - Fragile - Single point of failure + Easier to secure Replication problem
  72. Active Passive + Robust to de-sync + Easy to understand

    + More efficient - Fragile - Single point of failure + Easier to secure ✔ Replication problem
  73. Architecture game-storage game-frontend +

  74. Architecture game-storage game-backend game-frontend +

  75. Architecture game-storage game-backend game-frontend + ?

  76. Data Structure

  77. “flat array” Data Structure

  78. “flat array” + read/write = const Data Structure

  79. “flat array” + read/write = const - memory = L^3

    Data Structure
  80. “flat array” octree + read/write = const - memory =

    L^3 Data Structure
  81. “flat array” octree + read/write = const - memory =

    L^3 Data Structure
  82. “flat array” octree + read/write = const - memory =

    L^3 Data Structure
  83. “flat array” octree + read/write = const - memory =

    L^3 + lean Data Structure
  84. “flat array” octree + read/write = const - slower than

    flat - memory = L^3 + lean Data Structure
  85. “flat array” octree pages/chunks + read/write = const - slower

    than flat - memory = L^3 + lean Data Structure
  86. “flat array” octree pages/chunks + read/write = const + lazily

    initialized - slower than flat - memory = L^3 + lean Data Structure
  87. “flat array” octree pages/chunks + read/write = const + lazily

    initialized - slower than flat - memory = L^3 + lean - more complicated Data Structure
  88. “flat array” octree + Read/Write = const + lazily initialized

    - slower than flat - Memory = L^3 + lean - more complicated Data Structure pages/chunks
  89. “flat array” octree + Read/Write = const + lazily initialized

    - slower than flat - Memory = L^3 + lean - more complicated Data Structure pages/chunks ✔
  90. Architecture game-backend game-frontend + ?

  91. Architecture MongoDB game-backend game-frontend +

  92. Architecture MongoDB game-backend game-frontend + ? ?

  93. Protocol

  94. Protocol 1 2 3 … N game-frontend

  95. Protocol 1 2 3 … N 32 32 game-frontend

  96. Protocol 1 2 3 … N 32 32 game-frontend mongoDB

    > data (1) ObjectId() { 7 fields } Object (2) ObjectId() { 7 fields } Object (3) ObjectId() { 7 fields } Object (4) ObjectId() { 7 fields } Object (5) ObjectId() { 7 fields } Object (6) ObjectId() { 7 fields } Object (7) ObjectId() { 7 fields } Object (8) ObjectId() { 7 fields } Object
  97. Protocol 1 2 3 … N 32 32 game-frontend mongoDB

    > data (1) ObjectId() { 7 fields } Object (2) ObjectId() { 7 fields } Object (3) ObjectId() { 7 fields } Object (4) ObjectId() { 7 fields } Object (5) ObjectId() { 7 fields } Object (6) ObjectId() { 7 fields } Object (7) ObjectId() { 7 fields } Object (8) ObjectId() { 7 fields } Object { "_id" : ObjectId(), "x" : 435, "y" : 377, "z" : 0, “color" : "#5b8c9c", "name" : null, "updated" : ISODate() }
  98. Protocol 1 2 3 … N 32 32 game-frontend mongoDB

    > data (1) ObjectId() { 7 fields } Object (2) ObjectId() { 7 fields } Object (3) ObjectId() { 7 fields } Object (4) ObjectId() { 7 fields } Object (5) ObjectId() { 7 fields } Object (6) ObjectId() { 7 fields } Object (7) ObjectId() { 7 fields } Object (8) ObjectId() { 7 fields } Object { "_id" : ObjectId(), "x" : 435, "y" : 377, "z" : 0, “color" : "#5b8c9c", "name" : null, "updated" : ISODate() }
  99. Protocol 1 2 3 … N 32 32 game-frontend mongoDB

    > data (1) ObjectId() { 7 fields } Object (2) ObjectId() { 7 fields } Object (3) ObjectId() { 7 fields } Object (4) ObjectId() { 7 fields } Object (5) ObjectId() { 7 fields } Object (6) ObjectId() { 7 fields } Object (7) ObjectId() { 7 fields } Object (8) ObjectId() { 7 fields } Object { "_id" : ObjectId(), "x" : 435, "y" : 377, "z" : 0, “color" : "#5b8c9c", "name" : null, "updated" : ISODate() }
  100. Protocol 1 2 3 … N 32 32 game-frontend mongoDB

    > data (1) ObjectId() { 7 fields } Object (2) ObjectId() { 7 fields } Object (3) ObjectId() { 7 fields } Object (4) ObjectId() { 7 fields } Object (5) ObjectId() { 7 fields } Object (6) ObjectId() { 7 fields } Object (7) ObjectId() { 7 fields } Object (8) ObjectId() { 7 fields } Object { "_id" : ObjectId(), "x" : 435, "y" : 377, "z" : 0, “color" : "#5b8c9c", "name" : null, "updated" : ISODate() } r
  101. Protocol 1 2 3 … N 32 32 game-frontend mongoDB

    > data (1) ObjectId() { 7 fields } Object (2) ObjectId() { 7 fields } Object (3) ObjectId() { 7 fields } Object (4) ObjectId() { 7 fields } Object (5) ObjectId() { 7 fields } Object (6) ObjectId() { 7 fields } Object (7) ObjectId() { 7 fields } Object (8) ObjectId() { 7 fields } Object game-backend { "_id" : ObjectId(), "x" : 435, "y" : 377, "z" : 0, “color" : "#5b8c9c", "name" : null, "updated" : ISODate() } get(x, y, z, r) r
  102. Protocol 1 2 3 … N 32 32 game-frontend mongoDB

    > data (1) ObjectId() { 7 fields } Object (2) ObjectId() { 7 fields } Object (3) ObjectId() { 7 fields } Object (4) ObjectId() { 7 fields } Object (5) ObjectId() { 7 fields } Object (6) ObjectId() { 7 fields } Object (7) ObjectId() { 7 fields } Object (8) ObjectId() { 7 fields } Object game-backend { "_id" : ObjectId(), "x" : 435, "y" : 377, "z" : 0, “color" : "#5b8c9c", "name" : null, "updated" : ISODate() } get(x, y, z, r) set(x, y, z) r
  103. Protocol 1 2 3 … N 32 32 game-frontend mongoDB

    > data (1) ObjectId() { 7 fields } Object (2) ObjectId() { 7 fields } Object (3) ObjectId() { 7 fields } Object (4) ObjectId() { 7 fields } Object (5) ObjectId() { 7 fields } Object (6) ObjectId() { 7 fields } Object (7) ObjectId() { 7 fields } Object (8) ObjectId() { 7 fields } Object game-backend { "_id" : ObjectId(), "x" : 435, "y" : 377, "z" : 0, “color" : "#5b8c9c", "name" : null, "updated" : ISODate() } get(x, y, z, r) set(x, y, z) r
  104. Protocol 1 2 3 … N 32 32 game-frontend mongoDB

    > data (1) ObjectId() { 7 fields } Object (2) ObjectId() { 7 fields } Object (3) ObjectId() { 7 fields } Object (4) ObjectId() { 7 fields } Object (5) ObjectId() { 7 fields } Object (6) ObjectId() { 7 fields } Object (7) ObjectId() { 7 fields } Object (8) ObjectId() { 7 fields } Object game-backend { "_id" : ObjectId(), "x" : 435, "y" : 377, "z" : 0, “color" : "#5b8c9c", "name" : null, "updated" : ISODate() } get(x, y, z, r) set(x, y, z) r
  105. Protocol 1 2 3 … N 32 32 game-frontend mongoDB

    > data (1) ObjectId() { 7 fields } Object (2) ObjectId() { 7 fields } Object (3) ObjectId() { 7 fields } Object (4) ObjectId() { 7 fields } Object (5) ObjectId() { 7 fields } Object (6) ObjectId() { 7 fields } Object (7) ObjectId() { 7 fields } Object (8) ObjectId() { 7 fields } Object game-backend updated() (1) ObjectId() { 7 fields } Object (2) ObjectId() { 7 fields } Object { "_id" : ObjectId(), "x" : 435, "y" : 377, "z" : 0, “color" : "#5b8c9c", "name" : null, "updated" : ISODate() } get(x, y, z, r) set(x, y, z) r
  106. Protocol 1 2 3 … N 32 32 game-frontend mongoDB

    > data (1) ObjectId() { 7 fields } Object (2) ObjectId() { 7 fields } Object (3) ObjectId() { 7 fields } Object (4) ObjectId() { 7 fields } Object (5) ObjectId() { 7 fields } Object (6) ObjectId() { 7 fields } Object (7) ObjectId() { 7 fields } Object (8) ObjectId() { 7 fields } Object game-backend updated() (1) ObjectId() { 7 fields } Object (2) ObjectId() { 7 fields } Object userActivity() “{Username} joined the game” String { "_id" : ObjectId(), "x" : 435, "y" : 377, "z" : 0, “color" : "#5b8c9c", "name" : null, "updated" : ISODate() } get(x, y, z, r) set(x, y, z) r
  107. Architecture MongoDB game-backend game-frontend +

  108. Architecture MongoDB game-backend game-frontend WebSocket +

  109. Architecture MongoDB game-backend game-frontend WebSocket + +

  110. Architecture MongoDB game-backend game-frontend WebSocket + + HTTP

  111. Architecture MongoDB game-backend game-frontend WebSocket + + HTTP

  112. Game-backend

  113. Game-backend Python 3.6 + aiohttp

  114. Game-backend Python 3.6 + aiohttp uvloop implemented in Cython and

    uses libuv
  115. Game-backend Python 3.6 + aiohttp uvloop implemented in Cython and

    uses libuv motor full-featured, non-blocking MongoDB driver for Python
  116. Game-backend Python 3.6 + aiohttp uvloop implemented in Cython and

    uses libuv motor full-featured, non-blocking MongoDB driver for Python gunicorn Python WSGI HTTP Server for UNIX
  117. MongoDB game-backend game-frontend WebSocket + + HTTP Architecture

  118. MongoDB game-backend game-frontend WebSocket + + HTTP Architecture

  119. Game-frontend

  120. Game-frontend Native JavaScript and WebGL?

  121. Game-frontend Native JavaScript and WebGL? Native JavaScript and WebGL?

  122. Game-frontend Native JavaScript and WebGL? Native JavaScript and WebGL? Voxel.js

    an open source voxel game building toolkit for modern web browsers
  123. Game-frontend Native JavaScript and WebGL? Native JavaScript and WebGL? Voxel.js

    an open source voxel game building toolkit for modern web browsers a-la minecraft world (X, Y, Z)
  124. Game-frontend Native JavaScript and WebGL? Native JavaScript and WebGL? Voxel.js

    an open source voxel game building toolkit for modern web browsers a-la minecraft world (X, Y, Z) voxels (blocks) / chunks
  125. Game-frontend Native JavaScript and WebGL? Native JavaScript and WebGL? Voxel.js

    an open source voxel game building toolkit for modern web browsers a-la minecraft world (X, Y, Z) voxels (blocks) / chunks AABB: Bounding volume
  126. Game-frontend Native JavaScript and WebGL? Native JavaScript and WebGL? Voxel.js

    an open source voxel game building toolkit for modern web browsers a-la minecraft world (X, Y, Z) voxels (blocks) / chunks AABB: Bounding volume A 3D model with its bounding box drawn in dashed lines.
  127. Game-frontend Native JavaScript and WebGL? Native JavaScript and WebGL? Voxel.js

    an open source voxel game building toolkit for modern web browsers a-la minecraft world (X, Y, Z) voxels (blocks) / chunks AABB: Bounding volume
  128. Game-frontend Native JavaScript and WebGL? Native JavaScript and WebGL? Voxel.js

    an open source voxel game building toolkit for modern web browsers a-la minecraft world (X, Y, Z) voxels (blocks) / chunks Ray casting AABB: Bounding volume
  129. Game-frontend Native JavaScript and WebGL? Native JavaScript and WebGL? Voxel.js

    an open source voxel game building toolkit for modern web browsers a-la minecraft world (X, Y, Z) voxels (blocks) / chunks Ray casting AABB: Bounding volume Ray casting
  130. Game-frontend Native JavaScript and WebGL? Native JavaScript and WebGL? Voxel.js

    an open source voxel game building toolkit for modern web browsers a-la minecraft world (X, Y, Z) voxels (blocks) / chunks Ray casting AABB: Bounding volume
  131. Game-frontend Native JavaScript and WebGL? Native JavaScript and WebGL? Voxel.js

    an open source voxel game building toolkit for modern web browsers a-la minecraft world (X, Y, Z) voxels (blocks) / chunks Ray casting AABB: Bounding volume Textures
  132. Game-frontend Native JavaScript and WebGL? Native JavaScript and WebGL? Voxel.js

    an open source voxel game building toolkit for modern web browsers a-la minecraft world (X, Y, Z) voxels (blocks) / chunks Ray casting AABB: Bounding volume player with controls Textures
  133. Game-frontend Native JavaScript and WebGL? Native JavaScript and WebGL? Voxel.js

    an open source voxel game building toolkit for modern web browsers a-la minecraft world (X, Y, Z) voxels (blocks) / chunks Ray casting game events (tick/setBlock/collision/renderChunk) AABB: Bounding volume player with controls Textures
  134. Game-frontend voxel.js your code

  135. Game-frontend voxel.js your code three.js

  136. Game-frontend voxel.js your code three.js WebGL Browser

  137. Game-frontend voxel.js your code three.js WebGL Browser Hardware OpenGL Driver

    Display Mngt System
  138. Game-frontend voxel.js your code three.js WebGL Browser Hardware OpenGL Driver

    Display Mngt System Creating the scene
  139. Game-frontend voxel.js your code three.js WebGL Browser Hardware OpenGL Driver

    Display Mngt System Creating the scene var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); }
  140. Game-frontend voxel.js your code three.js WebGL Browser Hardware OpenGL Driver

    Display Mngt System Creating the scene var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); }
  141. Game-frontend voxel.js your code three.js WebGL Browser Hardware OpenGL Driver

    Display Mngt System Creating the scene var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); }
  142. Game-frontend voxel.js your code three.js WebGL Browser Hardware OpenGL Driver

    Display Mngt System Creating the scene var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); }
  143. Game-frontend voxel.js your code three.js WebGL Browser Hardware OpenGL Driver

    Display Mngt System Creating the scene var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); }
  144. Game-frontend voxel.js your code three.js WebGL Browser Hardware OpenGL Driver

    Display Mngt System Creating the scene var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); }
  145. AR VR

  146. AR VR

  147. AR VR

  148. AR VR

  149. AR VR Oculus Rift CV1

  150. Oculus Rift

  151. Oculus Rift + it’s true VR

  152. Oculus Rift + resolution and refresh rate + it’s true

    VR
  153. Oculus Rift + resolution and refresh rate + it’s true

    VR + very comfortable
  154. Oculus Rift - too numerous wires + resolution and refresh

    rate + it’s true VR + very comfortable
  155. Oculus Rift - no SDK for macOS/Linux - too numerous

    wires + resolution and refresh rate + it’s true VR + very comfortable
  156. Oculus Rift - no SDK for macOS/Linux - NVIDIA GTX

    970 / AMD 290 + - too numerous wires + resolution and refresh rate + it’s true VR + very comfortable
  157. None
  158. A-Frame virtual reality framework

  159. A-Frame virtual reality framework works on Vive, Rift, Daydream, GearVR,

    desktop
  160. A-Frame virtual reality framework works on Vive, Rift, Daydream, GearVR,

    desktop based on top of HTML
  161. A-Frame virtual reality framework works on Vive, Rift, Daydream, GearVR,

    desktop based on top of HTML <html> <head> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> </body> </html>
  162. A-Frame virtual reality framework works on Vive, Rift, Daydream, GearVR,

    desktop based on top of HTML <html> <head> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> </body> </html>
  163. MongoDB game-backend game-frontend WebSocket + + Architecture

  164. MongoDB game-backend game-frontend WebSocket + Architecture

  165. MongoDB game-backend game-frontend WebSocket + Architecture +

  166. MongoDB game-backend game-frontend WebSocket + Architecture + game-frontend-vr WebSocket

  167. MongoDB game-backend game-frontend WebSocket + Architecture + game-frontend-vr WebSocket firebase-auth

    HTTP
  168. MongoDB game-backend game-frontend WebSocket + Architecture + game-frontend-vr WebSocket firebase-auth

    HTTP Auth Auth
  169. Optimizations

  170. Optimizations Pre-process voxel models Voxels count ↓ (-78%)

  171. Optimizations Use Mesher FPS ↑ Pre-process voxel models Voxels count

    ↓ (-78%)
  172. Optimizations Use Mesher FPS ↑ Enable compression for WebSocket (RFC

    7692) Traffic ↓ (5MB -> 1.8MB) Pre-process voxel models Voxels count ↓ (-78%)
  173. None
  174. urbn.odn.pw play Alex Khaerov t.me/hayorov code github.com/TheURBN try new and

    have fun
  175. Phew, Questions? urbn.odn.pw play Alex Khaerov t.me/hayorov code github.com/TheURBN try

    new and have fun