TheURBN game #highload2017

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