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

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

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

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

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

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

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

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

#новости #devmath

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#статья

Coyote Time

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#devmath #renderpipeline #alpha

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

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

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

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

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

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

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

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

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

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

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

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

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

#новости

Разные сорта алиасинга

Вы наверняка слышали про алиасинг (а скорее даже про анти-алиасинг), но он бывает разный и правится по-разному.

Алиасинг на контуре объекта

Первый тип. Это классическая лесенка на диагональных линиях. Возникает он на внешних границах объекта где он перекрывает фон. Контур объекта — это резкий перепад цвета или яркости между объектом и фоном. При дискретизации на пиксельной сетке этот резкий переход часто попадает внутрь пикселя, и алгоритм вынужден выбирать что-то одно: цвет объекта или цвет фона. В результате линия границы получается негладкой, а "рваной".

Для сглаживания границ используются методы, вроде MSAA, чтобы вычислить правильный промежуточный цвет на границе.

Алиасинг на линиях поверхности

Второй тип. Здесь речь идет не о границе объекта, а о линиях, которые лежат на его поверхности. Алиасинг проявляется не на краю объекта, а на самой линии, которая нарисована поверх текстуры или цвета поверхности. Эти линии могут "дергаться", мерцать или иметь рваные края, даже если сама поверхность выглядит гладкой.

Тут для сглаживания техники посложнее. Сузить динамический диапазон перед усреднением (в Advanced Warfare отдельным пунктом гасили «светлячков»); не пускать roughness к нулю — Frostbite подпирает её снизу именно ради этого (Filament).

Алиасинг на альфа тесте

Третий тип. Который часто путают с первым. Кромка листвы накладывается на фон проступая через альфа тест.

Полутонов там нет по построению, MSAA их не придумает, пока не включён alpha-to-coverage. Про это было в предыдущей статье.

Что и как чинится подробнее разберем в пятницу.

#msaa #aliasing #devmath

Экспонента в шкале опыта
https://youtube.com/shorts/tp4TONz0wok?si=1B9zEIZ7qFnK7y8S

Почему шкала опыта в играх экспоненциальная? Всё в новом ролике. В новом формате. Думаю так и воспринимается лучше и выглядит интереснее.

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

Целых две статьи по геймдизайну

Для начинающих. Это не отменяет доработку цикла рендера, но с тем как интересен всем геймдизайн захотелось ускорится и начать добавлять на сайт и геймдизайн. А начинать лучше всегда с самых основ.

Что такое геймдизайн? — вводная для тех, кто только начинает делать игры: что проектирует геймдизайнер и из чего состоит ремесло — core loop, механики, экономика и числа, обучение игрока, левелдизайн.

Что почитать начинающему геймдизайнеру? — разбор книг по геймдизайну для тех, кто начинает: с каких двух начинать, что брать под конкретную задачу — ощущение управления, левелдизайн, баланс.

Я что-то начал со сложного в начале, в геймдизайне тоже много интересной математики, которую можно разобрать. Так что на этой неделе постараюсь добить статьи по рендеру и к новой теме :)

Ну и не выкладывал чтобы не спамить, ну и новый шортс про Броню и убывающую отдачу.

#devmath #геймдизайн

Почему в Overwatch броня вычитает фиксированное значение урона?
https://youtube.com/shorts/QQiAwGy6wF0?si=T41m9A-OubXqXo7u

Геймдизайн — это мастерство создания интересных правил. Процентное снижение урона ощущается абстрактно: цель «стала не такой пробиваемой», но убивать её вы будете той же ротацией скиллов — как в большинстве RPG.

Flat Damage Reduction работает иначе: она вынуждает менять оружие. Против брони эффективно только то, что наносит максимум урона за один выстрел — так появляется тактический слой, и Overwatch поощряет смену героев по ходу матча, а не игру одним персонажем.

Это же убивает bunker composition — связку вроде Orisa + Bastion + Baptiste, где щит Orisa на низком кулдауне прикрывал высокий урон Bastion, а команда «окапывалась» на точке, выкашивая всех в зоне поражения. После изменения брони и лимита «один танк на команду» тактика перестала работать.

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

#overwatch #devmath #геймдизайн #gamedesign #игры

Путь кадра — Финал

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

https://dev-math.ru/articles/postfx/ — Постобработка

https://dev-math.ru/articles/gi/ — Глобальное Освещение

https://dev-math.ru/articles/raytracing/ — Трассировка Лучей

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

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

#devmath #render