Как работают пиксели, цвета и экраны
1. Что такое пиксель?
Пиксель (pixel = picture element) — это наименьшая дискретная единица изображения, которую может отобразить экран.
• Пиксель — не точка, а ячейка, которая содержит информацию о цвете и яркости.
• Современные экраны имеют миллионы пикселей, например Full HD: 1920 × 1080 = 2 073 600 пикселей.
2. Как устроен физически пиксель на экране
На уровне монитора или дисплея:
• Каждый пиксель состоит из 3 субпикселей: R (красный), G (зелёный), B (синий).
• Субпиксели — это физические источники света (в LCD/LED — кристаллы и светодиоды, в OLED — излучающие органические материалы).
• Они смешиваются, создавая видимый цвет.
Пример:
Если включен только красный субпиксель → пиксель выглядит красным.
Если все включены на 100% → пиксель белый.
Если все выключены → пиксель чёрный.
3. Как кодируется цвет (битовая глубина)
Пиксели в цифровом виде — это просто числа, описывающие яркость каждого канала.
• 1 байт на R, G, B (и, опционально, A)
• Всего цветов:
256 (R) × 256 (G) × 256 (B) = 16 777 216 цветов
• RGB888 — 8 бит на каждый канал
• RGBA8888 — 8 бит на каждый + 8 бит альфа (прозрачность)
• RGB565 — 5 бит R, 6 бит G, 5 бит B (экономия памяти)
• RGBA4444 — 4 бит на канал (ещё компактнее, хуже качество)
4. Как цвета интерпретируются (цветовое пространство)
• Цвета не просто числа, они имеют цветовое пространство.
• Самое распространённое: sRGB (стандарт для интернета и экранов).
• В 3D-графике часто используют линейное пространство (Linear RGB):
• В sRGB яркость не линейна (учёт восприятия глаз).
• В Linear RGB — реальная энергия света, важно для освещения и PBR (Physically Based Rendering).
Что такое цветовое пространство?
Это способ интерпретировать числовые значения цвета. Один и тот же RGB (например, 128, 128, 128) может означать разный визуальный цвет в разных цветовых пространствах.
• Принятое стандартом цветовое пространство для экранов, веба, картинок.
• Создан для приближения к восприятию яркости человеческим глазом.
• В нём применяется гамма-коррекция: чтобы число 128 не означало "50% света", а соответствовало тому, как глаз воспринимает яркость.
Линейное пространство (Linear RGB):
• Здесь число 128 означает ровно 50% физической энергии света.
• То есть линейное пространство — физически корректное.
• Используется при расчетах освещения и материалов (например, в PBR).
Что значит "яркость не линейна"?
Глаз человека не воспринимает свет линейно. Пример:
• Если один источник света даёт 1 единицу яркости, а второй 9, то глаз увидит разницу как 1 к 2, а не 1 к 9.
• Мы чувствительнее к теням, чем к свету.
• Чтобы изображение выглядело естественно, цвета в sRGB искажаются (применяется гамма-коррекция).
• Гамма — это степень, с которой увеличивается значение яркости.
• Для sRGB используют гамму ~2.2
5. Как данные превращаются в свет на экране (процесс отображения)
• Графический адаптер (GPU) формирует изображение — массив пикселей (Framebuffer).
• Память видеокарты содержит эти данные как массив байтов.
• Монитор по HDMI/DisplayPort получает поток этих данных, например 60 раз в секунду (60 Гц).
• Контроллер дисплея преобразует их в аналоговое напряжение или цифровые команды:
• В LCD: регулируется прозрачность кристаллов + подсветка
• В OLED: управляется ток на пиксель напрямую
6. Как работает яркость
• В LCD: ток изменяет ориентацию жидких кристаллов → пропускание света
• В OLED: ток напрямую меняет интенсивность излучения
7. Цветовая температура и гамма
• Цветовая температура — баланс между красным и синим (тёплые/холодные оттенки)
• Гамма — кривизна отображения яркости:
• Человеческий глаз не линейно воспринимает свет.
• sRGB включает гамма-коррекцию (~2.2)
• Линейное пространство — важно для физически корректного освещения
8. Пиксель как байтовый массив
Пример: пиксель в RGBA8888 = 4 байта, например:
[0x80, 0xC8, 0xFF, 0xFF] → красивый голубоватый цвет
База по OpenGL и SDL
• Создан в 1992 году компанией Silicon Graphics (SGI)
• Кроссплатформенный API для работы с GPU
• Уровень: низкоуровневый — ты вручную управляешь буферами, шейдерами и т.д.
• Написана в 1998 году Сэмом Лантингой (Sam Lantinga)
• Библиотека-обёртка над OpenGL, DirectX и другими API
• Отличие от OpenGL: SDL — это фреймворк для мультимедиа, а OpenGL — графический API
Что такое PBR (Physically Based Rendering)
PBR = Физически корректный рендеринг
Это способ рендера, при котором освещение и материалы моделируются по законам физики.
1. Энергосохранение — материал не может отражать больше света, чем получает.
2. Реалистичные BRDF — формулы, определяющие, как свет отражается (например, Cook-Torrance).
3. Металличность и шероховатость (Metalness, Roughness) — основные параметры материалов.
4. Линейное цветовое пространство — все расчёты ведутся в линейной яркости.
5. HDR освещение (IBL) — использование окружающего света через environment maps.
Albedo (BaseColor) — цвет без теней
Roughness — насколько матовая поверхность
AO (Ambient Occlusion) — затенённость в углублениях
PBR позволяет добиться фотореализма и переносимости материалов между рендерами (Unity, Unreal, Blender и т.п.).