Как мы сделали многопользовательскую браузерную игру для HL++ с воксельной графикой / Александр Хаеров (Ingram Micro)

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

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"

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

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

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 graphics2D 3D computer graphics hyped techhyped Virtual Reality tech Features multi-player and networked The Game

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

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

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

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

46. multi-player 2D computer graphics2D 3D computer graphics hyped techhyped 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-storagegame-frontend +

57. Enterprise architecture game-storagegame-frontend +

58. Enterprise architecture game-storagegame-frontend + ?

59. Replication problem

62. Replication problem Active

63. 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-storagegame-frontend +

74. Architecture game-storagegame-backendgame-frontend +

75. Architecture game-storagegame-backendgame-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

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-backendgame-frontend + ?

91. Architecture MongoDBgame-backendgame-frontend +

92. Architecture MongoDBgame-backendgame-frontend + ? ?

93. Protocol

94. Protocol 1 2 3 … N game-frontend

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

96. Protocol 1 2 3 … N32 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 … N32 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 … N32 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 … N32 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 … N32 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 … N32 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 … N32 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 MongoDBgame-backendgame-frontend +

108. Architecture MongoDBgame-backendgame-frontend WebSocket +

109. Architecture MongoDBgame-backendgame-frontend WebSocket + +

110. Architecture MongoDBgame-backendgame-frontend WebSocket + + HTTP

111. Architecture MongoDBgame-backendgame-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. MongoDBgame-backendgame-frontend WebSocket + + HTTP Architecture

118. MongoDBgame-backendgame-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 castingAABB: 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 castingAABB: 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 castingAABB: 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 castingAABB: 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 castingAABB: 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 ); }

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

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. MongoDBgame-backendgame-frontend WebSocket + + Architecture

164. MongoDBgame-backendgame-frontend WebSocket + Architecture

165. MongoDBgame-backendgame-frontend WebSocket + Architecture +

166. MongoDBgame-backendgame-frontend WebSocket + Architecture + game-frontend-vr WebSocket

167. MongoDBgame-backendgame-frontend WebSocket + Architecture + game-frontend-vr WebSocket firebase-auth HTTP

168. MongoDBgame-backendgame-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%)

174. urbn.odn.pwplay Alex Khaerov t.me/hayorov code github.com/TheURBN try new and have fun

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

Как мы сделали многопользовательскую браузерную игру для HL++ с воксельной графикой / Александр Хаеров (Ingram Micro)

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Как мы сделали многопользовательскую браузерную игру для HL++ с воксельной графикой / Александр Хаеров (Ingram Micro)

Semelhante a Как мы сделали многопользовательскую браузерную игру для HL++ с воксельной графикой / Александр Хаеров (Ingram Micro) (20)

Mais de Ontico

Mais de Ontico (20)

Último

Último (20)

Как мы сделали многопользовательскую браузерную игру для HL++ с воксельной графикой / Александр Хаеров (Ingram Micro)