Нужно ли знать C или графическое программирование?

GLSL — небольшой C-подобный язык: циклы, условия и арифметика с плавающей точкой. Если касались C, Java или JavaScript, синтаксис будет знаком. Шейдеры пресетов снабжены комментариями, так что для старта обычно хватает менять значения — без опыта с GPU.

Шейдер компилируется, но превью чёрное. В чём дело?

Частые причины: запись в `gl_FragColor` вне функции main, возврат `vec3` вместо `vec4`, деление на ноль внутри шумовой функции. Откройте консоль браузера — WebGL печатает полезные предупреждения, даже если компиляция формально успешна.

Можно ли семплировать текстуру или загрузить своё изображение?

Да. Нажмите «Загрузить картинку» в панели предпросмотра — любой PNG или JPG привяжется к `sampler2D u_texture`. Сопутствующий float `u_hasTexture` становится 1.0, как только изображение готово, так что шейдер может проверять, доступна ли текстура. Это та же схема, что у channel inputs в Shadertoy.

Какая версия WebGL используется?

WebGL 1 и GLSL ES 1.0. Это значит `varying` вместо `in/out`, `gl_FragColor` вместо именованного выхода и без целочисленных текстур. Шейдеры под WebGL 2 или десктопный OpenGL 3+ потребуют небольшой правки синтаксиса, чтобы запуститься здесь.

Отправляется ли что-то на сервер?

Нет. Компиляция и рендеринг идут на вашей GPU через браузер. Код шейдера не покидает страницу: закроете вкладку без копирования — код пропадёт.

Площадка WebGL-шейдеров

Пишите и просматривайте GLSL-шейдеры в реальном времени

АвтоСкорость1.0x0 FPS

Шаблон

precision mediump float;

uniform float u_time;
uniform vec2 u_resolution;
uniform vec2 u_mouse;

void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;
  vec2 m = u_mouse / u_resolution;

  // Animated gradient with mouse interaction
  float d = distance(uv, m);
  float wave = sin(uv.x * 10.0 + u_time * 2.0) * 0.5 + 0.5;
  float pulse = smoothstep(0.4, 0.0, d);

  vec3 col1 = vec3(1.0, 0.45, 0.2);  // orange
  vec3 col2 = vec3(0.85, 0.3, 0.5);  // rose
  vec3 col3 = vec3(0.2, 0.1, 0.05);  // dark

  vec3 color = mix(col3, col1, wave * uv.y);
  color = mix(color, col2, pulse * 0.8);
  color += 0.05 * sin(u_time + uv.xyx * 20.0);

  gl_FragColor = vec4(color, 1.0);
}

Юниформы

float u_time

vec2 u_resolution

vec2 u_mouse

int u_frame

sampler2D u_texture

float u_hasTexture

sampler2D u_noise

Загрузите картинку, чтобы привязать её к u_texture. Пока изображение есть, u_hasTexture равен 1.0, иначе 0.0.

u_noise — встроенная бесшовная текстура шума 256×256: читайте из неё, чтобы получать органичные узоры без написания хеш-функций. u_frame считает отрисованные кадры с момента последней компиляции.

Что такое Площадка WebGL-шейдеров?

Пишите GLSL-вершинные и фрагментные шейдеры и мгновенно видите результат рендеринга через WebGL. Никакой локальной настройки не нужно. Подходит для изучения шейдерного программирования, прототипирования эффектов или экспериментов с GPU-ускоренной графикой.

Встроенные uniform-переменные: `u_time` для анимации, `u_resolution` для размера холста, `u_mouse` для положения курсора, `u_frame` для счётчика отрисованных кадров и готовая бесшовная текстура шума `sampler2D u_noise`. Загрузите любую картинку — она привяжется к `sampler2D u_texture`, и фрагментный шейдер сможет читать её напрямую. В наборе десять пресетов (gradient wave, plasma, circle SDF, noise tunnel, Mandelbrot, ray march sphere, metaballs, voronoi, starfield, worley cells), ползунок скорости анимации, счётчик FPS в реальном времени, переключатель автокомпиляции, кнопка паузы, которая замораживает таймлайн, ссылка для шеринга, переносящая весь исходник, и экспорт текущего кадра в PNG.

Как использовать

Напишите или вставьте код GLSL-фрагментного шейдера в редактор. Шейдер по умолчанию уже загружен.
Предпросмотр обновляется в реальном времени по мере ввода. Встроенные юниформы: время, разрешение и позиция мыши.
Экспортируйте шейдер в виде PNG-скриншота или скопируйте код для использования в собственных WebGL-проектах.

Когда использовать

Учить GLSL, не поднимая локальный проект на C++ или Three.js.
Прототипировать эффект на фрагментном шейдере до переноса в игровой движок или на сайт.
Делать стоп-кадры анимированных фонов для портфолио, слайдов и постов в соцсетях.

Результат

Разработчик игр, создающий прототип эффекта волн на воде, пишет фрагментный шейдер с синусоидами и юниформой времени. Панель предпросмотра показывает анимированный результат в реальном времени.

Частые вопросы

Нужно ли знать C или графическое программирование?: GLSL — небольшой C-подобный язык: циклы, условия и арифметика с плавающей точкой. Если касались C, Java или JavaScript, синтаксис будет знаком. Шейдеры пресетов снабжены комментариями, так что для старта обычно хватает менять значения — без опыта с GPU.
Шейдер компилируется, но превью чёрное. В чём дело?: Частые причины: запись в `gl_FragColor` вне функции main, возврат `vec3` вместо `vec4`, деление на ноль внутри шумовой функции. Откройте консоль браузера — WebGL печатает полезные предупреждения, даже если компиляция формально успешна.
Можно ли семплировать текстуру или загрузить своё изображение?: Да. Нажмите «Загрузить картинку» в панели предпросмотра — любой PNG или JPG привяжется к `sampler2D u_texture`. Сопутствующий float `u_hasTexture` становится 1.0, как только изображение готово, так что шейдер может проверять, доступна ли текстура. Это та же схема, что у channel inputs в Shadertoy.
Какая версия WebGL используется?: WebGL 1 и GLSL ES 1.0. Это значит `varying` вместо `in/out`, `gl_FragColor` вместо именованного выхода и без целочисленных текстур. Шейдеры под WebGL 2 или десктопный OpenGL 3+ потребуют небольшой правки синтаксиса, чтобы запуститься здесь.
Отправляется ли что-то на сервер?: Нет. Компиляция и рендеринг идут на вашей GPU через браузер. Код шейдера не покидает страницу: закроете вкладку без копирования — код пропадёт.

Площадка WebGL-шейдеров

Что такое Площадка WebGL-шейдеров?

Как использовать

Когда использовать

Результат

Частые вопросы

Похожие инструменты

3D-макет коробки/упаковки

3D-диаграмма рассеяния

3D-просмотрщик рельефа

3D-витрина Товаров

Создание 3D-текста

Просмотр 360° изображений

Площадка WebGL-шейдеров