TheURBN game #highload2017

Slide 1

Slide 1 text

Как мы делали многопользовательскую браузерную игру для HL++ с воксельной графикой Александр Хаёров / Unit Manager / t.me/hayorov

Slide 2

Slide 2 text

difficulty level Ad Voxel Art Designer Wanted https://urbn.odn.pw x

Slide 3

Slide 3 text

difficulty level Ad Voxel Art Designer Wanted https://urbn.odn.pw x

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Who Are Indie Game Developers? 97% men 60% singles 1-3 months/game Source: somewhere from the Internet Indie is a shortform of "independent"

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Who We Are

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Background

Slide 17

Slide 17 text

Background Exhibition stand at HL++2017

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

/r/Place a social experiment by Reddit

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

/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

Slide 27

Slide 27 text

/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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

The Game

Slide 32

Slide 32 text

Features The Game

Slide 33

Slide 33 text

multi-player Features The Game

Slide 34

Slide 34 text

multi-player Features multi-player and networked The Game

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Gameplay and rules

Slide 48

Slide 48 text

Gameplay and rules find spots with the flag

Slide 49

Slide 49 text

Gameplay and rules capture flags find spots with the flag

Slide 50

Slide 50 text

Gameplay and rules capture flags hold and earn scores find spots with the flag

Slide 51

Slide 51 text

Gameplay and rules capture flags hold and earn scores find spots with the flag win a prize

Slide 52

Slide 52 text

Enterprise architecture

Slide 53

Slide 53 text

Enterprise architecture

Slide 54

Slide 54 text

Enterprise architecture +

Slide 55

Slide 55 text

Enterprise architecture game-frontend +

Slide 56

Slide 56 text

Enterprise architecture game-storage game-frontend +

Slide 57

Slide 57 text

Enterprise architecture game-storage game-frontend +

Slide 58

Slide 58 text

Enterprise architecture game-storage game-frontend + ?

Slide 59

Slide 59 text

Replication problem

Slide 60

Slide 60 text

Replication problem

Slide 61

Slide 61 text

Replication problem

Slide 62

Slide 62 text

Replication problem Active

Slide 63

Slide 63 text

Active Passive Replication problem

Slide 64

Slide 64 text

Active Passive Replication problem

Slide 65

Slide 65 text

Active Passive Replication problem

Slide 66

Slide 66 text

Active Passive + Easy to understand Replication problem

Slide 67

Slide 67 text

Active Passive + Easy to understand + More efficient Replication problem

Slide 68

Slide 68 text

Active Passive + Easy to understand + More efficient - Fragile Replication problem

Slide 69

Slide 69 text

Active Passive + Robust to de-sync + Easy to understand + More efficient - Fragile Replication problem

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

Architecture game-storage game-frontend +

Slide 74

Slide 74 text

Architecture game-storage game-backend game-frontend +

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

Data Structure

Slide 77

Slide 77 text

“flat array” Data Structure

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

Architecture game-backend game-frontend + ?

Slide 91

Slide 91 text

Architecture MongoDB game-backend game-frontend +

Slide 92

Slide 92 text

Architecture MongoDB game-backend game-frontend + ? ?

Slide 93

Slide 93 text

Protocol

Slide 94

Slide 94 text

Protocol 1 2 3 … N game-frontend

Slide 95

Slide 95 text

Protocol 1 2 3 … N 32 32 game-frontend

Slide 96

Slide 96 text

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

Slide 99

Slide 99 text

Slide 100

Slide 100 text

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

Architecture MongoDB game-backend game-frontend +

Slide 108

Slide 108 text

Architecture MongoDB game-backend game-frontend WebSocket +

Slide 109

Slide 109 text

Architecture MongoDB game-backend game-frontend WebSocket + +

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

Game-backend

Slide 113

Slide 113 text

Game-backend Python 3.6 + aiohttp

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

Game-frontend

Slide 120

Slide 120 text

Game-frontend Native JavaScript and WebGL?

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

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)

Slide 124

Slide 124 text

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

Slide 127

Slide 127 text

Slide 128

Slide 128 text

Slide 129

Slide 129 text

Slide 130

Slide 130 text

Slide 131

Slide 131 text

Slide 132

Slide 132 text

Slide 133

Slide 133 text

Slide 134

Slide 134 text

Game-frontend voxel.js your code

Slide 135

Slide 135 text

Game-frontend voxel.js your code three.js

Slide 136

Slide 136 text

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

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

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

Slide 140

Slide 140 text

Slide 141

Slide 141 text

Slide 142

Slide 142 text

Slide 143

Slide 143 text

Slide 144

Slide 144 text

Slide 145

Slide 145 text

AR VR

Slide 146

Slide 146 text

AR VR

Slide 147

Slide 147 text

AR VR

Slide 148

Slide 148 text

AR VR

Slide 149

Slide 149 text

AR VR Oculus Rift CV1

Slide 150

Slide 150 text

Oculus Rift

Slide 151

Slide 151 text

Oculus Rift + it’s true VR

Slide 152

Slide 152 text

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

Slide 153

Slide 153 text

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

Slide 154

Slide 154 text

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

Slide 155

Slide 155 text

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

Slide 156

Slide 156 text

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

Slide 157

Slide 157 text

No content

Slide 158

Slide 158 text

A-Frame virtual reality framework

Slide 159

Slide 159 text

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

Slide 160

Slide 160 text

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

Slide 161

Slide 161 text

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

Slide 162

Slide 162 text

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

Slide 163

Slide 163 text

MongoDB game-backend game-frontend WebSocket + + Architecture

Slide 164

Slide 164 text

MongoDB game-backend game-frontend WebSocket + Architecture

Slide 165

Slide 165 text

MongoDB game-backend game-frontend WebSocket + Architecture +

Slide 166

Slide 166 text

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

Slide 167

Slide 167 text

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

Slide 168

Slide 168 text

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

Slide 169

Slide 169 text

Optimizations

Slide 170

Slide 170 text

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

Slide 171

Slide 171 text

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

Slide 172

Slide 172 text

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

Slide 173

Slide 173 text

No content

Slide 174

Slide 174 text

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

Slide 175

Slide 175 text

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