Назад

Afterglow Grand Prix

Аркадная гонка на формульных болидах, которая запускается прямо в браузере: встаньте на стартовую решётку против пяти гонщиков под управлением ИИ, уходите в дрифт, включайте ускорение и ловите слипстрим на закатной трассе, на залитых дождём городских улицах и на ночной уличной трассе Сингапура. Все пять машин в гараже созданы с помощью Tripo.

Автор: Theodore
Попробовать онлайн
Afterglow Grand PrixПопробовать онлайн

Описание

Afterglow Grand Prix — аркадная гонка на формульных болидах, которая запускается прямо в браузере, а на стартовой решётке шесть машин: вы и пять гонщиков под управлением ИИ. Трасс три: Afterglow International на закате (3,4 км, 14 поворотов), залитая дождём Rain City Streets (2,4 км, 14 поворотов) и уличная трасса по образцу ночной гонки в Сингапуре (4,9 км, 19 поворотов). Выбирайте закат, дождливую или ясную ночь, а число кругов и сложность ИИ (Easy, Normal, Hard или Extreme) задавайте сами.

Каждая из пяти машин в гараже управляется по-своему: AURUM GT — сбалансированный и простой выбор; AURELIA взрывно стартует и быстрее всех выходит из поворотов; у NERINE лучшее сцепление и самая высокая скорость в середине поворота; DELUSION ANGEL — королева дрифта, быстрее всех копящая ускорение; у VIRELIA самая высокая максимальная скорость, но тяжёлый руль. На экране выбора машины можно переключаться между двумя сценами — машины, стоящие ночью на пит-лейне, или ваша машина, несущаяся на полном газу по трассе в свете прожекторов, — а перетаскиванием мыши машину можно вращать.

Каждая гонка открывается кинематографичной заставкой: пролёт камеры над стартовой решёткой, низкий проезд сквозь пелотон, затем крупный план вашей машины, а когда гаснут пять красных огней, вы срываетесь со старта. Гоночный HUD заимствует приёмы телетрансляций: таблица позиций, интервалы до соседних машин и гоночный инженер с прогнозом вашего итогового места и вероятностью победы, а также баннеры при обгонах и быстрейших кругах; большие экраны у трассы при этом показывают гонку в прямом эфире. Пересеките финишную черту — и вас ждут клетчатый флаг, облёт камеры и фейерверк, а затем итоговые результаты.

Чем дольше дрифт, тем мощнее рывок на выходе из него, а искры меняют цвет с синего на оранжевый и затем на розовый; дрифт копит ускорение, которое выгоднее всего тратить на прямых; пристройтесь за соперником, чтобы поймать его слипстрим; вылетите за поребрики — и трава вас замедлит, а гравий — ещё сильнее. У пяти ИИ-гонщиков свои характеры: один быстрее всех на прямой, но склонен ошибаться в поворотах, другой — мастер поворотов, но медленнее на прямых, а третий жёстко обороняется.

Управление: W — газ, S — тормоз / задний ход, A / D — поворот (подойдут и стрелки); удерживайте пробел для дрифта — чем дольше держите, тем сильнее рывок; Shift — ускорение, C — переключение между ближней и дальней камерой сзади и видом из кокпита, R — возврат на трассу, M — выключить звук, Esc / P — пауза. На скорости коротко нажмите S во время поворота, чтобы бросить машину в дрифт. Пока поддерживается только клавиатура на компьютере — без сенсорного управления и геймпада.

Рекомендуется Chrome / Edge 113 или новее (WebGPU); в браузерах без WebGPU игра автоматически переключится на WebGL2, а если недоступно ни то ни другое, страница сообщит об этом. При первой загрузке трассы нужно скомпилировать шейдеры, поэтому придётся подождать чуть дольше. Интерфейс игры — на английском языке.

Машины и знаковые здания · Созданы с помощью Tripo

Пять машин в гараже художники создали с помощью Tripo, а затем привели к формату, который нужен игре: все шины стоят на одной высоте, а каждое из четырёх колёс выделено отдельно, с центром в ступице, поэтому в гонке колёса вращаются и поворачиваются. Знаковые здания вдоль трассы тоже созданы с помощью Tripo по референсным фотографиям, а ночью игра зажигает свет в их окнах и в магазинах на первых этажах.

Чтобы машина появилась на экране за считаные секунды, у каждой есть две версии: экран выбора машины сначала загружает облегчённую замену примерно с десятой частью треугольников и текстурами в 512 пикселей, а полная модель тем временем скачивается в фоне — прогресс показывается прямо на экране выбора машины — и подменяет её, как только будет готова. В полных моделях меши сжаты Meshopt, а текстуры хранятся в KTX2 и при загрузке транскодируются в нативные сжатые форматы видеокарты, что экономит видеопамять.

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

Как это работает в браузере

Игрового движка нет: игра построена прямо на WebGPU-рендерере three.js, а материалы, постобработка и частицы дождя написаны в виде узлов TSL, поэтому в браузерах без WebGPU тот же код автоматически переключается на WebGL2. Вся игра — статический сайт размером около 26 МБ после сборки, и большую его часть занимают модели машин и зданий.

Ночная гонка держится на освещении: LED-фонари и неоновые вывески вдоль трассы обрабатываются кластерным освещением, чтобы сцена выдерживала большое число точечных источников света; на мокрой дороге — маска луж, попиксельная шероховатость, планарные отражения и круги от капель, а сам дождь — система частиц на вычислительных шейдерах. В постобработке слоями накладываются ambient occlusion, bloom, туман, цветокоррекция, плёночное зерно и сглаживание, а на высокой скорости — ещё и радиальное размытие от скорости.

Для больших экранов у трассы гонку в прямом эфире снимает виртуальная камера на обочине: она перескакивает вперёд, опережая машину, за которой следит, и панорамирует вслед за ней, обновляя изображение 256×144 каждый шестой кадр и накладывая плашку с номером круга, таблицу позиций и титр с именем гонщика; на финише камера фиксируется на вас и показывает ваше итоговое место.

Пресеты графики — Low, Medium и High — задают разрешение рендеринга, размер карты теней, ambient occlusion, отражения на дороге и то, сколько источников света остаётся в сцене. Все шейдеры компилируются заранее, пока показан экран загрузки, — даже финишный фейерверк прогревается наперёд, — так что посреди гонки ничего не подтормаживает. Звук работает на Web Audio: двигатель, переключения передач, шины, ветер, дождь и зрители синтезируются в реальном времени, а музыка и звуки интерфейса — ассеты CC0.