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

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

Дело в том, что смешивание — не усреднение, а делёж пикселя по очереди. Прозрачность слоя — на самом деле его доля: какая часть пикселя им накрыта. Верхний слой забирает свою долю целиком, нижнему достаётся его доля от остатка: оба просили половину, но верхнему ушла половина пикселя, а нижнему — половина оставшегося, четверть. Несимметрично по построению, какие доли ни выставляй. Эту арифметику формализовали Томас Портер и Том Дафф в 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