Как устроен стог сена: 3D-куча, которую копаешь в браузере

Сетка плотности вместо кучи объектов

Очевидный способ построить стог — расставить миллионы отдельных кусков сена и двигать их. Это поставило бы на колени любой браузер. Вместо этого игра хранит стог как трёхмерную сетку чисел. У каждой ячейки значение от 0 до 255: 0 — пустой воздух, 255 — плотно утрамбованное сено.

Сетка имеет 88 ячеек в ширину, 40 в высоту и 88 в глубину, по одной ячейке каждые 0,3 метра. Всего получается 309 760 ячеек, охватывающих пространство примерно 26 на 12 на 26 метров, в котором свободно помещается купол диаметром около 21 метра и высотой почти 10 метров. Игра считает этот объём как 5 000 000 «кусков сена». Именно это число ты видишь уменьшающимся в верхней части экрана, пока копаешь.

Превращаем числа в поверхность

На числа в сетке нельзя смотреть, поэтому игра превращает их в поверхность. Она использует технику Surface Nets, которая находит границу между «воздухом» и «сеном» и строит вдоль неё гладкую оболочку. Представь, что ты обтягиваешь плёнкой то место, где числа переходят середину.

Поэтому туннель выглядит гладким и круглым, а не из блоков. И поэтому, если копать рядом со старым туннелем, два кратера сливаются.

Чанки: переделываем только изменившееся

Перестраивать всю поверхность при каждой копке было бы слишком медленно. Поэтому сетка поделена на блоки по 16 ячеек в каждую сторону, которые игра называет чанками. Когда ты копаешь, она понижает плотность вокруг инструмента и пересобирает только те чанки, которых ты коснулся. Всё остальное остаётся как есть.

Это главный трюк, благодаря которому куча реагирует мгновенно даже на телефоне: объём работы зависит от того, сколько ты выкопал, а не от размера стога.

Соломинки сверху

Одна гладкая поверхность выглядела бы как ком глины. Чтобы она читалась как сено, игра покрывает её тысячами мелких соломинок, нарисованных как экземпляры (instances). Инстансинг означает, что видеокарте одним запросом говорят «нарисуй эту форму соломинки много раз в этих позициях», а это куда дешевле, чем тысячи отдельных объектов. При копке также разлетаются свободные соломинки, чтобы каждое движение ощущалось весомым.

Когда сено падает

Если ты выкопал пещеру и отрезал кусок сена от остального стога, его больше ничего не держит. Игра постоянно проверяет сено, потерявшее связь, и позволяет ему упасть, поэтому нужно быть осторожным, когда выдалбливаешь потолок над собственной головой. Советы по безопасной копке есть в Как найти иголку.

Сохранение стога

Поскольку весь стог — это просто эта сетка чисел, сохранить его значит сохранить сетку. Игра хранит её в твоём браузере вместе с деньгами, инструментами и позицией, так что каждый туннель на месте, когда ты возвращаешься. Подробнее в Сохранение, экспорт и перенос сохранения.

Чем сделано

Игра работает на Three.js, популярной библиотеке с открытым кодом, которая позволяет веб-страницам рисовать 3D-графику через WebGL. Никакой сервер эту работу не выполняет: всё происходит на твоём устройстве.