Браузерная игра с VR в 2k17 на Python

Александр Хаёров (Odin Ingram Micro) @ Moscow Python Meetup 51
"Я расскажу откуда взялась идея сделать браузерную игру, и что из этого получилось, как все технически устроено: от картинки в браузере до архитектуры, бекенда и базы данных. Вы узнаете, как это — сделать браузерную 3D-игру в 2017 году, какие трудности вас будут подстерегать, и при чем тут VR.
Доклад раскроет технические детали того, как устроена игра, что используется из веб-технологий, как хранятся данные, какую нагрузку пользователей выдерживает и где размещается".
Видео: http://www.moscowpython.ru/meetup/51/python-browser-game-vr/

Transcript

1. Logo Game
2. Logo Game
3. Logo Game
4. Logo Game
5. Python Logo Game
6. Python Logo Game
7. Python Logo Game
8. Python Logo Game
9. Python aiohttp Logo Game
10. Python aiohttp Logo Game
11. Python aiohttp Logo Game
12. Python aiohttp Logo Game
13. Python aiohttp flask Logo Game
14. Python aiohttp flask Logo Game
15. Браузерная игра с VR Александр Хаёров t.me/hayorov в 2K17 на Python
17. Who Are Indie Game Developers? Source: somewhere from the Internet
18. Who Are Indie Game Developers? Source: somewhere from the Internet Indie is a shortform of "independent"
19. Who Are Indie Game Developers? 97% men Source: somewhere from the Internet Indie is a shortform of "independent"
20. Who Are Indie Game Developers? 97% men 60% singles Source: somewhere from the Internet Indie is a shortform of "independent"
21. Who Are Indie Game Developers? 97% men 60% singles 1-3 months/game Source: somewhere from the Internet Indie is a shortform of "independent"
23. Who We Are
24. Who We Are Alex Khaerov a Unit Manager at Ingram Micro Cloud
25. Who We Are and the Great Team of Engineers Alex Khaerov a Unit Manager at Ingram Micro Cloud
26. Who We Are and the Great Team of Engineers @themaxbelov @ToxicWar @weglov @spukst3r Alex Khaerov a Unit Manager at Ingram Micro Cloud
27. 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
28. Background
29. Background Exhibition stand at HL++2017
30. Background Exhibition stand at HL++2017 Reddit r/Place influence
32. /r/Place a social experiment by Reddit
33. /r/Place 1,000 x 1,000 px canvas a social experiment by Reddit
34. /r/Place 1,000 x 1,000 px canvas pixel * user per 5 min a social experiment by Reddit
35. /r/Place 1,000 x 1,000 px canvas pixel * user per 5 min 72 hours of fun a social experiment by Reddit
36. /r/Place 1,000 x 1,000 px canvas pixel * user per 5 min 72 hours of fun a social experiment by Reddit
37. /r/Place 1,000 x 1,000 px canvas pixel * user per 5 min 72 hours of fun a social experiment by Reddit
38. /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
39. /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
40. Background Exhibition stand at HL++2017 Reddit r/Place influence
41. Background Exhibition stand at HL++2017 Reddit r/Place influence Games are full of fun
42. Background Exhibition stand at HL++2017 Reddit r/Place influence Games are full of fun A new dev experience
43. The Game
44. Features The Game
45. multi-player Features The Game
46. multi-player Features multi-player and networked The Game
47. multi-player 2D computer graphics Features multi-player and networked The Game
48. multi-player 2D 3D computer graphics Features multi-player and networked The Game
49. multi-player 2D 3D computer graphics hyped tech Features multi-player and networked The Game
50. multi-player 2D 3D computer graphics hyped Virtual Reality tech Features multi-player and networked The Game
51. multi-player 2D computer graphics 2D 3D computer graphics hyped tech hyped Virtual Reality tech Features multi-player and networked The Game
52. multi-player 2D computer graphics 2D 3D computer graphics hyped tech hyped Virtual Reality tech Features Concessions multi-player and networked The Game
53. 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
54. 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
55. 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
56. 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
57. 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
58. 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
59. Gameplay and Rules
60. Gameplay and Rules find spots with the flag
61. Gameplay and Rules capture flags find spots with the flag
62. Gameplay and Rules capture flags hold and earn scores find spots with the flag
63. Gameplay and Rules capture flags hold and earn scores find spots with the flag win a prize
64. Enterprise Architecture
65. Enterprise Architecture
66. Enterprise Architecture +
67. Enterprise Architecture game-frontend +
68. Enterprise Architecture game-storage game-frontend +
69. Enterprise Architecture game-storage game-frontend +
70. Enterprise Architecture game-storage game-frontend + ?
71. Replication Problem
72. Replication Problem
73. Replication Problem
74. Replication Problem Active
75. Active Passive Replication Problem
76. Active Passive Replication Problem
77. Active Passive Replication Problem
78. Active Passive + Easy to understand Replication Problem
79. Active Passive + Easy to understand + More efficient Replication Problem
80. Active Passive + Easy to understand + More efficient - Fragile Replication Problem
81. Active Passive + Robust to de-sync + Easy to understand + More efficient - Fragile Replication Problem
82. Active Passive + Robust to de-sync + Easy to understand + More efficient - Fragile + Easier to secure Replication Problem
83. Active Passive + Robust to de-sync + Easy to understand + More efficient - Fragile - Single point of failure + Easier to secure Replication Problem
84. Active Passive + Robust to de-sync + Easy to understand + More efficient - Fragile - Single point of failure + Easier to secure ✔ Replication Problem
85. Architecture game-storage game-frontend +
86. Architecture game-storage game-backend game-frontend +
87. Architecture game-storage game-backend game-frontend + ?
88. Data Structure
89. “flat array” Data Structure
90. “flat array” + read/write = const Data Structure
91. “flat array” + read/write = const - memory = L^3 Data Structure
92. “flat array” octree + read/write = const - memory = L^3 Data Structure
93. “flat array” octree + read/write = const - memory = L^3 Data Structure
94. “flat array” octree + read/write = const - memory = L^3 Data Structure
95. “flat array” octree + read/write = const - memory = L^3 + lean Data Structure
96. “flat array” octree + read/write = const - slower than flat - memory = L^3 + lean Data Structure
97. “flat array” octree pages/chunks + read/write = const - slower than flat - memory = L^3 + lean Data Structure
98. “flat array” octree pages/chunks + read/write = const + lazily initialized - slower than flat - memory = L^3 + lean Data Structure
99. “flat array” octree pages/chunks + read/write = const + lazily initialized - slower than flat - memory = L^3 + lean - more complicated Data Structure
100. “flat array” octree + Read/Write = const + lazily initialized - slower than flat - Memory = L^3 + lean - more complicated Data Structure pages/chunks
101. “flat array” octree + Read/Write = const + lazily initialized - slower than flat - Memory = L^3 + lean - more complicated Data Structure pages/chunks ✔
102. Architecture game-backend game-frontend + ?
103. Architecture MongoDB game-backend game-frontend +
104. Architecture MongoDB game-backend game-frontend + ? ?
105. Protocol
106. Protocol 1 2 3 … N game-frontend
107. Protocol 1 2 3 … N 32 32 game-frontend
108. 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
109. 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() }
110. 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() }
111. 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() }
112. 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
113. 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
114. 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
115. 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
116. 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
117. 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
118. 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
119. Architecture MongoDB game-backend game-frontend +
120. Architecture MongoDB game-backend game-frontend WebSocket +
121. Architecture MongoDB game-backend game-frontend WebSocket + +
122. Architecture MongoDB game-backend game-frontend WebSocket + + HTTP
123. Architecture MongoDB game-backend game-frontend WebSocket + + HTTP
124. Game-backend
125. Game-backend Python 3.6 + aiohttp
126. Game-backend Python 3.6 + aiohttp uvloop implemented in Cython and uses libuv
127. Game-backend Python 3.6 + aiohttp uvloop implemented in Cython and uses libuv motor full-featured, non-blocking MongoDB driver for Python
128. 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
129. MongoDB game-backend game-frontend WebSocket + + HTTP Architecture
130. MongoDB game-backend game-frontend WebSocket + + HTTP Architecture
131. Game-frontend
132. Game-frontend Native JavaScript and WebGL?
133. Game-frontend Native JavaScript and WebGL? Native JavaScript and WebGL?
134. Game-frontend Native JavaScript and WebGL? Native JavaScript and WebGL? Voxel.js an open source voxel game building toolkit for modern web browsers
135. 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)
136. 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
137. 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
138. 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.
139. 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
140. 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
141. 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
142. 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
143. 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
144. 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
145. 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
146. Game-frontend voxel.js your code
147. Game-frontend voxel.js your code three.js
148. Game-frontend voxel.js your code three.js WebGL Browser
149. Game-frontend voxel.js your code three.js WebGL Browser Hardware OpenGL Driver Display Mngt System
150. Game-frontend voxel.js your code three.js WebGL Browser Hardware OpenGL Driver Display Mngt System Creating the scene
151. 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 ); }
152. 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 ); }
153. 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 ); }
154. 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 ); }
155. 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 ); }
156. 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 ); }
157. AR VR
158. AR VR
159. AR VR
160. AR VR
161. AR VR Oculus Rift CV1
162. Oculus Rift
163. Oculus Rift + it’s true VR
164. Oculus Rift + resolution and refresh rate + it’s true VR
165. Oculus Rift + resolution and refresh rate + it’s true VR + very comfortable
166. Oculus Rift - too numerous wires + resolution and refresh rate + it’s true VR + very comfortable
167. Oculus Rift - no SDK for macOS/Linux - too numerous wires + resolution and refresh rate + it’s true VR + very comfortable
168. 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
170. A-Frame virtual reality framework
171. A-Frame virtual reality framework works on Vive, Rift, Daydream, GearVR, desktop
172. A-Frame virtual reality framework works on Vive, Rift, Daydream, GearVR, desktop based on top of HTML
173. 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>
174. 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>
175. MongoDB game-backend game-frontend WebSocket + + Architecture
176. MongoDB game-backend game-frontend WebSocket + Architecture
177. MongoDB game-backend game-frontend WebSocket + Architecture +
178. MongoDB game-backend game-frontend WebSocket + Architecture + game-frontend-vr WebSocket
179. MongoDB game-backend game-frontend WebSocket + Architecture + game-frontend-vr WebSocket firebase-auth HTTP
180. MongoDB game-backend game-frontend WebSocket + Architecture + game-frontend-vr WebSocket firebase-auth HTTP Auth Auth
181. Optimizations
182. Optimizations Pre-process voxel models Voxels count ↓ (-78%)
183. Optimizations Use Mesher FPS ↑ Pre-process voxel models Voxels count ↓ (-78%)
184. Optimizations Use Mesher FPS ↑ Enable compression for WebSocket (RFC 7692) Traffic ↓ (5MB -> 1.8MB) Pre-process voxel models Voxels count ↓ (-78%)
186. Alex Khaerov t.me/hayorov code github.com/TheURBN try new and have fun
187. Phew, Questions? Alex Khaerov t.me/hayorov code github.com/TheURBN try new and have fun