Prizma — небольшая личная лаборатория, где я разбираю приёмы процедурной графики и держу их под рукой как живые примеры. Всё считается на GPU фрагментным шейдером: ни одной заранее нарисованной текстуры, только математика, шум и свет.

Как это работает

Каждый этюд — это одна функция mainImage(out vec4 fragColor, in vec2 fragCoord), знакомая всем, кто пробовал ShaderToy. Рантайм собирает её в полноэкранный треугольник и прокидывает три uniform-а:

• u_resolution — размер холста в пикселях (и соотношение сторон в .z);
• u_time — время в секундах с момента запуска;
• u_mouse — положение курсора и состояние нажатия.

Дальше — обычный GLSL ES 3.0. Можно крутить SDF, считать fbm-шум, делать доменную деформацию и тон-маппинг. Ошибки компиляции показываются прямо под кодом.

Темы заметок

• знаковые поля расстояний (SDF) и мягкие тени;
• процедурный шум: value/gradient/FBM;
• доменная деформация и поток (curl noise);
• цвет: палитры через косинус, гамма и тон-маппинг ACES.

Стек

Только браузер: WebGL2 и немного ванильного JavaScript. Никаких сборщиков, фреймворков и внешних CDN — страница целиком открывается с одного домена. Так проще читать исходники и ничего не ломается со временем.

Открыть плейграунд →