Математика в Gamedev по-простому

«Огонь» бриллианта — это не блеск камня Вы наверняка видели, как бриллиант в кадре вдруг рассыпает спектр по граням. И почти наверняка — хроматическую аберрацию по краям картинки: красный уехал в одну сторону, синий в другую. Выглядит дорого. На деле — почти бесплатно. Трюк индустрии простой. Берём текстуру и сэмплируем три раза со смещением: R чуть туда, B чуть сюда, G посередине, радиально от центра кадра — вот вам «линза камеры». Либо три луча под тремя фиксированными углами, по одному на канал. Дёшево, один проход, и в массе сцен глаз считывает это как оптику объектива и не сверяет с физикой. Так что приём работает — почти всегда. Почти. Ломается на крупном плане огранённого прозрачного объекта: бриллиант, призма, стопка стекла, магический кристалл — всё, где луч гуляет внутри. Камень переотражается несколько раз (полное внутреннее отражение), и спектр должен размазываться на КАЖДОМ преломлении. А фейк разделил каналы один раз — и тащит это разделение неизменным. Накопления нет, спектр выходит плоским и не зависит от геометрии огранки. Тут глаз ловит подделку мгновенно. Где это вылезает в играх? Хром. аберрация постом по краям кадра, лёгкий спектр на гранях дальнего самоцвета — никто не идёт сверять это с физикой, и трюка хватает. Сыпется он там, где сошлись крупный план И множественные преломления: hero-камень в инвентаре, бриллиант в кат-сцене, тот самый сюжетный макгаффин-кристалл. Если «огонь» камня не пляшет по огранке, а едет вместе с экраном — это он и выдал себя. Глубже — то, что сдвиг каналов выкинул: дисперсия живёт не в пикселе, а на пути луча. Показатель преломления зависит от длины волны — n(λ). Синий преломляется сильнее красного, угол по закону Снелла свой для каждой λ, поэтому спектр и веерится. Но только когда трассируешь сам путь, а не двигаешь каналы в экранном пространстве. В пятницу разберём руками: фейковый сдвиг каналов против честного λ-raymarch на одном бриллианте. С формулами и демкой, где режимы переключаются вживую. #геймдев #графика #математика #цвет #дисперсия #призма #шейдеры

Радуга без единой краски Мыльный пузырь, лужа бензина, синяя побежалость на нагретой стали — переливаются всеми цветами, хотя пигмента в них ноль. Это тонкая плёнка толщиной с длину волны: свет отражается от верхней и нижней границы, волны складываются и гасятся. Чистая интерференция. В играх вы это видите чаще, чем думаете: перламутр автокраски, надкрылья жуков, та самая побежалость, бензин в луже, любая «не от мира сего» sci-fi-поверхность. И в Unity HDRP это уже готовая галочка — Iridescence. Сколько длин волн надо посчитать на пиксель? В лоб — десятки: отражение плёнки бешено осциллирует по спектру. А у вас три числа. И вот трюк, который почти честный (Belcour & Barla, 2017): дрожащий спектр не семплируют — его аналитически сворачивают сразу в RGB, в замкнутом виде. Мало того, авторы доказали: для диэлектрической плёнки (пузырь, масло) результат совпадает с честным спектральным расчётом. Не «похоже» — совпадает. Редкий случай, когда упрощение почти не врёт. Почти. Спотыкается он на металлах. У меди показатель преломления резко пляшет по спектру, и предынтеграл начинает мазать: оттенок и насыщенность уезжают. В пятницу — почему плёнка вообще осциллирует, как её сворачивают в три числа и где щёлкает медь. С интерактивным side-by-side. #геймдев #графика #математика #цвет #иридесценция #шейдеры

Обратная задача: вернуть спектр из трёх чисел Вчера я рассказал как глаз сворачивает спектр в три числа — и вышло, что у одного цвета таких спектров бесконечно много. Сегодня идём в обратную сторону: из трёх чисел собрать спектр. Вот тут и начинается боль. Художник красит текстуру в RGB. Никакого спектра на входе нет и не было — так устроена вся индустрия, и это удобно: текстура весит как три канала, а не как десятки чисел на пиксель, инструменты привычные. Умно? Да. Ровно до момента, когда движку нужно посчитать что-то спектральное — дисперсию, цвет под цветным светом, тонкую плёнку. Там на пиксель нужен спектр, а у вас три числа. Развернуть три числа обратно в спектр — задача недоопределённая. Та же вчерашняя метамерия, только смотрим с другого конца: одному RGB отвечает бесконечно много спектров, и какой из них «настоящий» — узнать неоткуда. Поэтому задачу не решают, а обходят. Spectral upsampling: по RGB достраивают один правдоподобный спектр — гладкий и физичный (значения в [0,1], без резких пиков), просто чтобы было что отдать в расчёт. Методов хватает: Smits — наивная отправная точка, Meng и Jakob & Hanika — рабочие (последний стоит по умолчанию в PBRT и Mitsuba), а Belcour вообще выдаёт целое семейство спектров под один цвет. Нужно это далеко не везде. В реалтайме трёх чисел хватает, гнать каждый пиксель в спектр незачем. А вот когда RGB-текстура попадает в физичный расчёт — офлайн-рендер, product-viz, конфигуратор авто, где перламутр должен честно играть под разным светом, — недоопределённость и вылезает. Правильного ответа среди метамеров нет, так что каждый рендерер выбирает свой. #геймдев #графика #математика #цвет #спектр

RGB — это не свойство света. Это свойство вашего глаза Вчера Дейв поймал это на двух самоцветах: под факелом — близнецы, под другой лампой — разного цвета. Камни не менялись. Менялся только свет. Разберём, что это было. Откройте color пикер: три ползунка R, G, B — и любой оттенок. Кажется, что цвет так и устроен — три числа. Да? Конечно же нет. Три числа — это про ваш глаз, а не про мир. В сетчатке три типа колбочек (L, M, S), и каждая сворачивает весь спектр света в одно число — берёт интеграл спектра по своей кривой чувствительности. На входе непрерывный спектр, на выходе три отклика. Глаз сжимает свет до трёх чисел. RGB — просто базис поверх этого сжатия: умное упрощение, а не «реальность». В примере с камнями. Два РАЗНЫХ спектра под одной лампой дают одинаковые три отклика и выглядят одинаково. Сменили лампу — отклики разошлись, и цвет за ними. Это метамерия: совпал цвет ≠ совпал спектр. Важно понимать что дает эти три числа: цвет это не точка, а целый спектр, свёрнутый глазом в три отклика. У одной «тройки» бесконечно много спектров-прообразов. При чём тут ваши игры? Бытовая версия «цвет — не три числа» — это color management: линейка vs sRGB, гамут, тонмаппинг, HDR. Ассет, выверенный под один свет, «уезжает» под другим — близкая родня метамерии. RGB при этом остаётся нормальным базисом для большинства игр; смысл не «отказаться», а знать, как всё устроено на самом деле. Что мы и разберем. Как устроен цвет, зачем в играх нужен спектральный рендер, как рендерить красивые самоцветы и другие подводные данной темы камни. #геймдев #графика #математика #цвет #RGB #метамерия

Цвет — это три числа? Дейв уверен, что да: RGB — и хватит. Как все мы. Два самоцвета из лута: под факелом близнецы, не отличить. Шаг под другую лампу — и они разного цвета. Камни те же, глаз тот же. Что не так? Первый комикс сезона про цвет — как умное упрощение «три числа» в один момент красиво врёт. Зачем это, если вы делаете игры? Ведь экран монитора так врать не будет. На «трёх числах» стоит весь реалтайм-рендер — дёшево и обычно правильно. Но иридесценция, самоцветы, неон, цвет под цветным светом — места, где трюк RGB врёт, и часть из них уже решена прямо в движке (HDRP, sky-шейдер). Сезон — про то, как понимать эту границу: где упрощение экономит, а где пригодится спектр. Плюс бонусом из этой темы вытекает понимание работы алгоритмов в части задач компьютерного зрения.

Новая неделя, новый формат Чтож, попробуем что-то новое. Мне всегда хочется делать "лучше чем раньше". Раньше темы были довольно часто встречающиеся по которым материалы и так найти относительно легко. Сейчас я хочу взять тему, которая разобрана не так хорошо. Раньше посты выходили сами по себе — а теперь запускаем первый сезон: связную историю на две недели, с началом, серединой и развязкой. Тема первой недели — цвет. И сразу вопрос на засыпку: вы уверены, что цвет в реальности — это RGB? Три числа на пиксель? Собственно, нет. RGB — это не базовая реальность, а трюк, упрощение. Возьмите два цвета, идеально совпавших под лампой в комнате, и вынесите на улицу — они разъедутся. Один и тот же «цвет» под разным освещением становится разным. Это метамерия, и это только первая трещина. Как это будет выходить. Каждый эпизод — три такта: — трюк — как индустрия считает это дёшево и почему это умно; — граница — точная сцена, где допущение ломается; — за границей — физика, которую трюк отбросил. А неделя устроена так: 🟦 Пн — комикс-затравка (наш Дейв тоже уверен, что цвет — это RGB; зря); 🟩 Вт–Пт — четыре коротких разбора, по одному на под-тему; 🟧 Сб — большая статья с интерактивом на Unity: хак и эталон рядом, крутите сами и смотрите, где именно фейк начинает врать; 🟥 Вс — комикс-выпуск с развязкой недели и карточкой «что запомнить». И так две недели. Восемь эпизодов — от «что вообще такое цвет» до спектрального рендера, который считает свет честно. По сути, это история про то, что любой хак — это карта допущений; вопрос лишь в том, знаете ли вы её границы. Старт — в понедельник, с первого комикса. Следите, будет интересно. А я постараюсь держать такой темп.

Матчасть — проверьте, что осело после статей Вы читали (ну или пролистывали) разборы про повороты и кватернионы, стрельбу, SDF, толпу, матчмейкинг, лутбоксы и шум. Собственно, давайте проверим, что из этого реально осело в голове, а что прошло мимо. Сделал квиз — «Матчасть». 8 вопросов, по одному на каждую тему. Вопросы на понимание: зачем вообще нужны кватернионы, что такое hitscan, откуда у стаи скворцов синхрон, чем Glicko отличается от ELO. Где-то ошиблись — подсказка после ответа ведёт прямо в нужный раздел статьи. Так что это и проверка, и способ дочитать то, что пропустили. Ведёт квиз Дельта, а Магистр Хардкод по ходу подсовывает «костыли» — варианты с магическими числами вместо настоящего ответа, не ведитесь. В конце выдаётся звание: от Магистра Хардкода до самого Дейва. Результатом, конечно же, можно похвастаться. 👉 https://dev-math.ru/dave-quiz/ Делитесь в комментариях, какое звание выбили.

Гладкая случайность: как функция от координат лепит горы, облака и огонь https://dev-math.ru/articles/noise/ Прямо в браузере крутятся настоящие GLSL-шейдеры — объёмное облако, которое можно облететь камерой, и живой огонь. А ещё градиенты, октавы, domain warping и шесть интерактивов. Жду огоньков 🔥 Вообще шум довольно забавная тема. Он так тесно связан с компьютерной графикой, VFX и таким огромным спектром задач. Забавно что все "естественное" это по своей сути фрактальные структуры шума. Поэтому многие работали над разными применениями и вариациями этого. Хотя конечно в случае облаков и огне — это скорее "фокус", чем что-то реальное. Пока я делал интерактивы я удивился, что чтобы их не фризило мне пришлось сделать для облаков пребейк 3д текстур и прочие волюметрические техники. Так как на моём макбуке оно прям лагало. Но ща работает гладко, так что приглашаю ознакомиться. #мат_геймдев #МатРазбор #procgen #шейдеры

Перлин пофиксил свой шум в 2001-м. А потом запатентовал фикс Три поста я рассказывал вам про шум Перлина. Чтож, у него два изъяна. Первый: его узор тайком выстраивается по осям. Шум считается по сетке-клеточкам, и бугры на нём тянутся по горизонтали и вертикали, будто прилипли к тетрадному листу. На горах незаметно, а на ровной воде или в анимации глаз уже ловит эту «решётку». Второй: он дорожает с каждым измерением. 2D-шум — плоская картинка (карта высот). 3D — объём: так в Minecraft режут пещеры. 4D — объём, который ещё и движется во времени (дым, бегущие облака); четвёртая ось — время. А чтобы взять значение, шум перебирает все углы клетки — 2ⁿ штук: 4, 8, 16. Каждое измерение удваивает счёт. И знаете, кто это починил? Сам Перлин. В 2001-м он выкатил Simplex-noise, и фикс почти издевательски прост: резать пространство не на квадраты, а на треугольники (в 3D — тетраэдры). Углов у них не 2ⁿ, а n+1: 3, 4, 5 вместо 4, 8, 16. И «решётка» по осям заодно пропадает. А что забавно: этот фикс Перлин запатентовал (US 6 867 776). И индустрия годами использовала обходной шум — OpenSimplex (Курт Спенсер, 2014), лишь бы не судиться. Патент истёк только в январе 2022-го — но OpenSimplex уже прижился. Для рельефа классики хватает с головой. А в 3D, дыме и облаках — цена Перлина кусается. #мат_геймдев #МатРазбор #procgen #алгоритmы

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

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

float sum = 0.0, amp = 0.5, freq = 1.0;
for (int i = 0; i < 6; i++) {
  sum  += amp * noise(p * freq);
  freq *= 2.0;   // частота ×2 (lacunarity)
  amp  *= 0.5;   // вклад ×0.5 (gain)
}
// sum — это fBm, фрактальный шум

Шесть строк — и «капля» становится правдоподобным хребтом. А подать шум на вход самому шуму, fbm(p + fbm(p)) — гребни завихряются, и из той же функции выходят облака, мрамор, лава. Этот приём, domain warping, — фирменная магия Иниго Килеза (если не слышали — сооснователь Shadertoy и автор iquilezles.org, «библии» процедурной графики). Собственно, вся процедурная природа — базовый шум плюс две надстройки: сложить октавы и исказить координаты. Облака в Horizon Zero Dawn, рельеф Minecraft, мрамор в текстурах — всё отсюда. Только не берите мало октав (выйдут «пузыри») и не сэмплите через random на пиксель (мерцающая каша). #мат_геймдев #МатРазбор #procgen #шейдеры

Шум Перлина — это не случайные числа. Это случайные стрелки Наивная идея «шума»: накидать в узлы сетки случайные значения и интерполировать между ними. Это value noise — и он сразу выдаёт себя: сквозь картинку проступает сетка, всё распадается на квадраты. Перлин сделал хитрее. В узле лежит не число, а случайное направление — градиент, стрелка. Значение в точке — это скалярные произведения этих стрелок на векторы «от угла к точке», плавно смешанные специальной кривой:

float n00 = dot(g00, p - c00);   // стрелка · смещение
float n10 = dot(g10, p - c10);   // ...для всех 4 углов клетки
float n01 = dot(g01, p - c01);
float n11 = dot(g11, p - c11);
vec2  f = fade(fract(p));        // гладкая кривая, НЕ линейная
float n = mix(mix(n00,n10,f.x), mix(n01,n11,f.x), f.y);

В узлах значение строго ноль — оттого ни «пятен» на решётке, ни швов. А главное: стрелки не бросаются заново, а считаются хешем от целых координат и сида. Тот же узел при том же сиде — та же стрелка. Всегда. Собственно, поэтому один seed в Minecraft рисует одинаковый мир у всех. #мат_геймдев #МатРазбор #шейдеры #procgen

Шум Перлина — это не случайные числа. Это случайные стрелки Наивная идея «шума»: накидать в узлы сетки случайные значения и интерполировать между ними. Это value noise — и он сразу выдаёт себя: сквозь картинку проступает сетка, всё распадается на квадраты. Перлин сделал хитрее. В узле лежит не число, а случайное направление — градиент, стрелка. Значение в точке — это скалярные произведения этих стрелок на векторы «от угла к точке», плавно смешанные специальной кривой:

float n00 = dot(g00, p - c00);   // стрелка · смещение
float n10 = dot(g10, p - c10);   // ...для всех 4 углов клетки
float n01 = dot(g01, p - c01);
float n11 = dot(g11, p - c11);
vec2  f = fade(fract(p));        // гладкая кривая, НЕ линейная
float n = mix(mix(n00,n10,f.x), mix(n01,n11,f.x), f.y);

В узлах значение строго ноль — оттого ни «пятен» на решётке, ни швов. А главное: стрелки не бросаются заново, а считаются хешем от целых координат и сида. Тот же узел при том же сиде — та же стрелка. Всегда. Собственно, поэтому один seed в Minecraft рисует одинаковый мир у всех. #мат_геймдев #МатРазбор #шейдеры #procgen

Горы, облака и мрамор в играх никто не рисовал — это одна функция Откройте Minecraft и полетайте над миром. Горы, пещеры, береговые линии — этого рельефа нет ни в одном файле. Его никто не рисовал и не сканировал. Это значения функции: подаёте ей координаты точки — получаете высоту. Казалось бы, чтобы получить такую «природную» случайность, достаточно взять random на каждую точку. Ну попробуйте — получите белый шум, ту самую телевизионную «снежинку». Для ландшафта это мусор: каждая точка живёт сама по себе, ни холмов, ни долин, один хаос. Фокус, собственно, не в случайности, а в ГЛАДКОЙ случайности — у соседних точек значения близкие. Вот из этого и получается логичный рельеф. Имя у фокуса есть: шум Перлина. Кен Перлин придумал его ещё в 1982-м — бесился от «пластмассового» вида графики, над которой работал для «Трона», и захотел управляемую случайность (позже за неё дали технический «Оскар»). Сегодня на ней стоит половина видимой природы в играх: рельеф и пещеры Minecraft (тот же seed — тот же мир у всех), облака в Horizon Zero Dawn, мрамор и огонь в текстурах. На неделе разберём, как функция от (x, y) превращается в горный хребет и почему один и тот же seed в Minecraft всегда даёт один и тот же мир. 🔥 #мат_геймдев #МатРазбор #procgen #шейдеры

Математика невезения: как игры подкручивают случайность, чтобы она ощущалась честной https://dev-math.ru/articles/lootboxes/ Всю неделю мы разбирали рандом по кусочкам — сегодня забираем всю кухню разом. Внутри вывод констант, пять интерактивов прямо в браузере и цифры, после которых надпись «шанс 1%» читается иначе. Жду 🔥 и репостов друзьям 😆 Игроки читают «1% дропа» как «1 из 100», а random в игре считают честным броском — оба утверждения неверны, и на этом зазоре держатся и фрустрация, и часть монетизации. В статье случайность разобрана как три слоя. Первый — генератор: LCG в одну строку, детерминизм seed и история pack.png с перебором 2⁴⁸, спектральный тест Кнута и провал RANDU. Второй — искажение распределения под восприятие: PRD в Dota с численным выводом константы C, pity-системы Genshin и Hearthstone, true hit Fire Emblem, aim assist XCOM и shuffle bag Тетриса. Третий — экономика дропрейта: геометрическое распределение, 385 против 267 кейсов до ножа CS, кривая 1−(1−p)^N и регулирование лутбоксов от Китая 2017-го до отменённого штрафа EA в Нидерландах. Разработчик получает карту выбора инструмента — голый PRNG, PRD, pity или shuffle bag — и честный список цен, которыми оплачивается каждое сглаживание дисперсии. #мат_геймдев #МатРазбор #алгоритмы #геймдизайн

Шанс 50/50 выбить нож в CS стоит 660 $ Шанс ножа в кейсе — 0,26%. Эту цифру Valve не публиковала: сообщество годами восстанавливало её по статистике анбоксингов. В 2017-м Министерство культуры Китая обязало раскрывать вероятности лутбоксов, и таблицу выложил Perfect World — издатель, через которого Valve работает в Китае. Чтож, посчитаем. Памяти у кейсов нет, попытки независимы: шанс хотя бы одного ножа за N кейсов — 1−(1−0,0026)^N. Сотня кейсов — должно же хватить? Конечно же нет: 23%. Монетка 50/50 набегает только к 267-му кейсу — те самые 660 $ ключами. Уверенные 99% — 1769 кейсов, около 4 400 $. Ну и моё любимое: остаться без ножа после двух тысяч кейсов вдвое вероятнее, чем выбить его из первого же. Не верите — посчитайте. Пустой кейс — это 99,74%. Возведите в степень 2000: остаётся 0,55%. А нож с первой попытки — те самые 0,26%. Шанс «всё ещё пусто» тает вдвое каждые 266 кейсов и нуля не достигает никогда: из 100 000 человек, открывших по 2000 кейсов, около 550 останутся ни с чем — хотя «в среднем» нож выпадает на 385-м. И вот что я в этой истории люблю: та же Valve в Dota подкручивает криты в вашу пользу, лишь бы серия промахов не испортила вам вечер. В кейсах серия неудач продаёт ключи, поэтому кейс номер 2000 ничем не отличается от первого. Даже Genshin даёт гарантию на 90-й крутке. Тут — ни на какой. Шансы при этом честные, жульничать тут и не нужно. #мат_геймдев #МатРазбор #геймдизайн