Раздел

Графика

Как рождается картинка: цвет, свет, текстуры, шейдеры, материалы и рендер.

Основы

1Цвет — это числаУрок · с нуляКак записывают цвет и три операции, из которых собрана почти любая формула материала: умножение, сложение и смешивание.2Нормаль и светУрок · с нуляПочему грань, повёрнутая к солнцу, светлее, и как камень из пары тысяч треугольников выглядит детальным.3UV: как картинка ложится на модельУрок · с нуляКак точка на модели узнаёт, какой пиксель текстуры ей взять: адреса, развёртка, швы, плотность текселей и тайлинг.4Шейдер: функция для каждого пикселяУрок · с нуляЧто такое шейдер, как треугольник становится пикселями, почему граф нод в Unreal — это код, который выполняется для каждого пикселя, и сколько это стоит.5Свойства поверхности: roughness, metallic, AOУрок · с нуляПочему одни вещи блестят, а другие матовые, почему у металла нет своего цвета и что на самом деле значат каналы PBR: Roughness, Metallic, Specular и AO.6Материал: шейдер плюс данныеУрок · с нуляЧто такое материал в любом движке: шейдер, в который подставляют числа и текстуры. Почему код отделяют от данных, откуда инстансы и варианты шейдеров и как это влияет на скорость. Та же идея в Unreal, Unity, Godot и Blender.

Пространство

Пространства: где находится точкаУрок · базаЛокальные, мировые, координаты камеры и экрана: как вершина проходит путь от модели до пикселя и какие ноды Unreal отдают координаты в каком пространстве.Касательное пространство и карта нормалейУрок · глубжеПочему карта нормалей работает при любом повороте модели, что хранят касательные в вершинах и откуда берутся швы после запекания.Меш глазами видеокарты: вершины, швы и сглаживаниескороПочему в движке вершин больше, чем в Blender: шов развёртки и жёсткое ребро делят вершину надвое. Что хранит вершина, как треугольники ссылаются на вершины и как гладкость модели записана в нормалях.

Текстуры

Гамма и sRGB: цвет и данные хранят по-разномуУрок · базаПервый урок раздела «Текстуры». Почему 0.5 в текстуре цвета — пятая часть света: глаз различает тени подробнее, и запись sRGB отдаёт им больше ступеней (гамма ≈ 2.2, точная кривая — под капотом); почему свет считают в линейных числах и что ломается при смешивании и размытии в записи; цвет и данные — у BaseColor галочка sRGB включена, у нормалей, шероховатости, масок и высоты выключена, и что бывает, если перепутать; где галочка в Unreal, Unity, Godot, Blender и Substance Painter; почему число в палитре и в шейдере различаются.Мип-мапы и фильтрация: почему вдали мылоУрок · базаВторой урок раздела «Текстуры». Почему вдали пол рябит: под пикселем десятки текселей, а шейдер читает один-четыре; ближайший тексель и билинейная фильтрация вблизи и почему там мыло; мип-мапы — копии вдвое меньше до 1 × 1 за треть памяти; выбор уровня по производным UV (логарифм — под капотом) и трилинейная; анизотропная фильтрация для пола под острым углом; что теряется в мипах — провода, альфа листвы, рельеф нормалей (Toksvig, Composite Texture), швы атласов; степени двойки, стриминг и сдвиг уровня; где это в Unreal, Unity, Godot, Blender и Substance Painter.Упаковка каналовУрок · базаТретий урок раздела «Текстуры». Маска — одно число на пиксель, а в текстуре четыре канала: зачем AO, шероховатость и металл кладут в одну текстуру (одна выборка, втрое меньше памяти) и почему раскладки ORM, ARM, RMA и Mask Map разные; блочное сжатие BC1, BC3, BC4, BC5, BC7 — почему зелёный точнее (5-6-5), почему альфа удваивает память, но сжимается точнее всех, и почему в BC1 маски мешают друг другу (под капотом — палитра блока на отрезке); данные без sRGB и мип-мапы по каналам; как не перепутать каналы и как выглядит ошибка; разбор в материале и что ещё пакуют.Настройки текстур для каждой картыШпаргалкаШпаргалка раздела «Текстуры». Для каждой карты — BaseColor, нормаль, ORM, шероховатость, высота, альфа, свечение, AO, карта деталей, HDR и кубмапа, интерфейс — галочка sRGB, сжатие в Unreal и формат BC, мип-мапы, типичный размер, частая ошибка и ссылка на урок; те же настройки в Unity, Godot, Blender и Substance Painter; плотность текселей по виду камеры, память 1K, 2K и 4K в каждом формате с мип-мапами и без, формулы и чек-лист импорта.Текстуры без UV: triplanar и world-alignedУрок · базаУрок раздела «Текстуры». Как покрыть скалу, утёс или склон текстурой без развёртки: адрес из мировых координат, делённых на размер плитки (world-aligned), и почему одна проекция сверху тянется на стенах в 1 / |n.z| раз; три проекции вдоль X, Y и Z и веса из нормали — модуль, степень k и сумма 1, кубическая проекция при большом k и мазки на диагоналях; карта нормалей по осям каждой проекции, знак и whiteout; цена — три выборки, biplanar и дизеринг, ловушка с мип-мапами; текстура плывёт по движущемуся предмету, точность вдали от начала мира и чего проекция не умеет.Шум: из чего сделаны маскиУрок · базаСлучайность, которая выглядит естественно. Почему белый шум — песок, а не пятна; value noise и Perlin — числа и наклоны в узлах сетки, simplex; октавы (fBm) — крупное плюс мелкое, lacunarity и persistence; Voronoi — клетки, F1 и трещины F2 − F1; маска из шума — порог, smoothstep, remap и искажение координат; бесшовный шум и почему в материалах шум чаще читают из текстуры, а не считают.Как спрятать повтор текстурыскороПочему тайловая текстура на большой площади выдаёт себя узором и как это прячут: вторая текстура другого масштаба, смешивание вариантов по маске, сдвиг UV шумом, случайный поворот плиток.Виртуальные текстуры: огромная картинка по кусочкамскороКак движок держит в памяти только видимые кусочки огромных текстур и зачем земле текстура, которую рисуют сверху во время игры: стриминговые и рантайм-виртуальные текстуры, смешивание камней с землёй и цена этого.Грабли: перевёрнутый зелёный канал нормалискороРельеф освещён не с той стороны, выпуклое выглядит вдавленным: карту нормалей сделали для одного соглашения, а движок ждёт другое. Как отличить OpenGL от DirectX на глаз, где переключить и почему так вышло.

Материалы

Материалы в Unreal: мастер, инстансы, функцииУрок · базаКак Unreal раскладывает идею материала на свои ассеты. Мастер и его настройки — Material Domain, Blend Mode, Shading Model, Two Sided и флаги Usage, от которых зависят наборы шейдеров; инстансы — параметры, группы, цепочки родителей, почему Static Switch компилирует, а цвет нет, и Material Instance Dynamic в игре; функции и слои; коллекции параметров на весь мир; Material Attributes и Substrate; откуда у материала тысячи перестановок, как устроить библиотеку и как читать чужой мастер-материал.Мастер-материал с нуляФлоуПо шагам в Unreal: от пустого графа до мастер-материала камня. Настройки мастера, текстуры параметрами и Sampler Type, ORM по каналам, тинт, тайлинг и сила нормали, детальная нормаль через BlendAngleCorrectedNormals, мох сверху по мировой нормали с маской шума, функция MF_TopLayer, Static Switch, группы параметров, два инстанса и проверка цены в Stats и Shader Complexity.Математика смешиванияШпаргалкаШпаргалка смешивания слоёв и масок. Режимы двух слоёв — Multiply, × 2, Add, Subtract, Linear Burn, Lerp по маске, Screen, Overlay, Hard Light, Soft Light, Linear Light, Color Dodge и Burn, Difference, Min и Max, Height Blend: формула, нейтральное значение, что делает, где стоит в материале и нода Unreal. Операции над маской — One Minus, Power, Saturate, CheapContrast, Levels, Smoothstep, Step; две маски в одну; нормали; кривые режимов картинками и типичные ошибки.Покраска вершин: мох, грязь и смешивание на моделискороКак художник рисует прямо по модели, где будет мох, а где чистый камень: цвет вершин как маска, смешивание по высоте, почему результат зависит от плотности сетки и как то же делают текстурой-маской.Декали: наклейки на мирскороКак грязь, трещины, лужи и надписи ложатся на любую поверхность, не трогая её текстуры: проекция коробкой, что декаль может менять в материале, порядок и цена. Почему декали иногда светятся или пропадают.Глубина без геометрии: смещение по высоте и параллаксскороКак плоская стена кажется кладкой с глубиной: сдвиг текстуры по направлению взгляда, ступеньки параллакса, тени внутри рельефа и где обман раскрывается — на краях и под острым углом. Сравнение с настоящим смещением геометрии.Стекло, вода и лёд: преломлениескороПочему сквозь стакан и воду мир кажется сдвинутым: показатель преломления, как движок подделывает его сдвигом уже нарисованного кадра, толщина и цвет стекла и где подделка ломается.Подповерхностное рассеивание: кожа, воск и листьяскороПочему кожа, воск, мрамор и листья светятся изнутри: свет заходит под поверхность и выходит рядом. Как это изображают в реальном времени, какие режимы бывают у материала и сколько они стоят.Substrate в Unreal: материал из слоёвскороКак новая система материалов Unreal описывает поверхность слоями — лак поверх краски, пыль поверх металла, — чем она отличается от старых режимов затенения, что даёт художнику и сколько стоит.

Физика поверхности

PBR глубже: микрограни, Френель и сохранение энергиискороЧто на самом деле считает материал: поверхность как миллионы крошечных зеркал, доля отражения по Френелю, распределение микрограней и почему поверхность не может отдать света больше, чем получила. Формулы, на которых стоят все PBR-движки.Свет окружения: как небо и кубмапы освещают предметскороКак предмет освещается не одной лампой, а всем миром вокруг: заранее размытые кубмапы под каждую шероховатость, таблица Френеля и почему без света окружения металл выглядит чёрным.Лак, ткань и волосы: поверхности со слоямискороПочему автомобильная краска блестит дважды, бархат светится по краям, а шлифованный металл и волосы дают вытянутый блик: прозрачный лак, ворс и анизотропия — как они устроены и как их изображают.Цифры PBR: цвет и шероховатость настоящих материаловскороОдин экран значений: допустимая яркость базового цвета, отражательная способность металлов и диэлектриков, шероховатость типичных поверхностей и как проверить текстуры по этим числам.

Свет

Прямой и непрямой светУрок · базаСолнце, небо и отражённый свет: почему тени не бывают чёрными, почему вдвое дальше — вчетверо темнее, сколько люксов у солнца и у комнаты, экспозиция, отскоки и способы глобального освещения от подсветки до Lumen.Тени: карты, каскады и мягкие краяУрок · базаКак движок узнаёт, что точка в тени: карта теней глазами лампы, лесенки, теневые прыщи и смещение, дрожание и привязка к текселям, каскады для солнца, полутень от размера источника, PCF и PCSS, цена теней ламп, контактные, виртуальные и лучевые тени.Отражения: кубмапы, SSR и LumenУрок · базаОткуда блестящая поверхность знает, что в ней отражается: вектор отражения, кубмапы и пробы, коррекция параллакса, размытие по шероховатости, Френель, экранные отражения и их дыры, плоские отражения, лучи и Lumen, очередь способов и утечки отражений.Запечённый и динамический свет: лайтмапы и LumenУрок · базаСвет, посчитанный заранее, против света, который считают каждый кадр: лайтмапа и её вторая развёртка, плотность, пятна, лесенки и протекание по швам, пробы для движущихся, неподвижная, стационарная и подвижная лампа, Lumen — карточки, поля расстояний, задержка и протекание, и как выбрать способ для игры.Объёмный свет: туман, лучи и облакаскороКак движок рисует свет в воздухе: лучи сквозь листву, светящийся туман у фонаря, облака. Воздух как среда, которая рассеивает и гасит свет, сетка объёма вокруг камеры, шаги вдоль луча и их цена.

Кадр

Как движок рисует кадр: проходы и G-буферУрок · глубжеКадр как цепочка проходов: прямой и отложенный рендер, G-буфер и сотни ламп, Forward+, порядок от глубины до интерфейса и поиск ошибок материала по Buffer Visualization.Буфер глубины: кто ближе к камереУрок · базаКак видеокарта решает, какой треугольник впереди, почему глубина хранится неравномерно, откуда мерцание совпавших поверхностей и как глубина делает мягкую кромку воды.Прозрачность: Opaque, Masked, TranslucentУрок · базаПочему у листвы режим Masked, почему прозрачное дорого и сортируется с ошибками и как новый цвет смешивается с уже нарисованным.Сглаживание: лесенки, мерцание и TSRУрок · базаПочему край идёт лесенкой, а провода и блики мерцают: пиксель как одна проба, три вида алиасинга, суперсэмплинг, MSAA и постфильтры FXAA и SMAA, временное сглаживание — джиттер, история, векторы движения и отбраковка, шлейфы и мыло, апскейлеры TSR, DLSS, FSR и XeSS и что может сделать художник.LOD, инстансинг и Nanite: как рисуют миллион травинокУрок · базаКак большая сцена остаётся в бюджете: две цены — треугольники и вызовы отрисовки; уровни детализации по размеру на экране, прыжки и дизеринг, HLOD и импостеры; почему мелкие треугольники дороги; инстансинг и данные копии; отсечение по пирамиде, дальности и перекрытию (Hi-Z); Nanite — кластеры, ошибка меньше пикселя и что он не любит.Туман и пост-обработкаУрок · базаЧто происходит с картинкой после освещения: экспозиция и автоэкспозиция, тонмаппинг и почему он меняет цвета, цветокоррекция и LUT, экспоненциальный, высотный и объёмный туман, свечение, виньетка и зерно, глубина резкости и размытие движения, SSAO, порядок и цена эффектов.Бюджет кадра на видеокартеУрок · глубжеПоследний урок курса: бюджет кадра в миллисекундах (16.7 мс при 60 к/с) и почему мерить в мс, а не в FPS; процессор и видеокарта работают одновременно, кадр задаёт самое медленное звено, опыт с разрешением; задержка ввода и очередь кадров; смета видеокарты по проходам из курса; почему трава, тени и прозрачность дорогие; видеопамять, стриминг текстур и её переполнение; как искать узкое место профилировщиком; чек-лист экономии для художника.Рывки при первом показе: компиляция шейдеровскороОткуда берутся рывки, когда впервые появляется новый эффект или материал: видеокарте нужно собрать программу под конкретную связку настроек. Варианты шейдеров, кэши, прогрев заранее и что может сделать художник.Разобрать кадр по проходам: RenderDoc и профайлер UnrealскороПо шагам: снять кадр, пройти его от первого прохода до картинки на экране, найти, что рисуется зря и что съедает больше всего времени, и проверить догадку.HDR-экран: свет ярче белогоскороЧем HDR-монитор отличается от обычного, почему белый лист и солнце на нём разной яркости и как движок готовит кадр под два вида экранов: тонмаппинг, яркость бумаги и пиковая яркость.

Изнутри

Как устроена видеокарта: тысячи маленьких работниковскороПочему видеокарта считает миллионы пикселей быстрее процессора: тысячи простых вычислителей, которые делают одно и то же группами, общая память и её пропускная способность. Откуда берётся цена ветвлений, выборок и перерисовки.Графический API: как движок говорит с видеокартойскороЧто такое DirectX, Vulkan и Metal: списки команд, состояния конвейера, буферы и синхронизация. Почему вызов отрисовки стоит процессору времени и как новые API и движки уменьшают эту цену.Nanite изнутри: геометрия по кусочкамскороКак Nanite рисует миллиарды треугольников: модель режется на кластеры, у каждого есть упрощённые копии, видеокарта сама выбирает детализацию и отбрасывает невидимое. Что Nanite любит, чего не умеет и сколько стоит.Lumen изнутри: как считается живой светскороКак Unreal считает отскоки света без запекания: кэш поверхностей, поля расстояний, трассировка по экрану и по миру, накопление по кадрам. Откуда свет течёт сквозь стены, почему он запаздывает и что меняют настройки качества.Тысячи ламп: от отложенного света к MegaLightsскороПочему каждая лампа с тенью дорогая и как движки научились рисовать сотни и тысячи ламп: отложенное освещение, деление экрана на ячейки, случайный выбор ламп с накоплением по кадрам. MegaLights в Unreal и его ограничения.Трассировка лучей: свет, который ищут лучамискороКак видеокарта пускает лучи: дерево обёрток вокруг треугольников, бюджет лучей на пиксель, шум и его подавление, трассировка путей. Когда лучи лучше растеризации и почему игры смешивают оба способа.