Низкополигональные гоночные игры — играйте прямо в браузере (или создайте свою)

Низкополигональная гоночная игра — это гоночная игра, геометрия которой намеренно груба: треугольники с плоским затенением, без карт нормалей, без высокочастотных деталей текстур. Это ограничение не то, что приходится терпеть, — именно оно заставляет игру работать на скорости. Когда машина проходит 400-метровую прямую за несколько секунд, ваш глаз не разбирает спицы колёс. Он считывает силуэт, затенение граней и скорость, с которой проносится пейзаж. Низкополигональная геометрия даёт рендереру запас, чтобы эти сигналы оставались плавными.

Эта страница рассказывает, что на самом деле отличает хорошую низкополигональную гонку от плохой, а затем ставит перед вами низкополигональный мир, по которому можно пройти в браузере прямо сейчас. Дальше она показывает, как построить собственную трассу в 3D-конструкторе игр: уложить дорогу по сетке, расставить объекты, работающие как ориентиры скорости, и замкнуть круг. Без шага загрузки, без установки движка.

Почему низкополигональный стиль подходит для гонок

Главный аргумент — перцептивный. На 200 км/ч плоская грань, движущаяся по экрану, считывается как движение. Поверхность с текстурой и мелкими деталями считывается как шум, потому что текстура уменьшается быстрее, чем цепочка мип-уровней успевает её разрешить. Низкополигональный стиль полностью обходит это: меньше граней и они крупнее — значит, проблема алиасинга уменьшается одновременно с ростом бюджета кадра. Вы перестаёте бороться с мерцанием и начинаете продавать скорость.

Второй аргумент — арифметический. Сегмент трассы, смоделированный в 2 000 треугольников вместо 40 000, не просто рендерится быстрее. Он позволяет разместить больше сегментов, больше декораций и больше соперников, прежде чем вы упрётесь в потолок кадра. В гоночной игре время кадра — не функция комфорта. Это задержка ввода. Каждая миллисекунда времени GPU — это миллисекунда между тем, как игрок увидел поворот, и тем, как машина отреагировала на коррекцию.

Именно поэтому низкополигональные гоночные игры хорошо работают на скромном железе и во вкладке браузера. Стоимость рендеринга определяется в основном вызовами отрисовки и скоростью заполнения, а не голой пропускной способностью по треугольникам, поэтому низкополигональная сцена с агрессивной отсечкой по пирамиде видимости укладывается в бюджет 16,6 мс при 60 кадрах в секунду на встроенной графике. Этот стиль — не запасной вариант для слабого железа. Это решение, которое убирает железо с дороги.

Плоское затенение и считывание движения

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

Куда на самом деле уходит бюджет треугольников

В низкополигональной гонке машина редко бывает дорогим объектом. Дорога — вот что дорого. Трасса длиной 5 км, разбитая на 100-метровые сегменты с отсечкой, имеет ограниченный видимый набор, а единая сетка на 5 км — нет. Планируйте бюджет трассы по сегментам и позвольте отсечке делать работу. Машина может позволить себе от 6 000 до 12 000 треугольников; один сегмент — нет.

Что делает низкополигональную гонку по-настоящему хорошей

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

Второе ограничение — горизонт, который продаёт скорость. Плоский пустой горизонт ничего не сообщает о том, как быстро вы едете. Нужны объекты на известных интервалах — отбойники, знаки, столбы, грани хребта, — чтобы у игрока был ориентир скорости. Разбросайте их примерно на равном расстоянии вдоль прямой, а затем позвольте интервалу сжиматься на повороте. Глаз считывает сжатие как замедление, а расширение — как ускорение, даже когда значение скорости не изменилось.

Третье ограничение — камера, которая никогда не теряет дорогу. Камере сопровождения нужна дистанция упреждения, масштабируемая со скоростью, высота, при которой дорожная лента остаётся видимой под машиной, и рыскание, которое следует за курсом машины, а не мгновенно привязывается к нему. Если рыскание камеры привязывается скачком, мир хлещет, и игрок теряет пространственную ориентацию. Демпфированное рыскание с короткой постоянной времени — достаточной, чтобы ощущаться отзывчивым, но не мгновенным, — удерживает дорогу в кадре.

• Разделение яркости дороги и обочиныДорожная лента и окружающий рельеф должны различаться по яркости настолько, чтобы кромка считывалась с первого взгляда. Если сомневаетесь, затемните рельеф, а не осветляйте дорогу.
• Ориентиры скорости по интерваламОбъекты, расставленные через равные интервалы, дают игроку ориентир скорости. Их видимое сжатие на повороте и есть считывание скорости.
• Упреждение камеры, масштабируемое со скоростьюДистанция упреждения должна расти со скоростью; если нет, на высокой скорости игрок обгоняет кадр.
• Демпфированное рыскание камерыЗапаздывающее рыскание удерживает дорогу на месте. Рыскание скачком — самый быстрый способ сделать хорошую трассу нечитаемой.

Пройдите по одному прямо здесь

Игровой мир, встроенный в эту страницу, — самое близкое к трассе, что можно сегодня поместить в браузер. Он низкополигональный, с плоским затенением и создан для того, чтобы по нему двигались, а не смотрели на него. Используйте элементы управления движением, чтобы пройти по пространству; геометрия намеренно грубая, чтобы частота кадров оставалась достаточно высокой для считывания движения, а не просто просмотра сцены.

На что смотреть во время движения: грани на плоскости земли ловят свет под разными углами, когда вы проходите мимо, и эти изменения угла — и есть сигнал движения. Горизонт не пустой, а заполненный, так что вам есть за чем следить. Попробуйте длинную прямую, затем поворот, и заметьте, как меняется ощущение скорости, хотя скорость движения не меняется. Это горизонт делает свою работу.

Этот мир — демонстрационное пространство, а не готовая трасса. В нём нет таймера круга и нет соперника. Его цель — показать, как низкополигональное считывание ведёт себя в живой сессии браузера на вашем реальном железе, а это единственный тест, который имеет значение для браузерной игры.

Постройте собственную трассу

Построить трассу в 3D-конструкторе игр означает расставлять геометрию по сетке, а не лепить сетку. Вы работаете в мировых единицах, и сетка даёт согласованный масштаб: одна ячейка сетки равна известному расстоянию, поэтому прямая в 20 ячеек имеет фиксированную длину, независимо от того, кто её строит. Начните с дорожной ленты, затем расставьте объекты, затем задайте точку появления и замкните круг.

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

Низкополигональные машины и ассеты

Машины и объекты могут прийти с любой стороны: импортируйте существующий низкополигональный набор или сгенерируйте свой, подходящий стилю трассы. Ограничение, которое имеет значение, — согласованность плотности граней. Машина, смоделированная в 12 000 треугольников и поставленная на трассу из 200-треугольных сегментов, будет выглядеть неправильно, потому что два объекта разрешают детализацию в разных масштабах. Согласуйте плотности или согласуйте затенение, а лучше и то и другое.

Agent Sprite Forge генерирует наборы спрайтов и ассетов — это полезно, когда нужен связный набор машин и объектов с одним визуальным языком, а не куча отдельно скачанных моделей. Если генерируете набор, создавайте машины и придорожные объекты за один проход, чтобы палитра и плотность граней оставались согласованными. Рассогласованные проходы генерации — самая частая причина трассы, которая выглядит собранной, а не спроектированной.

Cyclops' Island — проработанный пример низкополигонального мира в ассетах студии: он показывает, как связная низкополигональная среда держится вместе, когда каждый объект разделяет решение о затенении. Используйте его как ориентир по палитре и плотности граней, прежде чем строить собственный набор.

• Согласование плотности гранейДержите число треугольников машины в пределах одного порядка на видимую площадь поверхности, как у сегментов трассы. Резко расходящиеся плотности читаются как стилистическая поломка.
• Единая палитра на наборГенерируйте машины и объекты из одной палитры. Добавление второй палитры позже — обычный источник трасс, которые выглядят несогласованно.
• Плоское затенение повсюдуПрименяйте плоское затенение к каждому объекту в наборе. Один объект с гладким затенением в сцене с плоским сразу заметен и подрывает считывание движения.
• Переиспользуйте, прежде чем моделироватьОдна модель отбойника, повёрнутая и перекрашенная, покрывает большую часть трассы. Меньше уникальных сеток — меньше вызовов отрисовки и лучше время кадра.

Войдите в мир, которому он принадлежит

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

FAQ