Браузерная игра с 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
   

   View Slide

2. Logo Game
   

   View Slide

3. Logo Game
   

   View Slide

4. Logo Game
   

   View Slide

5. Python
   Logo Game
   

   View Slide

6. Python
   Logo Game
   

   View Slide

7. Python
   Logo Game
   

   View Slide

8. Python
   Logo Game
   

   View Slide

9. Python aiohttp
   Logo Game
   

   View Slide

10. Python aiohttp
    Logo Game
    

    View Slide

11. Python aiohttp
    Logo Game
    

    View Slide

12. Python aiohttp
    Logo Game
    

    View Slide

13. Python aiohttp flask
    Logo Game
    

    View Slide

14. Python aiohttp flask
    Logo Game
    

    View Slide

15. Браузерная игра с VR
    Александр Хаёров
    t.me/hayorov
    в 2K17 на Python
    

    View Slide

16. View Slide

17. Who Are Indie Game Developers?
    Source: somewhere from the Internet
    

    View Slide

18. Who Are Indie Game Developers?
    Source: somewhere from the Internet
    Indie is a shortform of "independent"
    

    View Slide

19. Who Are Indie Game Developers?
    97% men
    Source: somewhere from the Internet
    Indie is a shortform of "independent"
    

    View Slide

20. Who Are Indie Game Developers?
    97% men
    60% singles
    Source: somewhere from the Internet
    Indie is a shortform of "independent"
    

    View Slide

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"
    

    View Slide

22. View Slide

23. Who We Are
    

    View Slide

24. Who We Are
    Alex Khaerov
    a Unit Manager at Ingram Micro Cloud
    

    View Slide

25. Who We Are
    and the Great Team of Engineers
    Alex Khaerov
    a Unit Manager at Ingram Micro Cloud
    

    View Slide

26. Who We Are
    and the Great Team of Engineers
    @themaxbelov @ToxicWar @weglov
    @spukst3r
    Alex Khaerov
    a Unit Manager at Ingram Micro Cloud
    

    View Slide

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
    

    View Slide

28. Background
    

    View Slide

29. Background
    Exhibition stand at HL++2017
    

    View Slide

30. Background
    Exhibition stand at HL++2017
    Reddit r/Place influence
    

    View Slide

31. View Slide

32. /r/Place
    a social experiment by Reddit
    

    View Slide

33. /r/Place
    1,000 x 1,000 px canvas
    a social experiment by Reddit
    

    View Slide

34. /r/Place
    1,000 x 1,000 px canvas
    pixel * user per 5 min
    a social experiment by Reddit
    

    View Slide

35. /r/Place
    1,000 x 1,000 px canvas
    pixel * user per 5 min
    72 hours of fun
    a social experiment by Reddit
    

    View Slide

36. /r/Place
    1,000 x 1,000 px canvas
    pixel * user per 5 min
    72 hours of fun
    a social experiment by Reddit
    

    View Slide

37. /r/Place
    1,000 x 1,000 px canvas
    pixel * user per 5 min
    72 hours of fun
    a social experiment by Reddit
    

    View Slide

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
    

    View Slide

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
    

    View Slide

40. Background
    Exhibition stand at HL++2017
    Reddit r/Place influence
    

    View Slide

41. Background
    Exhibition stand at HL++2017
    Reddit r/Place influence
    Games are full of fun
    

    View Slide

42. Background
    Exhibition stand at HL++2017
    Reddit r/Place influence
    Games are full of fun
    A new dev experience
    

    View Slide

43. The Game
    

    View Slide

44. Features
    The Game
    

    View Slide

45. multi-player
    Features
    The Game
    

    View Slide

46. multi-player
    Features
    multi-player and networked
    The Game
    

    View Slide

47. multi-player
    2D computer graphics
    Features
    multi-player and networked
    The Game
    

    View Slide

48. multi-player
    2D 3D computer graphics
    Features
    multi-player and networked
    The Game
    

    View Slide

49. multi-player
    2D 3D computer graphics
    hyped tech
    Features
    multi-player and networked
    The Game
    

    View Slide

50. multi-player
    2D 3D computer graphics
    hyped Virtual Reality tech
    Features
    multi-player and networked
    The Game
    

    View Slide

51. multi-player
    2D computer graphics
    2D 3D computer graphics
    hyped tech
    hyped Virtual Reality tech
    Features
    multi-player and networked
    The Game
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

59. Gameplay and Rules
    

    View Slide

60. Gameplay and Rules
    find spots with the flag
    

    View Slide

61. Gameplay and Rules
    capture flags
    find spots with the flag
    

    View Slide

62. Gameplay and Rules
    capture flags
    hold and earn scores
    find spots with the flag
    

    View Slide

63. Gameplay and Rules
    capture flags
    hold and earn scores
    find spots with the flag
    win a prize
    

    View Slide

64. Enterprise Architecture
    

    View Slide

65. Enterprise Architecture
    

    View Slide

66. Enterprise Architecture
    +
    

    View Slide

67. Enterprise Architecture
    game-frontend
    +
    

    View Slide

68. Enterprise Architecture
    game-storage
    game-frontend
    +
    

    View Slide

69. Enterprise Architecture
    game-storage
    game-frontend
    +
    

    View Slide

70. Enterprise Architecture
    game-storage
    game-frontend
    +
    ?
    

    View Slide

71. Replication Problem
    

    View Slide

72. Replication Problem
    

    View Slide

73. Replication Problem
    

    View Slide

74. Replication Problem
    Active
    

    View Slide

75. Active Passive
    Replication Problem
    

    View Slide

76. Active Passive
    Replication Problem
    

    View Slide

77. Active Passive
    Replication Problem
    

    View Slide

78. Active Passive
    + Easy to understand
    Replication Problem
    

    View Slide

79. Active Passive
    + Easy to understand
    + More efficient
    Replication Problem
    

    View Slide

80. Active Passive
    + Easy to understand
    + More efficient
    - Fragile
    Replication Problem
    

    View Slide

81. Active Passive
    + Robust to de-sync
    + Easy to understand
    + More efficient
    - Fragile
    Replication Problem
    

    View Slide

82. Active Passive
    + Robust to de-sync
    + Easy to understand
    + More efficient
    - Fragile
    + Easier to secure
    Replication Problem
    

    View Slide

83. Active Passive
    + Robust to de-sync
    + Easy to understand
    + More efficient
    - Fragile - Single point of failure
    + Easier to secure
    Replication Problem
    

    View Slide

84. Active Passive
    + Robust to de-sync
    + Easy to understand
    + More efficient
    - Fragile - Single point of failure
    + Easier to secure
    ✔
    Replication Problem
    

    View Slide

85. Architecture
    game-storage
    game-frontend
    +
    

    View Slide

86. Architecture
    game-storage
    game-backend
    game-frontend
    +
    

    View Slide

87. Architecture
    game-storage
    game-backend
    game-frontend
    +
    ?
    

    View Slide

88. Data Structure
    

    View Slide

89. “flat array”
    Data Structure
    

    View Slide

90. “flat array”
    + read/write = const
    Data Structure
    

    View Slide

91. “flat array”
    + read/write = const
    - memory = L^3
    Data Structure
    

    View Slide

92. “flat array” octree
    + read/write = const
    - memory = L^3
    Data Structure
    

    View Slide

93. “flat array” octree
    + read/write = const
    - memory = L^3
    Data Structure
    

    View Slide

94. “flat array” octree
    + read/write = const
    - memory = L^3
    Data Structure
    

    View Slide

95. “flat array” octree
    + read/write = const
    - memory = L^3
    + lean
    Data Structure
    

    View Slide

96. “flat array” octree
    + read/write = const
    - slower than flat
    - memory = L^3
    + lean
    Data Structure
    

    View Slide

97. “flat array” octree pages/chunks
    + read/write = const
    - slower than flat
    - memory = L^3
    + lean
    Data Structure
    

    View Slide

98. “flat array” octree pages/chunks
    + read/write = const + lazily initialized
    - slower than flat
    - memory = L^3
    + lean
    Data Structure
    

    View Slide

99. “flat array” octree pages/chunks
    + read/write = const + lazily initialized
    - slower than flat
    - memory = L^3
    + lean
    - more complicated
    Data Structure
    

    View Slide

100. “flat array” octree
     + Read/Write = const + lazily initialized
     - slower than flat
     - Memory = L^3
     + lean
     - more complicated
     Data Structure
     pages/chunks
     

     View Slide

101. “flat array” octree
     + Read/Write = const + lazily initialized
     - slower than flat
     - Memory = L^3
     + lean
     - more complicated
     Data Structure
     pages/chunks
     ✔
     

     View Slide

102. Architecture
     game-backend
     game-frontend
     +
     ?
     

     View Slide

103. Architecture
     MongoDB
     game-backend
     game-frontend
     +
     

     View Slide

104. Architecture
     MongoDB
     game-backend
     game-frontend
     +
     ? ?
     

     View Slide

105. Protocol
     

     View Slide

106. Protocol
     1 2 3 …
     N
     game-frontend
     

     View Slide

107. Protocol
     1 2 3 …
     N
     32
     32
     game-frontend
     

     View Slide

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
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

119. Architecture
     MongoDB
     game-backend
     game-frontend
     +
     

     View Slide

120. Architecture
     MongoDB
     game-backend
     game-frontend
     WebSocket
     +
     

     View Slide

121. Architecture
     MongoDB
     game-backend
     game-frontend
     WebSocket
     +
     +
     

     View Slide

122. Architecture
     MongoDB
     game-backend
     game-frontend
     WebSocket
     +
     +
     HTTP
     

     View Slide

123. Architecture
     MongoDB
     game-backend
     game-frontend
     WebSocket
     +
     +
     HTTP
     

     View Slide

124. Game-backend
     

     View Slide

125. Game-backend
     Python 3.6 + aiohttp
     

     View Slide

126. Game-backend
     Python 3.6 + aiohttp
     uvloop
     implemented in Cython and uses libuv
     

     View Slide

127. Game-backend
     Python 3.6 + aiohttp
     uvloop
     implemented in Cython and uses libuv
     motor
     full-featured, non-blocking MongoDB driver for Python
     

     View Slide

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
     

     View Slide

129. MongoDB
     game-backend
     game-frontend
     WebSocket
     +
     +
     HTTP
     Architecture
     

     View Slide

130. MongoDB
     game-backend
     game-frontend
     WebSocket
     +
     +
     HTTP
     Architecture
     

     View Slide

131. Game-frontend
     

     View Slide

132. Game-frontend
     Native JavaScript and WebGL?
     

     View Slide

133. Game-frontend
     Native JavaScript and WebGL?
     Native JavaScript and WebGL?
     

     View Slide

134. Game-frontend
     Native JavaScript and WebGL?
     Native JavaScript and WebGL?
     Voxel.js
     an open source voxel game building toolkit for modern web browsers
     

     View Slide

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)
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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.
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

146. Game-frontend
     voxel.js
     your
     code
     

     View Slide

147. Game-frontend
     voxel.js
     your
     code
     three.js
     

     View Slide

148. Game-frontend
     voxel.js
     your
     code
     three.js WebGL
     Browser
     

     View Slide

149. Game-frontend
     voxel.js
     your
     code
     three.js WebGL
     Browser
     Hardware OpenGL
     Driver
     Display Mngt System
     

     View Slide

150. Game-frontend
     voxel.js
     your
     code
     three.js WebGL
     Browser
     Hardware OpenGL
     Driver
     Display Mngt System
     Creating the scene
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

157. AR VR
     

     View Slide

158. AR VR
     

     View Slide

159. AR VR
     

     View Slide

160. AR VR
     

     View Slide

161. AR VR
     Oculus Rift CV1
     

     View Slide

162. Oculus Rift
     

     View Slide

163. Oculus Rift
     + it’s true VR
     

     View Slide

164. Oculus Rift
     + resolution and refresh rate
     + it’s true VR
     

     View Slide

165. Oculus Rift
     + resolution and refresh rate
     + it’s true VR
     + very comfortable
     

     View Slide

166. Oculus Rift
     - too numerous wires
     + resolution and refresh rate
     + it’s true VR
     + very comfortable
     

     View Slide

167. Oculus Rift
     - no SDK for macOS/Linux
     - too numerous wires
     + resolution and refresh rate
     + it’s true VR
     + very comfortable
     

     View Slide

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
     

     View Slide

169. View Slide

170. A-Frame
     virtual reality framework
     

     View Slide

171. A-Frame
     virtual reality framework
     works on Vive, Rift, Daydream, GearVR, desktop
     

     View Slide

172. A-Frame
     virtual reality framework
     works on Vive, Rift, Daydream, GearVR, desktop
     based on top of HTML
     

     View Slide

173. A-Frame
     virtual reality framework
     works on Vive, Rift, Daydream, GearVR, desktop
     based on top of HTML
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     

     View Slide

174. A-Frame
     virtual reality framework
     works on Vive, Rift, Daydream, GearVR, desktop
     based on top of HTML
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     

     View Slide

175. MongoDB
     game-backend
     game-frontend
     WebSocket
     +
     +
     Architecture
     

     View Slide

176. MongoDB
     game-backend
     game-frontend
     WebSocket
     +
     Architecture
     

     View Slide

177. MongoDB
     game-backend
     game-frontend
     WebSocket
     +
     Architecture
     +
     

     View Slide

178. MongoDB
     game-backend
     game-frontend
     WebSocket
     +
     Architecture
     +
     game-frontend-vr
     WebSocket
     

     View Slide

179. MongoDB
     game-backend
     game-frontend
     WebSocket
     +
     Architecture
     +
     game-frontend-vr
     WebSocket
     firebase-auth
     HTTP
     

     View Slide

180. MongoDB
     game-backend
     game-frontend
     WebSocket
     +
     Architecture
     +
     game-frontend-vr
     WebSocket
     firebase-auth
     HTTP
     Auth
     Auth
     

     View Slide

181. Optimizations
     

     View Slide

182. Optimizations
     Pre-process voxel models
     Voxels count ↓ (-78%)
     

     View Slide

183. Optimizations
     Use Mesher
     FPS ↑
     Pre-process voxel models
     Voxels count ↓ (-78%)
     

     View Slide

184. Optimizations
     Use Mesher
     FPS ↑
     Enable compression for WebSocket (RFC 7692)
     Traffic ↓ (5MB -> 1.8MB)
     Pre-process voxel models
     Voxels count ↓ (-78%)
     

     View Slide

185. View Slide

186. Alex Khaerov
     t.me/hayorov
     code github.com/TheURBN
     try new and have fun
     

     View Slide

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

     View Slide