Шум: алгоритм Perlin и Simplex в GLSL

Шум является ключевым инструментом в компьютерной графике для создания реалистичных текстур, анимаций и процедурных эффектов. В контексте Three.js генерация шума часто выполняется на уровне шейдеров с использованием GLSL (OpenGL Shading Language). Наиболее распространённые алгоритмы — Perlin noise и Simplex noise, которые обеспечивают гладкий, непрерывный и псевдослучайный результат.

Алгоритм Perlin Noise

Perlin noise, предложенный Кеном Перлином, генерирует градиентный шум. Он полезен для имитации природных явлений: облаков, воды, горных ландшафтов.

Принципы работы

  1. Сетка градиентов: пространство делится на равномерную сетку. В каждой вершине сетки задаётся случайный градиентный вектор.
  2. Интерполяция: для любой точки внутри клетки вычисляется взвешенная сумма скалярных произведений градиентов соседних вершин и вектора от вершины до точки.
  3. Сглаживание: используется функция сглаживания (обычно fade(t) = 6t^5 - 15t^4 + 10t^3), чтобы избежать резких переходов.
float fade(float t) {
    return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);
}

float lerp(float a, float b, float t) {
    return a + t * (b - a);
}

Важные особенности

  • Периодичность: классический Perlin noise не является случайным в глобальном масштабе, его структура повторяется.
  • Многоканальные версии: можно комбинировать несколько шумов с различной частотой для получения фрактального шума (fBm — fractal Brownian motion).
  • Производительность: на GPU через GLSL Perlin noise часто вычисляется с помощью текстур градиентов или оптимизированных функций без циклов.

Алгоритм Simplex Noise

Simplex noise, также разработанный Кеном Перлином, является усовершенствованной версией Perlin noise. Он уменьшает вычислительную сложность и визуально устраняет артефакты на диагоналях сетки.

Основные идеи

  1. Триангуляция пространства: вместо квадратной сетки используется симплексная сетка (треугольники в 2D, тетраэдры в 3D), что уменьшает количество вершин, участвующих в вычислении шума.
  2. Вычисление весов: для каждой вершины симплекса вычисляется вес в зависимости от расстояния до точки.
  3. Градиенты и интерполяция: аналогично Perlin noise, но количество операций и сложность вычисления снижается.

Пример GLSL-функции Simplex Noise (2D)

vec3 mod289(vec3 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec2 mod289(vec2 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec3 permute(vec3 x) {
  return mod289(((x*34.0)+1.0)*x);
}

float simplexNoise(vec2 v) {
    const vec4 C = vec4(0.211324865405187, // (3-sqrt(3))/6
                        0.366025403784439, // 0.5*(sqrt(3)-1)
                       -0.577350269189626, // -1 + 2*C.x
                        0.024390243902439); // 1/41
    vec2 i  = floor(v + dot(v, vec2(C.y)) );
    vec2 x0 = v - i + dot(i, vec2(C.x));
    vec2 i1;
    i1 = (x0.x > x0.y) ? vec2(1.0,0.0) : vec2(0.0,1.0);
    vec4 x12 = x0.xyxy + C.xxzz;
    x12.xy -= i1;
    i = mod289(i);
    vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
                    + i.x + vec3(0.0, i1.x, 1.0 ));
    vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
    m = m*m ;
    m = m*m ;
    vec3 x = 2.0 * fract(p * C.w) - 1.0;
    vec3 h = abs(x) - 0.5;
    vec3 ox = floor(x + 0.5);
    vec3 a0 = x - ox;
    m *= 1.79284291400159 - 0.85373472095314 * (a0*a0+h*h);
    vec3 g;
    g.x  = a0.x * x0.x + h.x * x0.y;
    g.yz = a0.yz * x12.xz + h.yz * x12.yw;
    return 130.0 * dot(m, g);
}

Использование шума в Three.js

  1. Создание материала с шейдером:
import * as THREE from 'three';

const material = new THREE.ShaderMaterial({
  uniforms: {
    uTime: { value: 0.0 }
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform float uTime;
    varying vec2 vUv;
    ${simplexNoiseGLSL} // вставка функции Simplex Noise
    void main() {
      float n = simplexNoise(vUv * 5.0 + uTime * 0.1);
      gl_FragColor = vec4(vec3(n * 0.5 + 0.5), 1.0);
    }
  `
});

  1. Анимация: изменяя координаты или параметр uTime, можно создавать динамические эффекты воды, облаков или пламени.

  2. Фрактальный шум: комбинация нескольких октав шума с разными частотами и амплитудами усиливает визуальную сложность.

float fbm(vec2 st) {
    float value = 0.0;
    float amplitude = 0.5;
    float frequency = 0.0;
    for(int i = 0; i < 5; i++) {
        value += amplitude * simplexNoise(st);
        st *= 2.0;
        amplitude *= 0.5;
    }
    return value;
}

Сравнение Perlin и Simplex Noise

Характеристика Perlin Noise Simplex Noise
Сложность вычислений Высокая в 3D и выше Ниже, оптимизировано
Артефакты диагоналей Возможны Минимизируются
Плавность переходов Очень гладкая Ещё более гладкая
Использование в GPU Требует оптимизаций Эффективен на шейдерах

Применение в процедурной графике

  • Текстуры облаков и дыма: шум создаёт естественные паттерны.
  • Процедурные ландшафты: комбинация шумов разных октав формирует горы, долины и водные поверхности.
  • Анимационные эффекты: смещение координат по времени даёт плавные волны и движение облаков.
  • Динамическое освещение и материалы: шум может влиять на прозрачность, цвет или блики поверхностей.

Шум в GLSL является фундаментальным инструментом для создания реалистичных процедурных эффектов в Three.js. Правильная настройка частот, амплитуд и комбинаций октав позволяет создавать визуально богатые сцены с минимальными затратами вычислительных ресурсов.

Оглавление