title

Теория

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

В дизайн-программировании шум чаще всего нужен не ради «грязи», а ради сложности. Он добавляет поверхности плотность, делает плоскую сетку похожей на ткань, рельеф, поток, цифровой мрамор или зернистый плакат. При этом хороший шум остаётся управляемым: мы знаем, где он крупный, где мелкий, какие цвета использует и как ведёт себя при движении.

В этом уроке мы будем постепенно усложнять результат. Сначала превратим координаты в плотную пиксельную поверхность на Vanilla JS. Потом соберём изолинии на p5.js, добавим domain warp — деформацию координат шумом — и перенесём текстуры в Three.js. Финальная сцена покажет, что процедурный материал может жить не только как фон, но и как поверхность объекта.

Главные параметры шумовой текстуры — scale, threshold, palette и time. Масштаб решает, насколько крупной будет волна. Порог превращает плавный шум в пятна, полосы или маску. Палитра задаёт характер, а время делает текстуру живой. Если менять эти параметры отдельно, код остаётся понятным, а результат быстро получает много вариантов.

1. Зерно строится из маленьких ячеек: каждая ячейка получает значение и цвет.
2. Изолинии появляются, когда мы рисуем только те точки, где значение шума близко к заданному уровню.
3. Domain warp сначала искажает координаты, а уже потом берёт по ним шум: так поверхность становится более органичной и слоистой.

Практика

Начнём с простого варианта: canvas делится на клетки, а каждая клетка получает значение псевдошума. В Vanilla JS нет готового noise(), поэтому мы собираем мягкую функцию из нескольких синусов. Это не настоящий перлин-шум, но для текстурного паттерна принцип тот же: соседние координаты дают похожие значения.

Зернистая текстура на Vanilla JS: мягкая функция управляет размером и цветом ячеек.

Теперь используем p5.js и настоящий noise(). Вместо заливки каждой клетки рисуем только точки на нескольких порогах. Получается карта линий: она похожа на топографию, но остаётся абстрактной и плакатной за счёт двух фирменных цветов.

Изолинии: шум сравнивается с порогами, а рисуются только близкие к ним точки.

Следующий шаг — деформировать не фигуры, а координаты, по которым мы считываем шум. Такой приём называется domain warp. Сначала один шум сдвигает координату, затем второй шум строит по этой новой координате текстуру. Из-за этого поверхность выглядит глубже: будто внутри одного паттерна появился другой.

Domain warp превращает ровную сетку шума в пластичную текстуру с волнами и пятнами.

Последний технический шаг — использовать текстуру как материал в Three.js. Мы создаём несколько canvas-текстур, передаём их в THREE.CanvasTexture и накладываем на разные геометрии. Так один алгоритм начинает работать как набор цифровых материалов для мини-сцены.

Мини-сцена: несколько объектов используют процедурные текстуры, созданные прямо в коде.

Вывод

Шумовые текстуры строятся из простого принципа: координата превращается в значение, а значение управляет цветом, формой, прозрачностью, высотой или материалом. Чем лучше ты разделяешь параметры, тем легче получать разные визуальные характеры из одного алгоритма.

1. Начинай с крупного scale, чтобы увидеть общую структуру текстуры.
2. Добавляй threshold, если нужны пятна, линии, маски или резкие границы.
3. Используй domain warp, когда паттерн выглядит слишком ровным и предсказуемым.
4. Переноси готовый рисунок в CanvasTexture, если нужно превратить 2D-паттерн в материал для 3D-объекта.

• noise(x * scale, y * scale); // значение шума по координате

  

• abs(n - level) < threshold; // проверка близости к изолинии

  

• const warpedX = x + noise(x, y) * power; // сдвиг координаты шумом

  

• new THREE.CanvasTexture(canvas); // canvas как текстура для материала

  

Задание

Собери собственную серию шумовых текстур. В коде есть пресеты softFabric, electricMap и liquidPoster. Выбери один из них, затем измени масштаб, количество уровней, силу искажения и палитру. Цель — получить не один красивый кадр, а набор материалов, которые выглядят как части одной визуальной системы.

Задание: настрой пресет, добейся собственного характера текстуры и сохрани удачные параметры.