Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TheURBN game #highload2017

TheURBN game #highload2017

Alex Khaerov

November 06, 2017
Tweet

More Decks by Alex Khaerov

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. 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 full-size slide

  13. Background
    Exhibition stand at HL++2017

    View full-size slide

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

    View full-size slide

  15. /r/Place
    a social experiment by Reddit

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. /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 full-size slide

  22. /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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. Features
    The Game

    View full-size slide

  27. multi-player
    Features
    The Game

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. 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 full-size slide

  36. 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 full-size slide

  37. 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 full-size slide

  38. 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 full-size slide

  39. 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 full-size slide

  40. 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 full-size slide

  41. Gameplay and rules

    View full-size slide

  42. Gameplay and rules
    find spots with the flag

    View full-size slide

  43. Gameplay and rules
    capture flags
    find spots with the flag

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. Enterprise architecture

    View full-size slide

  47. Enterprise architecture

    View full-size slide

  48. Enterprise architecture
    +

    View full-size slide

  49. Enterprise architecture
    game-frontend
    +

    View full-size slide

  50. Enterprise architecture
    game-storage
    game-frontend
    +

    View full-size slide

  51. Enterprise architecture
    game-storage
    game-frontend
    +

    View full-size slide

  52. Enterprise architecture
    game-storage
    game-frontend
    +
    ?

    View full-size slide

  53. Replication problem

    View full-size slide

  54. Replication problem

    View full-size slide

  55. Replication problem

    View full-size slide

  56. Replication problem
    Active

    View full-size slide

  57. Active Passive
    Replication problem

    View full-size slide

  58. Active Passive
    Replication problem

    View full-size slide

  59. Active Passive
    Replication problem

    View full-size slide

  60. Active Passive
    + Easy to understand
    Replication problem

    View full-size slide

  61. Active Passive
    + Easy to understand
    + More efficient
    Replication problem

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    Replication problem

    View full-size slide

  67. Architecture
    game-storage
    game-frontend
    +

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  70. Data Structure

    View full-size slide

  71. “flat array”
    Data Structure

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  84. Architecture
    game-backend
    game-frontend
    +
    ?

    View full-size slide

  85. Architecture
    MongoDB
    game-backend
    game-frontend
    +

    View full-size slide

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

    View full-size slide

  87. Protocol
    1 2 3 …
    N
    game-frontend

    View full-size slide

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

    View full-size slide

  89. 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 full-size slide

  90. 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 full-size slide

  91. 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 full-size slide

  92. 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 full-size slide

  93. 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 full-size slide

  94. 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 full-size slide

  95. 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 full-size slide

  96. Protocol
    1 2 3 …
    N
    32
    32
    game-frontend mongoDB > data
    (1) ObjectId() { 7 fields } Object
    (2) ObjectId() { 7 fields } Object
    (3) ObjectId() { 7 fields } Object
    (4) ObjectId() { 7 fields } Object
    (5) ObjectId() { 7 fields } Object
    (6) ObjectId() { 7 fields } Object
    (7) ObjectId() { 7 fields } Object
    (8) ObjectId() { 7 fields } Object
    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 full-size slide

  97. Protocol
    1 2 3 …
    N
    32
    32
    game-frontend mongoDB > data
    (1) ObjectId() { 7 fields } Object
    (2) ObjectId() { 7 fields } Object
    (3) ObjectId() { 7 fields } Object
    (4) ObjectId() { 7 fields } Object
    (5) ObjectId() { 7 fields } Object
    (6) ObjectId() { 7 fields } Object
    (7) ObjectId() { 7 fields } Object
    (8) ObjectId() { 7 fields } Object
    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 full-size slide

  98. Protocol
    1 2 3 …
    N
    32
    32
    game-frontend mongoDB > data
    (1) ObjectId() { 7 fields } Object
    (2) ObjectId() { 7 fields } Object
    (3) ObjectId() { 7 fields } Object
    (4) ObjectId() { 7 fields } Object
    (5) ObjectId() { 7 fields } Object
    (6) ObjectId() { 7 fields } Object
    (7) ObjectId() { 7 fields } Object
    (8) ObjectId() { 7 fields } Object
    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 full-size slide

  99. Protocol
    1 2 3 …
    N
    32
    32
    game-frontend mongoDB > data
    (1) ObjectId() { 7 fields } Object
    (2) ObjectId() { 7 fields } Object
    (3) ObjectId() { 7 fields } Object
    (4) ObjectId() { 7 fields } Object
    (5) ObjectId() { 7 fields } Object
    (6) ObjectId() { 7 fields } Object
    (7) ObjectId() { 7 fields } Object
    (8) ObjectId() { 7 fields } Object
    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 full-size slide

  100. Architecture
    MongoDB
    game-backend
    game-frontend
    +

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  105. Game-backend

    View full-size slide

  106. Game-backend
    Python 3.6 + aiohttp

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  109. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  112. Game-frontend

    View full-size slide

  113. Game-frontend
    Native JavaScript and WebGL?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  116. 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 full-size slide

  117. 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 full-size slide

  118. 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 full-size slide

  119. 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 full-size slide

  120. 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 full-size slide

  121. 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 full-size slide

  122. 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 full-size slide

  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)
    voxels (blocks) / chunks
    Ray casting
    AABB: Bounding volume

    View full-size slide

  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
    Ray casting
    AABB: Bounding volume Textures

    View full-size slide

  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
    Ray casting
    AABB: Bounding volume
    player with controls
    Textures

    View full-size slide

  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
    Ray casting
    game events (tick/setBlock/collision/renderChunk)
    AABB: Bounding volume
    player with controls
    Textures

    View full-size slide

  127. Game-frontend
    voxel.js
    your
    code

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  132. 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 full-size slide

  133. 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 full-size slide

  134. 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 full-size slide

  135. 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 full-size slide

  136. 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 full-size slide

  137. 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 full-size slide

  138. AR VR
    Oculus Rift CV1

    View full-size slide

  139. Oculus Rift
    + it’s true VR

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  144. 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 full-size slide

  145. A-Frame
    virtual reality framework

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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














    View full-size slide

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














    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  156. Optimizations

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide