Что такое блик?

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

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

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

В шейдере крутите specular вверх: если материал просто становится ярче и ничего при этом не теряет — баланс энергии у вас не сходится, поверхность отдаёт больше света, чем получила. С одним источником света это сходит с рук. А потом сцену переносят под HDRI, где свет идёт со всех сторон, и материал начинает светиться сам.

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

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

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

И загадка туда же. Блик у неметалла белый, потому что отражение от границы цвета не набирает. Тогда откуда у золота жёлтый блик, а у меди рыжий — по этой логике они тоже должны отражать лампу как есть.

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

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

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

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

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

#новости #devmath

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

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

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

#devmath #квиз

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

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

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

#новости #devmath

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

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

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

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

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

Coyote Time

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Стекло против 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

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

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

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

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

Для сглаживания границ используются методы, вроде 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