Мобильный рендер: Дело не в мощности GPU
https://youtube.com/shorts/6WtXTERxLaI?si=65mL_ZQZno6b0fdO

Так как сейчас у нас недели разбора графики, то я решил попробовать и видосы поделать, как более простой формат подачи информации нежели статьи.

Про шину помнить очень важно. Как она загружается и тому подобное. В статье про дроуколлы это разбиралось. Просто где-то с 2017 года я в основном разбирался в том, как запустить красивую картинку на «калькуляторе». Если взять даже этот проект, где нужно было под вебгл с поддержкой мобилки сделать рабочую красивую 3д сцену. Когда нужно завести миллионы полигонов в вебе или что еще страшнее в WebAR, то нужно знать что вертексные параметры можно подрезать.

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

#devmath #gamedev #unity3d #оптимизацияигр #мобильныйгеймдев

Фильтрация текстур

Подошли в игре вплотную к стене — и вместо кирпича размытое пятно. Можно подумать: «фильтрация мылит, поставлю point». Ставите — мыло уходит, приходят квадратики. Ощущение, что выбираешь между двумя видами испорченной картинки. Так и есть, и вот почему.

Текстура для шейдера — не картинка, а функция: подали координату, получили цвет. Только в памяти лежит конечный массив, и значение каждого текселя — это точка в центре его клетки. Ровно как пиксель на экране, про который мы говорили на прошлой неделе.

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

Отсюда вывод, который экономит время: если текстура мылит вблизи, крутить фильтр бесполезно. Мылит — значит текселей на этот кусок экрана просто мало. Лечится плотностью текселей: крупнее текстура, мельче тайл на поверхности, отдельная detail-карта поверх — или, если так и задумано, point-фильтр и пиксель-арт как художественное решение (Minecraft именно поэтому и не мылит).

И бонус. Если картинка не столько мылит, сколько «чуть мылит и чуть съехала» — обычно это забытые полтекселя. Значение текселя лежит в центре клетки, поэтому при переводе координаты в текселе-пространство вычитают 0.5. Забыли — и вся текстура уехала на полклетки; на кирпичной стене незаметно, на UI и атласах иконок видно сразу.

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

#devmath #графика #математика #рендер #текстуры #gamedev

10 000$ за баг в GTA
https://youtube.com/shorts/3iJa_wPmGKM?si=pdZ1e-VWVgGtrMhh

Семь лет GTA Online грузилась по пять минут — на любом железе. Чинить взялся не Rockstar, а игрок под ником t0st взялся, и хватило ему выходных. И получил за это 10 000$.

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

#devmath #разработкаигр #gta #программирование #gamedev

Пол вдали превратился в кашу?

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

Дальше начинается знакомый заход. Раз мыло — значит мало разрешения. Дорогу поднимают с 1024 до 2048, потом до 4096, память растёт вчетверо на каждый шаг, стриминг начинает захлёбываться на въезде в локацию — а дорога вдали всё такая же мутная. Ловили такое?

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

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

По сути отсюда и ответ, почему апскейл ассета не помогает: текстура крупнее — обе оси следа растут одинаково, вытянутость остаётся той же. Вы отыгрываете один уровень подробности ценой вчетверо большей памяти, а перекос как был, так и остался. Настройка, которая чинит именно перекос, называется анизотропная фильтрация — та самая строчка «Anisotropic Filtering: 16x» в настройках графики. Она щупает вытянутый след не одной точкой, а несколькими вдоль длинной оси.

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

Ну а самое интересное — дальше. Откуда вообще берётся то самое одно число на весь след и почему в нём стоит именно максимум; сколько на деле стоит ×16 и почему не в шестнадцать раз дороже; и почему выкрученная анизотропия при выключенных мипмапах не работает вовсе — а такую комбинацию встречаешь регулярно. Разберём в пятницу. Там же пол, который можно наклонить ползунком и кликнуть по нему: видно и сам след пикселя в пространстве текстуры, и как в нём выстраиваются точки выборки, когда вы переключаете ×1 → ×16.

#геймдев #графика #математика #рендер #текстуры #gamedev

Гладкость сферы вы видите по свету, а не по форме

Мысленный эксперимент: возьмите шарик и покрасьте краской, которая поглощает падающий свет целиком. Что вы увидите? Не чёрный шар — плоское чёрное пятно. Отражать нечего, перетекания из света в тень нет, и шарообразность из картинки просто исчезает.

Эксперимент, кстати, не такой уж мысленный. У покрытий вроде Vantablack, забирающих больше 99,9% видимого света, ровно этот эффект и наблюдают: смятая фольга после покраски теряет все складки и читается как дыра в пространстве.

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

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

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

Поэтому гладкость выгоднее рисовать, чем моделировать: полигонами её тоже можно догнать, только платить придётся геометрией.

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

И загадка туда же. Гладкость нормалями подделывается легко: усреднили соседей — и плавно. А как сделать обратное — острое ребро, чтобы две грани куба или две стены комнаты держали каждая свой тон, без перетекания через угол? Как выкручиваются?

#геймдев #графика #математика #рендер #свет #gamedev

Что такое блик?

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

Дело в том, что упавший свет делится один раз — на входе. Часть отражается сразу от границы двух сред, внутрь не заходя: про материал она ничего не знает, поэтому и уносит цвет источника. Остальное преломляется внутрь, гуляет там между частицами пигмента, что-то по дороге поглощается, а что уцелело — выходит обратно наружу, уже окрашенное. Вот это вернувшееся вы и называете цветом предмета.

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

В шейдере крутите specular вверх: если материал просто становится ярче и ничего при этом не теряет — баланс энергии у вас не сходится, поверхность отдаёт больше света, чем получила. С одним источником света это сходит с рук. А потом сцену переносят под HDRI, где свет идёт со всех сторон, и материал начинает светиться сам.

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

А делится свет не всегда одинаково — пропорция зависит от угла. Посмотрите на стол сверху вниз: видите цвет дерева. Теперь присядьте и гляньте почти вдоль столешницы — на том же самом месте отражение окна, а дерева уже почти не разглядеть. Не поменялось ничего, кроме угла, под которым вы смотрите. По той же причине светлее края круглых предметов.

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

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

#devmath #графика #математика #рендер #pbr #gamedev

Вдали ваш кирпич — зеркало

По дальней стене, гравию, клёпке побежали белые искры. MSAA по ним не работает вообще, TAA давит их ценой шлейфа. А вблизи тот же материал выглядит прилично.

Дело в мипах карты нормалей. Карта нормалей хранит наклон поверхности в каждой точке: тут скол кирпича смотрит влево, тут вправо, тут вверх. Мип-уровень — это усреднение соседних текселей, а если усреднить «влево» и «вправо», получится «прямо». Чем дальше объект, тем более пологим становится его рельеф в мипах, и на дальних уровнях от кирпичной кладки остаётся ровная плита.

Roughness при этом остался тот, что вы поставили. Ровная поверхность с низким Roughness — это зеркало: она отражает окружение чётко, без размытия. И на дальнем объекте одному пикселю достаётся то солнце или яркое пятно пробы, то тёмный кусок неба рядом. Кадр — вспышка, кадр — чернота. Вот вам и искры.

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

В Unreal у текстуры Roughness есть свойство Composite Texture: кладёте туда карту нормалей, и движок при генерации мипов сам смотрит, сколько наклонов потерялось на уровне, и ровно настолько поднимает Roughness. В Unity такой галочки в импортёре нет. Ближайшее — Geometric Specular AA в HDRP, но он про другой источник: срезает гладкость по кривизне самой геометрии, и в доке прямо сказано, что полезнее всего он там, где карты нормалей нет.

А почему разброс наклонов вообще сворачивается в одно число и как это число выглядит изнутри — в пятницу.

#геймдев #графика #математика #рендер #pbr #gamedev

Pac-Man невозможно пройти
https://youtube.com/shorts/mbZlm4AeHxw?si=2a6Af3dDvEJmUe1U

На 256-м уровне Pac-Man ломается пополам: слева обычный лабиринт, справа каша из мусорных тайлов. Уровень пройти нельзя — и дело не в сложности.

Номер уровня игра держит в одном байте, а байт считает только от 0 до 255. На 256-м счётчик переполняется и щёлкает обратно на ноль. Подпрограмма, которая рисует фрукты внизу экрана, берёт этот номер как счётчик цикла — получает ноль и уходит на полный круг: 256 фруктов подряд. Места под них нет, и она затирает правую половину экрана.

Отсюда и «идеальная игра» Pac-Man — 3 333 360 очков.

#геймдев #математика #программирование #ретрогейминг #аркады #pacman #байт #переполнение #gamedev #retrogaming #arcade #devmath

Сфера должна исчезнуть

Как за пять минут проверить, что материал не отдаёт больше света, чем получил. Уберите из сцены свет и HDRI, поставьте вместо окружения ровную белую заливку яркостью единица, выключите тонмаппинг. Материал возьмите предельный: металл с базовым цветом в единицу — такой ничего не поглощает и обязан вернуть всё, что пришло.

Вернёт — станет неотличим от фона. Не посветлеет, а исчезнет: силуэта нет, на экране ровное поле. Видите тёмный силуэт — энергию теряете, светлый — берёте из ниоткуда. Приём известен как white furnace test.

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

Модель считает один отскок: луч пришёл на микрогрань, отразился, улетел. В изрытой поверхности он так не летает — бьётся о соседний бугор и уходит со второго-третьего раза, а этих отскоков в модели просто нет.

На металле заметнее всего: у него всё отражение зеркальное, и нет диффузной части, которая прикрыла бы потерю. Отсюда матовая сталь, которая выглядит серой и припылённой. Ровно на это заведён баг в референсном вьювере glTF — «Rough metal looks too dark, may be losing energy».

Собственно, вывод: увидели припылённый металл — не тяните альбедо вверх, так вы проблему не решите. Прогоните тест и посмотрите, считает ли ваш шейдер многократное рассеяние. Считает — сфера не видна на любом Roughness.

Почему теряется и как это править — в пятницу.

#геймдев #графика #математика #рендер #pbr #gamedev

Тень — это фотография мира из лампы

Присядьте так, чтобы ваш глаз оказался там, где лампочка, и посмотрите оттуда на комнату.
Что видно с этой точки — туда свет лампы дошёл напрямую, чего не видно — не дошёл. Дальше уже дело отскоков (и это больше к теме GI): скажем белая стена подсветит и то, что от лампы закрыто. Но форму самой тени задаёт именно этот вид: она повторяет силуэт, каким предмет виден лампе, а не вам.

Собственно, ровно это делает игра. Рисует кадр со стороны света и сохраняет не цвет, а глубину: как далеко ближайшая поверхность в каждом направлении. Потом, рисуя картинку уже вам, для каждой точки смотрит в этот снимок. Приём предложил Лэнс Уильямс в 1978-м, и в реальном времени тени до сих пор чаще всего считают именно так.

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

Почему конечный размер даёт именно такие артефакты — разберём в пятницу.

#геймдев #графика #математика #рендер #тени #gamedev

Проблемы с тенями на больших локациях

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

Дальше всё идёт по накатанной. Качество теней ставят на максимум, разрешение карты поднимают с 1024 до 2048, потом до 4096, память под неё растёт вчетверо на каждом шаге и это не помогает. Было такое?

Собственно, вся история упирается в одну штуку. Карта теней — это текстура на N×N, и она обязана накрыть всё, что свет освещает. Сторона накрытой области, поделённая на разрешение, даёт размер одного текселя, а внутри текселя ответ «в тени или нет» один на всех.

Считаем. Комната двадцать метров, карта 1024 — два сантиметра на тексель, тень от стула держит форму. Та же карта на локации в пятьсот метров — сорок девять сантиметров. Полметра.

Я не к тому, что разрешение поднимать нельзя. До какого-то момента это работает. Просто это самый дорогой вариант из имеющихся.

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

Ну и самое интересное — дальше. Область просто так не ужать: свет обязан освещать весь уровень, тени нужны и вдали. Но нужны-то они с разной подробностью: под ногами сантиметры, на горизонте хватит метров, а карта одна и тексель у неё везде одинаковый. Отсюда та самая строчка «Shadow Cascades» в настройках: карту подгоняют не под уровень, а под то, что видит камера, и режут по дистанции. Четыре карты по 1024 вместо одной на 2048 — та же память, а у ног тексель выходит примерно вшестеро мельче.

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

#геймдев #графика #математика #рендер #тени #gamedev

Doom работал благодаря статье, которая старше игры на тринадцать лет
https://youtube.com/shorts/qjejcOEpT4w?si=aP_hj_EddkdqMzoj

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

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

Идея не Кармака. Он взял её из научной статьи 1980 года, которую писали вообще не про игры.

#devmath #gamedev #doom #математика #алгоритмы

Поменяйте местами два полупрозрачных слоя — итоговый цвет изменится

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

Дело в том, что смешивание — не усреднение, а делёж пикселя по очереди. Прозрачность слоя — на самом деле его доля: какая часть пикселя им накрыта. Верхний слой забирает свою долю целиком, нижнему достаётся его доля от остатка: оба просили половину, но верхнему ушла половина пикселя, а нижнему — половина оставшегося, четверть. Несимметрично по построению, какие доли ни выставляй. Эту арифметику формализовали Томас Портер и Том Дафф в 1984-м: оператор over, и он прячется за словом «прозрачность» почти везде — слои редактора, плашки интерфейсов, стекло и дым в играх.

Собственно, вывод: у прозрачности есть и важен порядок наложения. В редакторе порядок задаёт панель слоёв. В игре панели нет: «сверху» оказывается тот, кто нарисован позже, — и порядок отрисовки начинает менять картинку. Что движок делает, чтобы очередь совпала с глубиной сцены, и что видно в кадре, когда они разошлись, — разберём в пятницу.

Присмотритесь к спрайту дыма или кусту на светлом небе: по краю часто идёт тонкая тёмная кайма — цвет, которого нет ни в текстуре, ни в сцене, и чем дальше объект от камеры, тем она заметнее. Откуда при смешивании двух цветов берётся третий?

#devmath #графика #математика #рендер #прозрачность #gamedev

Куда исчезают листья

Отъедьте камерой от дерева в игре, где листва нарисована через alpha test: вблизи крона плотная, к горизонту от неё остаются ветки и десяток листьев. Похоже на LOD? LOD тут может быть ни при чём.

Alpha test — это порог: альфа ниже 0.5 — фрагмента не существует, выше — он непрозрачный. Возьмите на кромке листа четвёрку текселей: один плотный с альфой 0.95 и три почти пустых по 0.05. Порог проходит один из четырёх, покрытие 25%. Мип — это усреднение: следующий уровень свернёт четвёрку в тексель с альфой 0.275, и тест он уже не проходит. Покрытие — ноль. Лист исчез не потому, что стал мелким: усреднение утащило его альфу под порог.

Лечится на импорте: каждому мипу подбирают свой множитель альфы, возвращающий исходное покрытие. В Unity это галочка Preserve Coverage, по умолчанию выключенная, и поле Alpha Cutoff рядом — оно обязано совпадать с порогом в вашем материале.

#геймдев #графика #математика #рендер #прозрачность #gamedev

Постобработка не знает, что у вас в сцене

Осталось две темы цикла про рендеру в 12 недель. Тема этой недели — постобработка. И следующей GI. Можно ещё конечно трассировку пути добавить, как финал. Но пока думаю, так как после можно будет перейти уже к циклу по математике в геймдизайне. Итак, начнем с базы пост обработки.

Выкиньте с уровня всё: пустая комната, одна стена в кадре. Боке, размытие в движении и тонмаппинг будут стоить столько же, сколько стоили в лесу.

Дело в том, что после последнего нарисованного объекта кадр становится обычной текстурой: движок рисует прямоугольник во весь экран, и шейдер отрабатывает попиксельно. Что под ним было — стена, куст, небо — шейдер не знает.

Хорхе Хименес показывал на SIGGRAPH 2014 замеры Advanced Warfare на Xbox One: боке — 1.27 мс. При 60 fps на кадр отпущено 16.7 мс — под восемь процентов бюджета за один эффект, хоть в стену упритесь, хоть на панораму смотрите.

#геймдев #графика #математика #рендер #постобработка #gamedev

Новый формат роликов
https://youtube.com/shorts/sBWPJmyMqKg?si=GqUfUyLol_ahrRsK

Возможно первый блин комом, но я люблю экспериментировать. Хочется сделать серию таких интервью. Поинтереснее и повеселее. Часть про детство мне показалось не такой заезжанной, как общая тема. В общем мне нравится делать что-то новое, а там будем посмотреть как пойдет.

Конечно подозреваю, что и этот формат лучше делать без липсинка или поискать другой инструмент. Не Veo Lite. Так как не уверен, что анимация прикольная чтобы так смотреть :)

#fun #interview #devmath