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