HighLoad++ 2017 Зал «Москва», 7 ноября, 14:00 Тезисы: http://www.highload.ru/2017/abstracts/2881.html У компании Ingram Micro Cloud стенд на HL. На нем мы организуем браузерную игру TheURBN (urbn.odn.pw) с воксельной графикой, в которой каждый может захватывать территорию общего мира и строить небоскребы при помощи кубиков, а за процессом можно наблюдать на стенде. На экранах мы будем в режиме реального времени показывать виртуальный 3D-мир, в котором участники будут строить небоскребы. Большего погружения можно получить в шлеме VR Oculus Rift на нашем стенде. ...

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

44. 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

45. 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

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

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-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()
}

98. 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()
}

99. 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

103. 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

104. 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 );
}

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. 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