Горы, облака и мрамор в играх никто не рисовал — это одна функция

Откройте Minecraft и полетайте над миром. Горы, пещеры, береговые линии — этого рельефа нет ни в одном файле. Его никто не рисовал и не сканировал. Это значения функции: подаёте ей координаты точки — получаете высоту.

Казалось бы, чтобы получить такую «природную» случайность, достаточно взять random на каждую точку. Ну попробуйте — получите белый шум, ту самую телевизионную «снежинку». Для ландшафта это мусор: каждая точка живёт сама по себе, ни холмов, ни долин, один хаос. Фокус,
собственно, не в случайности, а в ГЛАДКОЙ случайности — у соседних точек значения близкие. Вот из этого и получается логичный рельеф.

Имя у фокуса есть: шум Перлина. Кен Перлин придумал его ещё в 1982-м. Он бесился от «пластмассового» вида графики, над которой работал для «Трона», и захотел управляемую случайность (позже за неё дали
технический «Оскар»). Сегодня на ней стоит половина видимой природы в
играх: рельеф и пещеры Minecraft (тот же seed — тот же мир у всех), облака в Horizon Zero Dawn, мрамор и огонь в текстурах.

На неделе разберём, как функция от (x, 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

Одна октава шума — скучный холм. Горы начинаются со сложения

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

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 #шейдеры

Тизер-трейлер "Приключения Дейва"

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

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

Перлин пофиксил свой шум в 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ы

Гладкая случайность: как функция от координат лепит горы, облака и огонь
https://dev-math.ru/articles/noise/

Прямо в браузере крутятся настоящие GLSL-шейдеры — объёмное облако, которое можно облететь камерой, и живой огонь. А ещё градиенты, октавы, domain warping и шесть интерактивов. Жду огоньков 🔥

Вообще шум довольно забавная тема. Он так тесно связан с компьютерной графикой, VFX и таким огромным спектром задач. Забавно что все "естественное" это по своей сути фрактальные структуры шума. Поэтому многие работали над разными применениями и вариациями этого. Хотя конечно в случае облаков и огня — это скорее "фокус", чем что-то реальное.

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

#мат_геймдев #МатРазбор #procgen #шейдеры

Матчасть — проверьте, что осело после статей

Вы читали (ну или пролистывали) разборы про повороты и кватернионы, стрельбу, SDF, толпу, матчмейкинг, лутбоксы и шум. Собственно, давайте проверим, что из этого реально осело в голове, а что прошло мимо.

Сделал квиз — «Матчасть». 8 вопросов, по одному на каждую тему. Вопросы на понимание: зачем вообще нужны кватернионы, что такое hitscan, откуда у стаи скворцов синхрон, чем Glicko отличается от ELO. Где-то ошиблись — подсказка после ответа ведёт прямо в нужный раздел статьи. Так что это и проверка, и способ дочитать то, что пропустили.

Ведёт квиз Дельта, а Магистр Хардкод по ходу подсовывает «костыли» — варианты с магическими числами вместо настоящего ответа, не ведитесь. В конце выдаётся звание: от Магистра Хардкода до самого Дейва. Результатом, конечно же, можно похвастаться.

👉 https://dev-math.ru/dave-quiz/

Делитесь в комментариях, какое звание выбили.

Новая неделя, новый формат

Чтож, попробуем что-то новое. Мне всегда хочется делать "лучше чем раньше". Раньше темы были довольно часто встречающиеся по которым материалы и так найти относительно легко. Сейчас я хочу взять тему, которая разобрана не так хорошо. Раньше посты выходили сами по себе — а теперь запускаем первый сезон: связную историю на две недели, с началом, серединой и развязкой.

Тема первой недели — цвет. И сразу вопрос на засыпку: вы уверены, что цвет в реальности — это RGB? Три числа на пиксель?

Собственно, нет. RGB — это не базовая реальность, а трюк, упрощение. Возьмите два цвета, идеально совпавших под лампой в комнате, и вынесите на улицу — они разъедутся. Один и тот же «цвет» под разным освещением становится разным. Это метамерия, и это только первая трещина.

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

А неделя устроена так:
🟦 Пн — комикс-затравка (наш Дейв тоже уверен, что цвет — это RGB; зря);
🟩 Вт–Пт — четыре коротких разбора, по одному на под-тему;
🟧 Сб — большая статья с интерактивом: хак и эталон рядом, крутите сами и смотрите, где именно фейк начинает врать;
🟥 Вс — комикс-выпуск с развязкой недели и карточкой «что запомнить».

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

Старт — в понедельник, с первого комикса. Следите, будет интересно. А я постараюсь держать такой темп.

RGB — это не свойство света. Это свойство вашего глаза

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

Откройте color пикер: три ползунка R, G, B — и любой оттенок. Кажется, что цвет так и устроен — три числа. Да? Конечно же нет.

Три числа — это про ваш глаз, а не про мир. В сетчатке три типа колбочек (L, M, S), и каждая сворачивает весь спектр света в одно число — берёт интеграл спектра по своей кривой чувствительности. На входе непрерывный спектр, на выходе три отклика. Глаз сжимает свет до трёх чисел. RGB — просто базис поверх этого сжатия: умное упрощение, а не «реальность».

В примере с камнями. Два РАЗНЫХ спектра под одной лампой дают одинаковые три отклика и выглядят одинаково. Сменили лампу — отклики разошлись, и цвет за ними. Это метамерия: совпал цвет ≠ совпал спектр.

Важно понимать что означают эти три числа: цвет это не точка, а целый спектр, свёрнутый глазом в три отклика. У одной «тройки» бесконечно много спектров-прообразов.

При чём тут ваши игры? Бытовая версия «цвет — не три числа» — это color management: линейка vs sRGB, гамут, тонмаппинг, HDR. Ассет, выверенный под один свет, «уезжает» под другим — близкая родня метамерии. RGB при этом остаётся нормальным базисом для большинства игр; смысл не «отказаться», а знать, как всё устроено на самом деле.

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

#геймдев #графика #математика #цвет #RGB #метамерия

Обратная задача: вернуть спектр из трёх чисел

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

Художник красит текстуру в RGB. Никакого спектра на входе нет и не было — так устроена вся индустрия, и это удобно: текстура весит как три канала, а не как десятки чисел на пиксель, инструменты привычные. Умно? Да. Ровно до момента, когда движку нужно посчитать что-то спектральное — дисперсию, цвет под цветным светом, тонкую плёнку. Там на пиксель нужен спектр, а у вас три числа.

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

Поэтому задачу не решают, а обходят. Spectral upsampling: по RGB достраивают один правдоподобный спектр — гладкий и физичный (значения в [0,1], без резких пиков), просто чтобы было что отдать в расчёт. Методов хватает: Smits — наивная отправная точка, Meng и Jakob & Hanika — рабочие (последний стоит по умолчанию в PBRT и Mitsuba), а Belcour вообще выдаёт целое семейство спектров под один цвет.

Нужно это далеко не везде. В реалтайме трёх чисел хватает, гнать каждый пиксель в спектр незачем. А вот когда RGB-текстура попадает в физичный расчёт — офлайн-рендер, product-viz, конфигуратор авто, где перламутр должен честно играть под разным светом, — недоопределённость и вылезает. Правильного ответа среди метамеров нет, так что каждый рендерер выбирает свой.

#геймдев #графика #математика #цвет #спектр

Радуга без единой краски

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

В играх вы это видите чаще, чем думаете: перламутр автокраски, надкрылья жуков, та самая побежалость, бензин в луже, любая «не от мира сего» sci-fi-поверхность. И в Unity HDRP это уже готовая галочка — Iridescence.

Сколько длин волн надо посчитать на пиксель? В лоб — десятки: отражение плёнки бешено осциллирует по спектру. А у вас три числа.

И вот трюк, который почти честный (Belcour & Barla, 2017): дрожащий спектр не семплируют — его аналитически сворачивают сразу в RGB, в замкнутом виде. Мало того, авторы доказали: для диэлектрической плёнки (пузырь, масло) результат совпадает с честным спектральным расчётом. Не «похоже» — совпадает. Редкий случай, когда упрощение почти не врёт.

Почти. Спотыкается он на металлах. У меди показатель преломления резко пляшет по спектру, и предынтеграл начинает мазать: оттенок и насыщенность уезжают.

В пятницу — почему плёнка вообще осциллирует, как её сворачивают в три числа и где щёлкает медь. С интерактивным side-by-side.

#геймдев #графика #математика #цвет #иридесценция #шейдеры

«Огонь» бриллианта — это не блеск камня

Вы наверняка видели, как бриллиант в кадре вдруг рассыпает спектр по граням. И почти наверняка — хроматическую аберрацию по краям картинки: красный уехал в одну сторону, синий в другую. Выглядит дорого. На деле — почти бесплатно.

Трюк индустрии простой. Берём текстуру и сэмплируем три раза со смещением: R чуть туда, B чуть сюда, G посередине, радиально от центра кадра — вот вам «линза камеры». Либо три луча под тремя фиксированными углами, по одному на канал. Дёшево, один проход, и в массе сцен глаз считывает это как оптику объектива и не сверяет с физикой. Так что приём работает — почти всегда.

Почти. Ломается на крупном плане огранённого прозрачного объекта: бриллиант, призма, стопка стекла, магический кристалл — всё, где луч гуляет внутри. Камень переотражается несколько раз (полное внутреннее отражение), и спектр должен размазываться на КАЖДОМ преломлении. А фейк разделил каналы один раз — и тащит это разделение неизменным. Накопления нет, спектр выходит плоским и не зависит от геометрии огранки. Тут глаз ловит подделку мгновенно.

Где это вылезает в играх? Хром. аберрация постом по краям кадра, лёгкий спектр на гранях дальнего самоцвета — никто не идёт сверять это с физикой, и трюка хватает. Сыпется он там, где сошлись крупный план И множественные преломления: hero-камень в инвентаре, бриллиант в кат-сцене, тот самый сюжетный макгаффин-кристалл. Если «огонь» камня не пляшет по огранке, а едет вместе с экраном — это он и выдал себя.

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

В пятницу разберём руками: фейковый сдвиг каналов против честного λ-raymarch на одном бриллианте. С формулами и демкой, где режимы переключаются вживую.

#геймдев #графика #математика #цвет #дисперсия #призма #шейдеры