Dev Math
660 subscribers
138 photos
3 videos
5 files
76 links
Как на самом деле создаются игры. Как сделать игру интересной и реализовать технически. А главное причём тут математика?

Разборы на пальцах, рабочий код, интерактивы. dev-math.ru

Сотрудничество: @it_bizdev
Download Telegram
Горы, облака и мрамор в играх никто не рисовал — это одна функция

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

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

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

На неделе разберём, как функция от (x, y) превращается в горный хребет и почему один и тот же seed в Minecraft всегда даёт один и тот
же мир. 🔥

#мат_геймдев #МатРазбор #procgen #шейдеры
🔥15❤3👍2
Шум Перлина — это не случайные числа. Это случайные стрелки

Наивная идея «шума»: накидать
в узлы сетки случайные значения
и интерполировать между ними.
Это 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
🔥13👍1
Одна октава шума — скучный холм. Горы начинаются со сложения

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


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 #шейдеры
🔥9
Перлин пофиксил свой шум в 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ы
🔥4❤3👎1
Гладкая случайность: как функция от координат лепит горы, облака и огонь
https://dev-math.ru/articles/noise/

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

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

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

#мат_геймдев #МатРазбор #procgen #шейдеры
🔥13
Драматургия уровней с помощью математики
https://dev-math.ru/articles/wfc/

Ура! Это была сложная статья. Чтобы она была короткой, понятной и чтобы демки были интересные. Конечно больше всего я заморочился над последней. Статью я на эту тему уже писал на самом деле, тут я просто решил сильно улучшить её наглядность и сделать короче. С конкретикой как это работает и зачем это надо.

• Несколько вариантов генерации карт
• Что за зверь WFC и в чём его недостатки
• Как задавать темп процедурно генерируемым картам и причём тут энтропия Шеннона
• WFC + карты гарантия темпа, но не гарантия проходимости. Шаги постобработки в генераторах

С мини игрой в конце (на телефоне не тестил, только на компе), которая показывает как это всё может работать на бою и где можно порисовать свои карты.

В общем как всегда ставим 🔥 и делимся с друзьями. Чтобы я понимал не зря ли я старался и интересен ли такой формат. + бонус к посту короткая инфографика с шагами работы алгоритма.

P.S. Забавно кстати как ещё работают связки механик. Я оставил число ходов ограниченным, что делает игру игрой на поиск оптимального решения, как пройти карту с самым большим счётом, но пройти. Если включить туман войны это хардкор режим, который ощущается нечестным (по умолчанию он выключен). А если убрать число ходов, то играть не так интересно, так как нет челенджа и мотивации.

#devmath #gamedesign #procgen #wfc
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14