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

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

Сотрудничество: @it_bizdev
Download Telegram
Вдали ваш кирпич — зеркало

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

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

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

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

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

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

#геймдев #графика #математика #рендер #pbr #gamedev
👍3🔥3
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
🔥3
Сфера должна исчезнуть

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

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

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

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

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

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

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

#геймдев #графика #математика #рендер #pbr #gamedev
🔥3
На всякий случай завел Макс
https://max.ru/channel_dev_math

Раз уж там можно сделать публичный канал, а не приватный. Там будет всё тоже самое, только работает без VPN. Мало ли кому-то удобнее.

P.S. Негатив в тг мне понятен :) Но занимать имена надо :) И не призываю никого подписываться :) Кому удобнее так — можете) А так мне все равно, это будет просто копия тг, без «подпишитесь, там уникальный контент».

#новости #devmath
👎12👍5👌3💩2🤨1
Куда уходит свет, который поверхность не отразила
https://dev-math.ru/articles/pbr/

Физика отражения в реальном времени: BRDF и уравнение отражения, микрофасеты и распределение GGX, Френель и F0, затенение по Смиту и знаменатель 4(N·L)(N·V), white furnace test как проверка энергии, metallic/roughness workflow.

В общем если вы хотели узнать, что за параметры metallic и roughness. Почему металлик в теории на самом деле бинарный и прочие нюансы PBR рендера — статья для вас.

Репосты и 🔥как всегда приветствуются. Это помогает развиваться каналу, а значит выпускать новые материалы.

А на следующей неделе уже будем разбирать тени и шадоумаппинг.

#devmath #статья #pbr #рендер
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7
Квиз про графику
https://dev-math.ru/dave-quiz/

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

15 вопросов по темам что вышли и что выйдут. От самых простых про то, что такое UV до вопросов посложнее. В общем можно за 5 минут понять, а всё ли вы с ходу знаете из того, что я рассказывал 8 недель.

#devmath #квиз
🔥5
Metallic — переключатель, а не шкала
https://youtube.com/shorts/Lifzj3UvyZg?si=ED9gehzfKRdGJzYz

Решил попробовать новый формат видосов. Образовательный с инфографиками, а не чисто рассказ под мультфильм. Посмотрим как зайдёт или не зайдет.

Золото, ржавчина, лак, кожа — в современных играх все эти материалы описываются двумя числами: metallic и roughness.

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

#геймдев #графика #pbr #unity #unrealengine
🔥2🤯1
Теперь в модном чёрном цвете
https://dev-math.ru/

Вы попросили — я сделал. Мне не сложно. Так же как запрашивать какие-то темы (но новое я что-то буду делать когда добью свой "учебник по рендеру", а это ещё 3 статьи) — можно запрашивать какие-то фичи, если вам что-то не нравится и неудобно. По навигации или типа того.

А так на сайте теперь работает тёмная тема. Смотрю пока что никакой раздел не поехал, если обноружите какие-то баги — пишите. Я и сам ищу. А так согласен, ну какой сайт про разработку и для разработчиков без тёмной темы?

#новости #devmath
🔥5🤝1
Тень — это фотография мира из лампы

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

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

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

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

#геймдев #графика #математика #рендер #тени #gamedev
🔥6👍2
Forwarded from Григорий Дядиченко
Дейв и Дельта: Пролог — Первый трейлер
https://youtu.be/Q3cpMvUEODs

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

Оцените, скажите как вам трейлер. Ну и поддержать проект всегда можно на https://dev-math.ru/support/

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

#оработе #суровыйпутьинди
🔥3👎2🤮1
Проблемы с тенями на больших локациях

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

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

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

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

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

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

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

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

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

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

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

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

#devmath #gamedev #doom #математика #алгоритмы
🔥7🤮1
Почему тень зубчатая и грязная
https://dev-math.ru/articles/shadows/

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

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

На следующей неделе разберем порядок отрисовки и прозрачную геометрию. Ставьте 🔥и делитесь статьей с друзьями — это помогает развитию канала и мотивирует делать больше интересного.

#статья
🔥15
Coyote Time

Чтож. Начнем писать заметки по самой заголосованной теме. И начнём с моего любимого термина.

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

Coyote Time — это окно в несколько кадров после того, как персонаж сошел с платформы в течении которого он всё ещё может прыгнуть.

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

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

#devmath #математика #геймдизайн #платформеры #gamefeel
🔥7❤1💯1
Поменяйте местами два полупрозрачных слоя — итоговый цвет изменится

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

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

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

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

#devmath #графика #математика #рендер #прозрачность #gamedev
🔥7👀3
Что такое DrawCall
https://youtube.com/shorts/pnscoCR3lYY?si=BW8UFeLrGyWo4T6J

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

Видеокарта в вашем кадре может вообще ничего не делать — а в игре слайдшоу.

По сути draw call — это команда «нарисуй вот этот меш вот этим материалом». Рисует видеокарта, а выписывает её процессор: собрать состояние, отдать драйверу на проверку и перевод, положить в очередь.

#геймдев #рендеринг #оптимизация #drawcall #devmath
🔥8
Куда исчезают листья

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

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

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

#геймдев #графика #математика #рендер #прозрачность #gamedev
🔥7
Стекло против z-буфера: alpha, порядок и блендинг
https://dev-math.ru/articles/alpha/

Мы постепенно подбираемся к финальным темам серии статей про рендер. Сегодня самая противная вещь во всей реалтайм графике — прозрачность.

Без неё все сильно проще, но как же мы будем жить без стекол?

В общем в статье разобраны:
- что такое альфа на самом деле;
- оператор over;
- что происходит с z-буффером;
- что делает premultiplied alpha;
И так далее.

Читайте, делитесь с друзьями и ставьте 🔥 — это мотивирует таки добить мой бесплатный учебник по рендеру до конца :)

#devmath #renderpipeline #alpha
🔥6