Учебник Шейдеры и компьютерная графика для начинающих

Программа курса

1. 1 Как компьютер рисует картинку

   1. Пиксели и фреймбуфер

      Что такое пиксель, как цвет хранится в RGBA-байтах и зачем нужен фреймбуфер — буфер кадра в памяти.

   2. Частота кадров и время кадра

      FPS, миллисекунды на кадр, бюджет 16.7 мс при 60 Гц и почему frame time честнее, чем средний FPS.

   3. Растровая и векторная графика

      Чем растр (пиксельная сетка) отличается от вектора (формулы и кривые), и почему 3D-рендер в итоге всегда растеризуется.

2. 2 Конвейер рендеринга и пространства

   1. 2D и 3D графика: в чём разница

      Почему 3D — это не просто 'плоскость с глубиной': проекция, камера, перспектива и почему всё равно выходит 2D-картинка.

   2. Обзор graphics pipeline

      Все стадии конвейера рендеринга по порядку: вершины, вершинный шейдер, сборка примитивов, растеризация, фрагментный шейдер, тесты, фреймбуфер.

   3. Системы координат и пространства

      Цепочка пространств: локальное (модель) → мировое → вид (камера) → клип → экран, и зачем каждое из них.

   4. Однородные координаты и компонента w

      Зачем к (x,y,z) добавляют четвёртую компоненту w: единое представление точек и направлений, перенос матрицей, деление перспективы.

3. 3 Матрицы и векторы в графике

   1. Матрицы преобразований: перенос, поворот, масштаб

      Три базовых преобразования вершин и как они выражаются матрицами; поворот точки на угол через матрицу 2x2.

   2. Комбинирование преобразований

      Почему порядок умножения матриц важен, как масштаб→поворот→перенос складываются в одну матрицу модели.

   3. Матрица вида и матрица проекции

      Как камера задаётся матрицей вида (look-at) и как перспективная против ортографической проекции переводит объём в клип-пространство.

   4. Векторы, скалярное и векторное произведение

      Позиции, направления и нормали как векторы; нормализация, скалярное произведение (угол, освещение) и векторное (нормаль, перпендикуляр).

4. 4 GPU, шейдеры и растеризация

   1. Что такое GPU и почему он параллельный

      CPU против GPU: единицы мощных ядер против тысяч простых; модель SIMT и почему графика идеально параллелится.

   2. Что такое шейдер

      Шейдер как маленькая программа на GPU, исполняемая для каждой вершины или пикселя; типы шейдеров и их место в конвейере.

   3. Вершинный шейдер

      Работа вершинного шейдера: вход — атрибуты вершины, выход — clip-позиция и varying для интерполяции; что он может и не может.

   4. Растеризация и барицентрические координаты

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

5. 5 GLSL, освещение и текстуры

   1. Фрагментный шейдер

      Фрагментный (пиксельный) шейдер вычисляет цвет каждого фрагмента; вход — интерполированные varying, выход — RGBA.

   2. Язык GLSL: типы и функции

      Векторные и матричные типы (vec2/3/4, mat3/4), swizzling, встроенные функции и квалификаторы uniform/attribute/varying.

   3. Модель освещения Фонга

      Три составляющие света: ambient, diffuse, specular; роль нормалей, направления на свет и на камеру; формула диффузной яркости.

   4. Текстуры: UV, сэмплирование, фильтрация

      Как картинка натягивается на меш через UV-координаты, что такое сэмплирование, билинейная фильтрация и mipmap.

6. 6 Глубина, прозрачность и эффекты

   1. Карты нормалей и продвинутые текстуры

      Как normal map подделывает рельеф без лишних полигонов, и какие ещё карты (roughness, metallic, AO) управляют видом поверхности.

   2. Буфер глубины и z-buffer

      Как z-buffer решает, какой объект ближе и виден; тест глубины, отсечение задних граней и z-fighting.

   3. Прозрачность и блендинг

      Альфа-канал, формула смешивания src/dst, почему прозрачное сортируют back-to-front и где z-buffer мешает.

   4. Постобработка: эффекты на весь экран

      Рендер в текстуру и full-screen quad: блюр, свечение (bloom), тонмаппинг — как обрабатывают готовый кадр целиком.

7. 7 Тени, шум и физичный рендеринг

   1. Тени: shadow mapping

      Идея теневой карты: отрендерить глубину из позиции света и сравнить её при рисовании сцены; что такое shadow acne и PCF.

   2. Процедурная графика и шум

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

   3. Физически корректный рендеринг (PBR)

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

8. 8 Трассировка лучей, инструменты и оптимизация

   1. Рейтрейсинг против растеризации

      Как трассировка лучей считает свет, идя из камеры в сцену; почему она физичнее, но дороже растеризации, и где они сочетаются.

   2. Инструменты: где практиковать шейдеры

      Shadertoy для фрагментных шейдеров в браузере, шейдеры в Three.js/WebGL, ShaderToy-функции mainImage и iTime; с чего начать.

   3. Оптимизация графики: draw calls, batching, LOD

      Где теряется производительность: число draw calls, объединение в батчи, уровни детализации (LOD), отсечение невидимого (culling).