Браузерные игры: как мы сделали Relic Hunter на Three.js и ИИ-картинках
Я хотел, чтобы Relic Hunter: Обвал храма выглядел как настоящий храм, а не как его игровое приближение. На ИИ-картинках были резной камень, тёплый свет факелов и глубокие тени. А моя первая сборка на Three.js состояла из коробок, обтянутых повторяющейся коричневой текстурой.
Вот как я закрыл этот разрыв и превратил один сгенерированный ИИ коридор в лабиринт, по которому можно ходить. Relic Hunter это бесплатная браузерная игра, которая запускается на компьютере и телефоне без загрузки и установки. За этой простой ссылкой скрываются система проекции, собственный шейдер и ряд практичных компромиссов, выстроенных вокруг одного вопроса: как сделать, чтобы кинематографичная 3D-игра быстро загружалась в обычном браузере?
Зачем делать 3D-игру для браузера?
Главное преимущество браузерных игр в доступности. Человек переходит по ссылке и сразу играет. Между любопытством и первым забегом нет ни установщика, ни страницы в магазине приложений, ни аккаунта. Поэтому бесплатные браузерные игры легко находить, пробовать и пересылать друзьям.
Ограничение в том, что каждая лишняя модель, текстура и анимация удлиняют ожидание перед игрой. Поэтому Relic Hunter нужна была визуальная система, которая использует небольшое число ресурсов в шести уровнях и при этом не делает каждый коридор копией предыдущего.
Игра под визуальным экспериментом
Relic Hunter не бесконечный прямой коридор, нарисованный под лабиринт. Каждое из шести испытаний построено из сгенерированного лабиринта с развилками, обходными путями и настоящими тупиками. Перед забегом у тебя есть несколько секунд, чтобы изучить карту. Когда таймер пошёл, нужно помнить маршрут, на каждой развилке сворачивать куда надо и не останавливаться.
Так игра становится отчасти раннером по лабиринту, отчасти проверкой памяти и отчасти побегом из храма. Неверный поворот стоит дороже пары шагов: придётся разворачиваться, пока таймер обвала продолжает гореть. Зажми M, чтобы ещё раз посмотреть карту, но читать её на бегу тоже непросто.
Три общие жизни переходят через всю кампанию. Ловушки появляются по одной, а потом начинают накладываться друг на друга: под качающимися лезвиями нужно пригибаться, через упавшие балки и провалы в полу перепрыгивать, а резные львиные головы выдыхают огонь поперёк пути. В пятом испытании Mira или Vikram наконец берёт Syamantaka, солнечный самоцвет Surya. Шестое это побег: храм рушится у тебя за спиной.
Почему обычные 3D-текстуры выглядели неправильно
Визуальное направление началось с ИИ-картинок резных каменных коридоров, тёплого света факелов и глубокой тени. Как неподвижные изображения они выглядели убедительно. Первая играбельная версия нет. Повторение камня как обычной текстуры давало коробку из плиток и выбрасывало самое важное в исходной картинке: освещение.
Фотография выглядит настоящей во многом благодаря свету: мягкой тени там, где стена встречается с полом, сиянию вокруг факела и темноте в дальнем конце зала. Повторяемая текстура намеренно выровнена, чтобы стыковаться без швов. Когда я убрал свет, чтобы картинка повторялась, я убрал и то, что делало её реальной.
Tour Into the Picture: проецируем картинку на 3D
Решение пришло из техники компьютерной графики под названием Tour Into the Picture, или TIP. Представь, что исходное изображение снято настоящей камерой. Я ставлю виртуальную камеру в соответствующую точку сцены Three.js, задаю ей такой же вид и проецирую картинку на простую геометрию пола, стен и потолка, как проектор слайдов.
Рядом с этой точкой коридор сохраняет тени, свечение и глубину исходного изображения, а при этом работает как пространство, по которому игрок может двигаться. В шейдере каждая точка поверхности спрашивает, куда она попадает на изображении проектора, и берёт оттуда цвет. Первый удачный прототип ощущался так, будто входишь в картину.
Пять проблем, которые появились, когда игрок начал двигаться
- Растяжение: чем дальше игрок уходил от проектора, тем сильнее искажалась картинка.
- Дыры: боковые проёмы и дальние поверхности за пределами обзора исходной камеры оставались без проецируемых деталей.
- Мерцание: смена направления проекции на развилках заставляла стены дёргаться или переливаться.
- Смазывание при движении: один пиксель исходника мог растягиваться на много экранных пикселей на полу и боковых стенах.
- Запечённое освещение: в проецируемой картинке свет уже был, поэтому обычные факелы в реальном времени не могли просто подсветить её заново.
Эти проблемы легко проглядеть на скриншотах и невозможно не заметить на бегу. Из-за этого изменился и мой способ оценивать графику: каждое улучшение должно было выдерживать движение, повороты и возвращения назад, а не только заранее выбранный красивый кадр.
Гибридная система, которая вошла в игру
Вместо одного проектора на длинный зал игра расставляет проекторы вдоль каждого открытого коридора в обоих направлениях. В каждом кадре она выбирает ближайшие проекторы, обращённые в сторону игрока, и смешивает ограниченное их число. Игрок никогда не оказывается так далеко от полезного источника, чтобы картинка превращалась в растянутое размытие.
В хитрых архитектурных местах используется настоящая геометрия. Торцевые стены получают резные панели, чтобы они не выглядели как коридор, уходящий в бесконечность. Боковые проёмы используют панели-арки с настоящими отверстиями, и каждый поворот легко читается. Поверхности вне лучшей проекции вместо чёрного получают камень.
Финальный шейдер гибридный. Он измеряет, насколько растянута проецируемая фотография в каждом пикселе. Чёткие участки остаются фотографией. Крутые, смазанные поверхности подмешивают чёткую каменную плитку. Эта плитка заимствует у фотографии размытое освещение. ИИ-картинка по-прежнему решает, где коридор тёплый, а где тёмный, а плитка возвращает мелкие детали в движении. Анизотропная фильтрация и мипмапы дополнительно делают чётче оставшиеся образцы под крутым углом.
Отдельно персонажи, отдельно ловушки
Коридор это сцена. Mira, Vikram, качающиеся лезвия, огнедышащие львиные головы, упавшие балки и провалы в полу это отдельные интерактивные слои. Всё, во что игрок может попасть, что можно обойти или за чьей анимацией можно следить, должно быть отдельным объектом: если запечь ловушку в картинку коридора, взаимодействие будет выглядеть плоско.
Анимированные элементы идут по отдельному конвейеру: чистые кадры, сделанные в ChatGPT, короткие ролики, анимированные в Grok, и удаление зелёного фона перед размещением в сцене Three.js. Когда мир и его движущиеся части разделены, настраивать проще и то, и другое.
Что такой подход значит для браузерных игр
Современные игры в веб-браузере умеют давать 3D-графику в реальном времени, собственные шейдеры, анимацию, звук и отзывчивое управление в обычной странице. Relic Hunter делает это с одной главной картинкой коридора, панелью арки и небольшим набором каменных текстур, а не с тяжёлой библиотекой подробных 3D-окружений.
В итоге получилась компактная игра на Three.js, чьи коридоры сохраняют настроение ИИ-иллюстраций, пока игрок бежит, поворачивает и возвращается назад. Такая экономия ресурсов важна для игр без загрузки: чем меньше файлы, тем короче путь от открытия страницы до самой игры.
Как играть в Relic Hunter онлайн
- Открой Relic Hunter: Обвал храма в браузере.
- Выбери Mira или Vikram в качестве охотника за реликвиями.
- Изучи карту перед началом каждого испытания.
- Сворачивай на развилках, перепрыгивай ловушки или пригибайся и добегай до выхода, пока не вышло время.
- Возьми камень Syamantaka и сбеги от последнего обвала.
Если ты ищешь бесплатную 3D-игру в браузере, быстрый раннер по храмовому лабиринту или одну из бесплатных онлайн-игр, в которые можно сыграть без аккаунта, начни забег и проверь, сможешь ли вынести солнечный самоцвет к дневному свету.
Играть в Relic Hunter прямо сейчас. Бесплатно, онлайн и без загрузки. · Больше браузерных игр · Читай про бесплатные игры без загрузки.