Dev Math

Решил изменить стиль роликов и голос диктора

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

#новости

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

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

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

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

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

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

Шина видеокарты и fps
https://youtube.com/shorts/39vq_Y3LPEs?si=kHte0rGuj7kpavSu

Продолжаю экспериментировать с форматом коротких видео.

Видеокарта считает тысячами потоков разом — а байты к этим ядрам ещё надо провезти по шине через кэши.

Разбор целиком — в статье про путь одного draw call.

#компьютернаяграфика #оптимизация #gpu #геймдев #devmath

Стекло против z-буфера: alpha, порядок и блендинг
https://dev-math.ru/articles/alpha/

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

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

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

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

#devmath #renderpipeline #alpha

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

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

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

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

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

Что такое DrawCall
https://youtube.com/shorts/pnscoCR3lYY?si=BW8UFeLrGyWo4T6J

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

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

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

#геймдев #рендеринг #оптимизация #drawcall #devmath

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

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

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

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

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

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

Coyote Time

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

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

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

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

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

#devmath #математика #геймдизайн #платформеры #gamefeel

Почему тень зубчатая и грязная
https://dev-math.ru/articles/shadows/

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

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

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

#статья

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дейв и Дельта: Пролог — Первый трейлер
https://youtu.be/Q3cpMvUEODs

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

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

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

#оработе #суровыйпутьинди

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

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

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

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

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

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

Теперь в модном чёрном цвете
https://dev-math.ru/

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

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

#новости #devmath

Metallic — переключатель, а не шкала
https://youtube.com/shorts/Lifzj3UvyZg?si=ED9gehzfKRdGJzYz

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

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

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

#геймдев #графика #pbr #unity #unrealengine

Квиз про графику
https://dev-math.ru/dave-quiz/

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

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

#devmath #квиз

Куда уходит свет, который поверхность не отразила
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 #рендер

На всякий случай завел Макс
https://max.ru/channel_dev_math

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

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

#новости #devmath

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

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

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

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

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

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

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

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

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