Реализация Noise/Grain эффектов на сайте

Реализация Noise/Grain эффектов на сайте

Grain (зернистость, шум плёнки) — один из самых часто запрашиваемых визуальных эффектов в современном веб-дизайне. Он убирает стерильность экрана, добавляет текстуру, делает градиенты более органичными. Реализуется несколькими способами — от статичного SVG-фильтра до анимированного Canvas-шума.

Метод 1: SVG filter + CSS (самый лёгкий)

Браузер применяет процедурный шум через SVG feTurbulence. Почти нулевая нагрузка на CPU/GPU.

<!-- Скрытый SVG с фильтром -->
<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0">
  <defs>
    <filter id="grain-filter" x="0%" y="0%" width="100%" height="100%"
            color-interpolation-filters="sRGB">
      <feTurbulence
        type="fractalNoise"
        baseFrequency="0.65"
        numOctaves="3"
        stitchTiles="stitch"
        result="noise"
      />
      <feColorMatrix type="saturate" values="0" in="noise" result="grayNoise"/>
      <feBlend in="SourceGraphic" in2="grayNoise" mode="overlay" result="blended"/>
      <feComponentTransfer in="blended">
        <feFuncA type="linear" slope="1"/>
      </feComponentTransfer>
    </filter>
  </defs>
</svg>

.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.15;
  filter: url(#grain-filter);
  background: transparent;
}

/* Или на конкретный элемент */
.hero-with-grain {
  position: relative;
}

.hero-with-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.12;
  filter: url(#grain-filter);
  pointer-events: none;
}

Статичный — шум не двигается. Подходит для текстурирования градиентов.

Метод 2: CSS pseudo-element с base64 PNG

Pre-rendered PNG с шумом, тайлится через background-size. Меньше артефактов на некоторых браузерах.

.grain-texture::after {
  content: '';
  position: fixed;
  inset: -200%;  /* выходим за пределы для анимации */
  width: 400%;
  height: 400%;
  background-image: url('/textures/grain.png');
  background-size: 200px 200px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 9999;
  animation: grain-shift 0.2s steps(1) infinite;
}

@keyframes grain-shift {
  0%  { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0%); }
  70% { transform: translate(0%, 15%); }
  80% { transform: translate(3%, 35%); }
  90% { transform: translate(-10%, 10%); }
  100%{ transform: translate(0%, 5%); }
}

Генерация grain.png через Node.js:

// scripts/generate-grain.js
const { createCanvas } = require('canvas')
const fs = require('fs')

const SIZE = 256
const canvas = createCanvas(SIZE, SIZE)
const ctx = canvas.getContext('2d')

const imageData = ctx.createImageData(SIZE, SIZE)
const data = imageData.data

for (let i = 0; i < data.length; i += 4) {
  const value = Math.floor(Math.random() * 255)
  data[i] = value      // R
  data[i + 1] = value  // G
  data[i + 2] = value  // B
  data[i + 3] = 255    // A
}

ctx.putImageData(imageData, 0, 0)
fs.writeFileSync('./public/textures/grain.png', canvas.toBuffer('image/png'))

Метод 3: Canvas с анимированным шумом

Полный контроль: скорость обновления, размер зерна, opacity, цвет.

class GrainCanvas {
  private canvas: HTMLCanvasElement
  private ctx: CanvasRenderingContext2D
  private rafId: number | null = null
  private frameCount = 0
  private readonly FRAME_SKIP = 2  // обновлять каждые N кадров

  constructor(container: HTMLElement = document.body, opacity = 0.1) {
    this.canvas = document.createElement('canvas')
    this.canvas.style.cssText = `
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 9999;
      opacity: ${opacity};
      mix-blend-mode: overlay;
    `
    container.appendChild(this.canvas)

    this.ctx = this.canvas.getContext('2d')!
    this.resize()
    window.addEventListener('resize', this.resize)
    this.start()
  }

  private resize = () => {
    // Используем меньшее разрешение для производительности
    const scale = 0.5
    this.canvas.width = window.innerWidth * scale
    this.canvas.height = window.innerHeight * scale
  }

  private generateNoise() {
    const { width, height } = this.canvas
    const imageData = this.ctx.createImageData(width, height)
    const buffer = new Uint32Array(imageData.data.buffer)

    for (let i = 0; i < buffer.length; i++) {
      const v = (Math.random() * 256) | 0
      // Packed RGBA (little-endian): AABBGGRR
      buffer[i] = (255 << 24) | (v << 16) | (v << 8) | v
    }

    this.ctx.putImageData(imageData, 0, 0)
  }

  private start() {
    const tick = () => {
      this.frameCount++
      if (this.frameCount % this.FRAME_SKIP === 0) {
        this.generateNoise()
      }
      this.rafId = requestAnimationFrame(tick)
    }
    this.rafId = requestAnimationFrame(tick)
  }

  destroy() {
    if (this.rafId) cancelAnimationFrame(this.rafId)
    window.removeEventListener('resize', this.resize)
    this.canvas.remove()
  }
}

new GrainCanvas(document.body, 0.08)

Метод 4: WebGL shader noise (GLSL)

Для grain поверх WebGL-сцены или для процедурного шума с управлением частотой:

// Fragment shader — animated film grain
uniform float uTime;
uniform float uIntensity;
uniform vec2 uResolution;

varying vec2 vUv;

// Псевдослучайная функция
float rand(vec2 co) {
  return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);
}

void main() {
  // Меняем seed каждый кадр — зерно "живёт"
  vec2 seed = vUv + fract(uTime * 37.0);
  float grain = rand(seed * uResolution) * 2.0 - 1.0;

  // Добавляем к существующему цвету
  vec4 base = texture2D(uTexture, vUv);
  base.rgb += grain * uIntensity;

  gl_FragColor = base;
}

Grain поверх градиента: устранение banding

Градиенты на экранах с ограниченной глубиной цвета показывают полосы. Grain эффективно маскирует banding:

.gradient-section {
  background: linear-gradient(135deg, #1a0050 0%, #0a1628 50%, #001a2e 100%);
  position: relative;
}

.gradient-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/textures/grain.png');
  background-size: 150px;
  opacity: 0.05;
  animation: grain-shift 0.3s steps(1) infinite;
  pointer-events: none;
}

Производительность

Canvas с полным разрешением при 60fps создаёт нагрузку. Решения:

• Уменьшить размер canvas (scale = 0.5) и растянуть через CSS
• Обновлять каждые 2–3 кадра (FRAME_SKIP)
• OffscreenCanvas + Worker для отдельного потока

// OffscreenCanvas в Web Worker
// main.js
const canvas = document.getElementById('grain')
const offscreen = canvas.transferControlToOffscreen()
const worker = new Worker('/workers/grain-worker.js')
worker.postMessage({ canvas: offscreen }, [offscreen])

Сроки

SVG или PNG метод с CSS анимацией — 2–3 часа. Canvas с настройкой интенсивности, переключением для prefers-reduced-motion и React-компонентом — 1 день.