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

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

Shadertoy — онлайн-площадка, где пишут фрагментный шейдер, рисующий целый кадр по координате пикселя; результат виден сразу.

Зачем это знать

Теория шейдеров без практики мертва. Чтобы «почувствовать» GLSL, нужен инструмент с быстрой обратной связью. Браузерные площадки дают это бесплатно: меняешь строку — сразу видишь эффект. Это лучший способ научиться думать «на пиксель».

Shadertoy: рисуем по координате пикселя

На Shadertoy вы пишете функцию mainImage, которая для каждого пикселя получает его координату и возвращает цвет. Никакой геометрии — только математика от координаты. Доступны iTime (время), iResolution (размер экрана), мышь.

// Shadertoy: градиент, пульсирующий во времени
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 uv = fragCoord / iResolution.xy;   // 0..1 по экрану
    float pulse = 0.5 + 0.5 * sin(iTime);
    vec3 col = vec3(uv.x, uv.y, pulse);
    fragColor = vec4(col, 1.0);
}

Логику цвета по нормированной координате легко прорепетировать на Python — те же формулы, что вы напишете в GLSL.

def shade(px, py, width, height, t):
    u = px / width
    v = py / height
    pulse = 0.5 + 0.5 * __import__("math").sin(t)
    return (round(u, 2), round(v, 2), round(pulse, 2))

W, H = 100, 100
print("Левый низ (0,0):", shade(0, 0, W, H, 0))
print("Правый верх (99,99):", shade(99, 99, W, H, 0))
print("Центр, t=1.57:", shade(50, 50, W, H, 1.57))

Вывод:

Левый низ (0,0): (0.0, 0.0, 0.5)
Правый верх (99,99): (0.99, 0.99, 0.5)
Центр, t=1.57: (0.5, 0.5, 1.0)

Цвет — чистая функция координаты и времени. В центре при t≈π/2 синус достигает 1 — «пульс» ярче всего. Так шейдер мыслит каждый пиксель отдельно.

Шейдеры в Three.js / WebGL

Когда нужна настоящая 3D-сцена, шейдеры пишут в WebGL-движке вроде Three.js: создают материал с вершинным и фрагментным шейдером (ShaderMaterial), передают uniform (время, текстуры, свет) из JavaScript. Это шаг от «картинки по координате» к освещению реальных мешей.

Как работает под капотом

Shadertoy под капотом рисует один прямоугольник на весь экран и запускает ваш mainImage как фрагментный шейдер для каждого пикселя — это та же постобработка, только «сцена» рождается прямо в коде. Three.js компилирует ваши шейдеры через WebGL-драйвер браузера и подставляет нужные uniform каждый кадр.

Частые ошибки

• Начинать сразу с 3D-движка вместо Shadertoy — больше отвлекающего кода, медленнее обучение.
• Забыть нормировать координату на разрешение — эффект растянется по-разному на разных экранах.
• Ждать от Shadertoy работы с геометрией — там нет мешей, только пиксельная математика.

Итоги

• Shadertoy: фрагментный шейдер рисует кадр по координате пикселя и времени iTime.
• Цвет — чистая функция координаты; это можно репетировать даже на Python.
• Three.js/WebGL — для шейдеров на реальных 3D-мешах в браузере.
• Начинать стоит с Shadertoy и The Book of Shaders — быстрая обратная связь.