Про свет по-простому
https://dev-math.ru/articles/lighting/
Поговорим про свет. Про Ламберта, про Блинна и про Фонга. Если вы не знали или хотите освежить как устроено освещение в игровых движках — это чтиво для вас!
Я постарался собрать полную картину с историей, как всё это работает и как всё это придумывалось. Это пока не PBR с BRDF, эти вещи у нас будут темой следующей недели, но это первый шаг к физически корректному освещению.
Вообще чтобы понимать как устроена 3д графика, в первую очередь я считаю, что нужно знать базу того, как всё работает и придумывалось. Это и дает понимание как использовать то, что уже давно сделано и дает пищу для создания новых креативных идей.
Ведь чтобы сделать свой хитрый, стилизованный свет полезно знать как работает обычное освещение играх. Да и это база потребуется нам в будущем, когда мы перейдем к более комплесным эффектам и шейдерам.
В общем как и обещал: "Я сделаль".🔥 и репосты приветствуются.
#devmath #свет #Ламберт #Фонг #Блинн
https://dev-math.ru/articles/lighting/
Поговорим про свет. Про Ламберта, про Блинна и про Фонга. Если вы не знали или хотите освежить как устроено освещение в игровых движках — это чтиво для вас!
Я постарался собрать полную картину с историей, как всё это работает и как всё это придумывалось. Это пока не PBR с BRDF, эти вещи у нас будут темой следующей недели, но это первый шаг к физически корректному освещению.
Вообще чтобы понимать как устроена 3д графика, в первую очередь я считаю, что нужно знать базу того, как всё работает и придумывалось. Это и дает понимание как использовать то, что уже давно сделано и дает пищу для создания новых креативных идей.
Ведь чтобы сделать свой хитрый, стилизованный свет полезно знать как работает обычное освещение играх. Да и это база потребуется нам в будущем, когда мы перейдем к более комплесным эффектам и шейдерам.
В общем как и обещал: "Я сделаль".
#devmath #свет #Ламберт #Фонг #Блинн
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13
Что такое блик?
Посмотрите на любую цветную пластмассу рядом с собой: корпус мышки, крышку от бутылки, борт машины. Поймайте на ней отражение лампы или окна. Пластмасса синяя, красная, зелёная — а блик на ней белый. Ровно того цвета, что и источник. Так же ведут себя краска, дерево, камень, кожа: собственный цвет предмета в блик не попадает вообще.
Дело в том, что упавший свет делится один раз — на входе. Часть отражается сразу от границы двух сред, внутрь не заходя: про материал она ничего не знает, поэтому и уносит цвет источника. Остальное преломляется внутрь, гуляет там между частицами пигмента, что-то по дороге поглощается, а что уцелело — выходит обратно наружу, уже окрашенное. Вот это вернувшееся вы и называете цветом предмета.
Собственно, вывод: матовая часть и блик — не два эффекта, которые складывают. Это два разных поведения одного луча. Что отскочило от границы — внутрь не попало и цвета не наберёт; что ушло внутрь — в блике не появится. А количество энерегии одно, и равно оно тому, что упало. Проблема простой реализации прошлой статьи, что это никак не учитывается.
В шейдере крутите specular вверх: если материал просто становится ярче и ничего при этом не теряет — баланс энергии у вас не сходится, поверхность отдаёт больше света, чем получила. С одним источником света это сходит с рук. А потом сцену переносят под HDRI, где свет идёт со всех сторон, и материал начинает светиться сам.
Ну и бытовое наблюдение в ту же копилку: почему мокрый асфальт темнее сухого. Вода ничего не пачкает и цвет не съедает — она меняет маршрут той части света, что собиралась выйти наружу. Плёнка заворачивает часть выходящего обратно внутрь, тот идёт по материалу на второй круг, и там его добирает поглощение. Наружу возвращается меньше — глазу темнее. Заодно ровная плёнка собирает зеркальную часть в аккуратное пятно, поэтому мокрое всегда темнее и глянцевее одновременно.
А делится свет не всегда одинаково — пропорция зависит от угла. Посмотрите на стол сверху вниз: видите цвет дерева. Теперь присядьте и гляньте почти вдоль столешницы — на том же самом месте отражение окна, а дерева уже почти не разглядеть. Не поменялось ничего, кроме угла, под которым вы смотрите. По той же причине светлее края круглых предметов.
Почему угол решает так много, почему отражённое собирается в узкое пятно, а не светится ровно по всей поверхности, и как уложить это в шейдер, — разберём в пятницу.
И загадка туда же. Блик у неметалла белый, потому что отражение от границы цвета не набирает. Тогда откуда у золота жёлтый блик, а у меди рыжий — по этой логике они тоже должны отражать лампу как есть.
#devmath #графика #математика #рендер #pbr #gamedev
Посмотрите на любую цветную пластмассу рядом с собой: корпус мышки, крышку от бутылки, борт машины. Поймайте на ней отражение лампы или окна. Пластмасса синяя, красная, зелёная — а блик на ней белый. Ровно того цвета, что и источник. Так же ведут себя краска, дерево, камень, кожа: собственный цвет предмета в блик не попадает вообще.
Дело в том, что упавший свет делится один раз — на входе. Часть отражается сразу от границы двух сред, внутрь не заходя: про материал она ничего не знает, поэтому и уносит цвет источника. Остальное преломляется внутрь, гуляет там между частицами пигмента, что-то по дороге поглощается, а что уцелело — выходит обратно наружу, уже окрашенное. Вот это вернувшееся вы и называете цветом предмета.
Собственно, вывод: матовая часть и блик — не два эффекта, которые складывают. Это два разных поведения одного луча. Что отскочило от границы — внутрь не попало и цвета не наберёт; что ушло внутрь — в блике не появится. А количество энерегии одно, и равно оно тому, что упало. Проблема простой реализации прошлой статьи, что это никак не учитывается.
В шейдере крутите specular вверх: если материал просто становится ярче и ничего при этом не теряет — баланс энергии у вас не сходится, поверхность отдаёт больше света, чем получила. С одним источником света это сходит с рук. А потом сцену переносят под HDRI, где свет идёт со всех сторон, и материал начинает светиться сам.
Ну и бытовое наблюдение в ту же копилку: почему мокрый асфальт темнее сухого. Вода ничего не пачкает и цвет не съедает — она меняет маршрут той части света, что собиралась выйти наружу. Плёнка заворачивает часть выходящего обратно внутрь, тот идёт по материалу на второй круг, и там его добирает поглощение. Наружу возвращается меньше — глазу темнее. Заодно ровная плёнка собирает зеркальную часть в аккуратное пятно, поэтому мокрое всегда темнее и глянцевее одновременно.
А делится свет не всегда одинаково — пропорция зависит от угла. Посмотрите на стол сверху вниз: видите цвет дерева. Теперь присядьте и гляньте почти вдоль столешницы — на том же самом месте отражение окна, а дерева уже почти не разглядеть. Не поменялось ничего, кроме угла, под которым вы смотрите. По той же причине светлее края круглых предметов.
Почему угол решает так много, почему отражённое собирается в узкое пятно, а не светится ровно по всей поверхности, и как уложить это в шейдер, — разберём в пятницу.
И загадка туда же. Блик у неметалла белый, потому что отражение от границы цвета не набирает. Тогда откуда у золота жёлтый блик, а у меди рыжий — по этой логике они тоже должны отражать лампу как есть.
#devmath #графика #математика #рендер #pbr #gamedev
🔥4
Вдали ваш кирпич — зеркало
По дальней стене, гравию, клёпке побежали белые искры. MSAA по ним не работает вообще, TAA давит их ценой шлейфа. А вблизи тот же материал выглядит прилично.
Дело в мипах карты нормалей. Карта нормалей хранит наклон поверхности в каждой точке: тут скол кирпича смотрит влево, тут вправо, тут вверх. Мип-уровень — это усреднение соседних текселей, а если усреднить «влево» и «вправо», получится «прямо». Чем дальше объект, тем более пологим становится его рельеф в мипах, и на дальних уровнях от кирпичной кладки остаётся ровная плита.
Roughness при этом остался тот, что вы поставили. Ровная поверхность с низким Roughness — это зеркало: она отражает окружение чётко, без размытия. И на дальнем объекте одному пикселю достаётся то солнце или яркое пятно пробы, то тёмный кусок неба рядом. Кадр — вспышка, кадр — чернота. Вот вам и искры.
Собственно, суть: наклоны, которые усреднение потеряло, — это и есть Roughness на этой дистанции. Карта нормалей и Roughness описывают одну и ту же неровность, просто на разных масштабах: что различимо на экране — живёт в нормалях, что мельче пикселя — в Roughness. Объект уезжает вдаль, рельеф обязан перетекать из первого во второе.
В Unreal у текстуры Roughness есть свойство Composite Texture: кладёте туда карту нормалей, и движок при генерации мипов сам смотрит, сколько наклонов потерялось на уровне, и ровно настолько поднимает Roughness. В Unity такой галочки в импортёре нет. Ближайшее — Geometric Specular AA в HDRP, но он про другой источник: срезает гладкость по кривизне самой геометрии, и в доке прямо сказано, что полезнее всего он там, где карты нормалей нет.
А почему разброс наклонов вообще сворачивается в одно число и как это число выглядит изнутри — в пятницу.
#геймдев #графика #математика #рендер #pbr #gamedev
По дальней стене, гравию, клёпке побежали белые искры. 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
https://youtube.com/shorts/mbZlm4AeHxw?si=2a6Af3dDvEJmUe1U
На 256-м уровне Pac-Man ломается пополам: слева обычный лабиринт, справа каша из мусорных тайлов. Уровень пройти нельзя — и дело не в сложности.
Номер уровня игра держит в одном байте, а байт считает только от 0 до 255. На 256-м счётчик переполняется и щёлкает обратно на ноль. Подпрограмма, которая рисует фрукты внизу экрана, берёт этот номер как счётчик цикла — получает ноль и уходит на полный круг: 256 фруктов подряд. Места под них нет, и она затирает правую половину экрана.
Отсюда и «идеальная игра» Pac-Man — 3 333 360 очков.
#геймдев #математика #программирование #ретрогейминг #аркады #pacman #байт #переполнение #gamedev #retrogaming #arcade #devmath
YouTube
Pac-Man невозможно пройти
На 256-м уровне Pac-Man ломается пополам: слева обычный лабиринт, с...
🔥2
Сфера должна исчезнуть
Как за пять минут проверить, что материал не отдаёт больше света, чем получил. Уберите из сцены свет и HDRI, поставьте вместо окружения ровную белую заливку яркостью единица, выключите тонмаппинг. Материал возьмите предельный: металл с базовым цветом в единицу — такой ничего не поглощает и обязан вернуть всё, что пришло.
Вернёт — станет неотличим от фона. Не посветлеет, а исчезнет: силуэта нет, на экране ровное поле. Видите тёмный силуэт — энергию теряете, светлый — берёте из ниоткуда. Приём известен как white furnace test.
Теперь главное. Возьмите шейдер, собранный правильно, и потяните Roughness вверх. Сфера всё равно темнее фона, и на матовом конце наружу возвращается меньше половины пришедшего.
Модель считает один отскок: луч пришёл на микрогрань, отразился, улетел. В изрытой поверхности он так не летает — бьётся о соседний бугор и уходит со второго-третьего раза, а этих отскоков в модели просто нет.
На металле заметнее всего: у него всё отражение зеркальное, и нет диффузной части, которая прикрыла бы потерю. Отсюда матовая сталь, которая выглядит серой и припылённой. Ровно на это заведён баг в референсном вьювере glTF — «Rough metal looks too dark, may be losing energy».
Собственно, вывод: увидели припылённый металл — не тяните альбедо вверх, так вы проблему не решите. Прогоните тест и посмотрите, считает ли ваш шейдер многократное рассеяние. Считает — сфера не видна на любом Roughness.
Почему теряется и как это править — в пятницу.
#геймдев #графика #математика #рендер #pbr #gamedev
Как за пять минут проверить, что материал не отдаёт больше света, чем получил. Уберите из сцены свет и 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
https://max.ru/channel_dev_math
Раз уж там можно сделать публичный канал, а не приватный. Там будет всё тоже самое, только работает без VPN. Мало ли кому-то удобнее.
P.S. Негатив в тг мне понятен :) Но занимать имена надо :) И не призываю никого подписываться :) Кому удобнее так — можете) А так мне все равно, это будет просто копия тг, без «подпишитесь, там уникальный контент».
#новости #devmath
MAX
Математика в Gamdev по-простому
Как на самом деле работают стрельба, толпа NPC, графика, физика тканей и свет в играх.
Разборы на пальцах, рабочий код, интерактивы. https://dev-math.ru
Разборы на пальцах, рабочий код, интерактивы. https://dev-math.ru
👎11👍4👌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 #рендер
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 #квиз
https://dev-math.ru/dave-quiz/
Актуализировал квиз. Раз мы уже прошли с вами большую часть пути и вышло столько статей про графику, то давайте проверим знания небольшим квизом.
15 вопросов по темам что вышли и что выйдут. От самых простых про то, что такое UV до вопросов посложнее. В общем можно за 5 минут понять, а всё ли вы с ходу знаете из того, что я рассказывал 8 недель.
#devmath #квиз
🔥4
Metallic — переключатель, а не шкала
https://youtube.com/shorts/Lifzj3UvyZg?si=ED9gehzfKRdGJzYz
Решил попробовать новый формат видосов. Образовательный с инфографиками, а не чисто рассказ под мультфильм. Посмотрим как зайдёт или не зайдет.
Золото, ржавчина, лак, кожа — в современных играх все эти материалы описываются двумя числами: metallic и roughness.
Раньше на это уходили три независимые карты, и можно было нарисовать вещество, которого не существует: пластик, отражающий как зеркало. Свернуть их в два помогла не новая формула, а физика — вещество либо проводник, либо нет.
#геймдев #графика #pbr #unity #unrealengine
https://youtube.com/shorts/Lifzj3UvyZg?si=ED9gehzfKRdGJzYz
Решил попробовать новый формат видосов. Образовательный с инфографиками, а не чисто рассказ под мультфильм. Посмотрим как зайдёт или не зайдет.
Золото, ржавчина, лак, кожа — в современных играх все эти материалы описываются двумя числами: metallic и roughness.
Раньше на это уходили три независимые карты, и можно было нарисовать вещество, которого не существует: пластик, отражающий как зеркало. Свернуть их в два помогла не новая формула, а физика — вещество либо проводник, либо нет.
#геймдев #графика #pbr #unity #unrealengine
YouTube
Metallic — переключатель, а не шкала
Золото, ржавчина, лак, кожа — в современных играх все эти материалы...
🔥2🤯1
Теперь в модном чёрном цвете
https://dev-math.ru/
Вы попросили — я сделал. Мне не сложно. Так же как запрашивать какие-то темы (но новое я что-то буду делать когда добью свой "учебник по рендеру", а это ещё 3 статьи) — можно запрашивать какие-то фичи, если вам что-то не нравится и неудобно. По навигации или типа того.
А так на сайте теперь работает тёмная тема. Смотрю пока что никакой раздел не поехал, если обноружите какие-то баги — пишите. Я и сам ищу. А так согласен, ну какой сайт про разработку и для разработчиков без тёмной темы?
#новости #devmath
https://dev-math.ru/
Вы попросили — я сделал. Мне не сложно. Так же как запрашивать какие-то темы (но новое я что-то буду делать когда добью свой "учебник по рендеру", а это ещё 3 статьи) — можно запрашивать какие-то фичи, если вам что-то не нравится и неудобно. По навигации или типа того.
А так на сайте теперь работает тёмная тема. Смотрю пока что никакой раздел не поехал, если обноружите какие-то баги — пишите. Я и сам ищу. А так согласен, ну какой сайт про разработку и для разработчиков без тёмной темы?
#новости #devmath
🔥4🤝1
Тень — это фотография мира из лампы
Присядьте так, чтобы ваш глаз оказался там, где лампочка, и посмотрите оттуда на комнату.
Что видно с этой точки — туда свет лампы дошёл напрямую, чего не видно — не дошёл. Дальше уже дело отскоков (и это больше к теме GI): скажем белая стена подсветит и то, что от лампы закрыто. Но форму самой тени задаёт именно этот вид: она повторяет силуэт, каким предмет виден лампе, а не вам.
Собственно, ровно это делает игра. Рисует кадр со стороны света и сохраняет не цвет, а глубину: как далеко ближайшая поверхность в каждом направлении. Потом, рисуя картинку уже вам, для каждой точки смотрит в этот снимок. Приём предложил Лэнс Уильямс в 1978-м, и в реальном времени тени до сих пор чаще всего считают именно так.
Снимок конечного размера: сколько в нём пикселей, столько записано чисел, и покрывает он конечный кусок мира — между числами данных нет. Зубцы по контуру, рябь на ровном полу, тень, обрывающаяся по невидимой линии вдали — последствия этого.
Почему конечный размер даёт именно такие артефакты — разберём в пятницу.
#геймдев #графика #математика #рендер #тени #gamedev
Присядьте так, чтобы ваш глаз оказался там, где лампочка, и посмотрите оттуда на комнату.
Что видно с этой точки — туда свет лампы дошёл напрямую, чего не видно — не дошёл. Дальше уже дело отскоков (и это больше к теме GI): скажем белая стена подсветит и то, что от лампы закрыто. Но форму самой тени задаёт именно этот вид: она повторяет силуэт, каким предмет виден лампе, а не вам.
Собственно, ровно это делает игра. Рисует кадр со стороны света и сохраняет не цвет, а глубину: как далеко ближайшая поверхность в каждом направлении. Потом, рисуя картинку уже вам, для каждой точки смотрит в этот снимок. Приём предложил Лэнс Уильямс в 1978-м, и в реальном времени тени до сих пор чаще всего считают именно так.
Снимок конечного размера: сколько в нём пикселей, столько записано чисел, и покрывает он конечный кусок мира — между числами данных нет. Зубцы по контуру, рябь на ровном полу, тень, обрывающаяся по невидимой линии вдали — последствия этого.
Почему конечный размер даёт именно такие артефакты — разберём в пятницу.
#геймдев #графика #математика #рендер #тени #gamedev
🔥6👍2