Разработка Canvas-анимаций для сайта: частицы, 3D, WebGL

Интерактивные фоны, частицы и 3D-сцены — тренд, но реализация через DOM или SVG упирается в производительность: 60 FPS держатся только до сотни объектов. Canvas же позволяет рендерить тысячи частиц без лагов — но только при правильной архитектуре. Например, клиент хотел фон из 3000 частиц на React — DOM уронил FPS до 5. Переписали на Canvas с пулом частиц — получили стабильные 60 FPS на мобильном.

Мы реализуем Canvas-анимации под ключ: от простых частиц до WebGL-сцен с шейдерами. Прозрачная стоимость разработки рассчитывается исходя из сложности. Оценим ваш проект за 1 день — свяжитесь с нами для консультации.

Какие проблемы решаем

Низкая производительность при большом количестве объектов

DOM-анимации тормозят уже на 100–200 элементах. Canvas перерисовывает всё за один проход, но требует ручного управления памятью и переиспользования объектов. Мы оптимизируем пулы частиц, избегаем gc и боремся с N+1 отрисовкой. Гарантируем, что после оптимизации анимация будет работать на 60 FPS на всех целевых устройствах.

Размытые пиксели на Retina-дисплеях

Стандартный canvas рисует в CSS-пикселях — на Retina изображение получается размытым. Мы умножаем размер на devicePixelRatio и масштабируем контекст.

Сложность интеграции с React/Vue

Простое использование canvas вызывает 'hydration mismatch' и потерю состояния. Мы обернули движок в хуки useCanvas с корректным управлением жизненным циклом.

Неконтролируемая память в анимациях

Без грамотного управления объектами память растёт, вызывая GC-фризы. Мы используем объектные пулы и избегаем аллокаций в render loop.

Какую производительность даёт Canvas

Canvas в 10–50 раз быстрее SVG на тысячах объектов благодаря отсутствию DOM-накладных расходов. Мы добиваемся стабильных 60 FPS за счёт:

• requestAnimationFrame с автоматической паузой при неактивной вкладке
• Ограничения delta-time (кап 100 ms)
• Принудительного сброса gc через переиспользование объектов

Сравнение Canvas vs SVG vs DOM-анимации:

Оптимизация под Retina и мобильные устройства включена в стоимость.

Как мы это делаем: стек и примеры

Используем TypeScript, React 18, Three.js r150. Ключевые паттерны: Repository, BFF для частиц, render loop с разделением на update/draw. Код движка tree-shake-ready, что позволяет включать только нужные модули в финальный бандл.

Базовый Canvas-движок

// lib/canvas-engine.ts
export interface AnimationContext {
  canvas: HTMLCanvasElement
  ctx: CanvasRenderingContext2D
  width: number
  height: number
  dpr: number // device pixel ratio
  dt: number // delta time в секундах
}

export type RenderFn = (context: AnimationContext) => void

export class CanvasEngine {
  private canvas: HTMLCanvasElement
  private ctx: CanvasRenderingContext2D
  private dpr: number
  private rafId: number | null = null
  private lastTime: number = 0
  private renderFn: RenderFn

  constructor(canvas: HTMLCanvasElement, renderFn: RenderFn) {
    this.canvas = canvas
    this.ctx = canvas.getContext('2d')!
    this.dpr = window.devicePixelRatio || 1
    this.renderFn = renderFn
    this.resize()
  }

  resize() {
    const { canvas, dpr } = this
    const rect = canvas.getBoundingClientRect()
    canvas.width = rect.width * dpr
    canvas.height = rect.height * dpr
    this.ctx.scale(dpr, dpr)
  }

  start() {
    this.lastTime = performance.now()
    this.tick(this.lastTime)
  }

  stop() {
    if (this.rafId !== null) {
      cancelAnimationFrame(this.rafId)
      this.rafId = null
    }
  }

  private tick = (timestamp: number) => {
    const dt = Math.min((timestamp - this.lastTime) / 1000, 0.1)
    this.lastTime = timestamp
    const rect = this.canvas.getBoundingClientRect()
    this.renderFn({
      canvas: this.canvas,
      ctx: this.ctx,
      width: rect.width,
      height: rect.height,
      dpr: this.dpr,
      dt,
    })
    this.rafId = requestAnimationFrame(this.tick)
  }
}

React-хук useCanvas

// hooks/useCanvas.ts
import { useEffect, useRef } from 'react'
import { CanvasEngine, RenderFn } from '../lib/canvas-engine'

export function useCanvas(renderFn: RenderFn) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const engineRef = useRef<CanvasEngine | null>(null)

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const engine = new CanvasEngine(canvas, renderFn)
    engineRef.current = engine
    engine.start()

    const handleResize = () => engine.resize()
    window.addEventListener('resize', handleResize)

    return () => {
      engine.stop()
      window.removeEventListener('resize', handleResize)
    }
  }, [renderFn])

  return canvasRef
}

Система частиц с физикой

// lib/particle-system.ts
interface Particle {
  x: number
  y: number
  vx: number
  vy: number
  radius: number
  color: string
  life: number
  maxLife: number
}

export class ParticleSystem {
  private particles: Particle[] = []
  private readonly maxParticles: number

  constructor(maxParticles = 500) {
    this.maxParticles = maxParticles
  }

  emit(x: number, y: number, count = 5) {
    for (let i = 0; i < count; i++) {
      if (this.particles.length >= this.maxParticles) break
      const angle = Math.random() * Math.PI * 2
      const speed = 50 + Math.random() * 150
      this.particles.push({
        x,
        y,
        vx: Math.cos(angle) * speed,
        vy: Math.sin(angle) * speed - 100,
        radius: 2 + Math.random() * 4,
        color: `hsl(${200 + Math.random() * 60}, 80%, 60%)`,
        life: 1,
        maxLife: 0.8 + Math.random() * 0.8,
      })
    }
  }

  update(dt: number) {
    const gravity = 300
    this.particles = this.particles.filter(p => {
      p.x += p.vx * dt
      p.y += p.vy * dt
      p.vy += gravity * dt
      p.vx *= 0.99
      p.life -= dt / p.maxLife
      return p.life > 0
    })
  }

  draw(ctx: CanvasRenderingContext2D) {
    for (const p of this.particles) {
      ctx.save()
      ctx.globalAlpha = p.life * p.life
      ctx.fillStyle = p.color
      ctx.beginPath()
      ctx.arc(p.x, p.y, p.radius * p.life, 0, Math.PI * 2)
      ctx.fill()
      ctx.restore()
    }
  }
}

Пример компонента: ParticleCanvas — интерактивная система частиц с гравитацией, автоматической эмиссией и кликом мыши.

Почему Three.js — стандарт для 3D-анимаций на сайте?

Для сложных 3D-сцен на фоне сайта используем Three.js — он даёт готовые шейдеры, постпроцессинг и совместимость с WebGL 2.0. Мы пишем кастомные материалы и анимации, контролируя память через BufferGeometry.

// components/ThreeBackground.tsx
'use client'
import { useEffect, useRef } from 'react'
import * as THREE from 'three'

export function ThreeBackground() {
  const mountRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const mount = mountRef.current!
    const width = mount.clientWidth
    const height = mount.clientHeight

    const scene = new THREE.Scene()
    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
    camera.position.z = 50

    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
    renderer.setSize(width, height)
    renderer.setPixelRatio(window.devicePixelRatio)
    mount.appendChild(renderer.domElement)

    const count = 3000
    const positions = new Float32Array(count * 3)
    for (let i = 0; i < count * 3; i++) {
      positions[i] = (Math.random() - 0.5) * 200
    }

    const geometry = new THREE.BufferGeometry()
    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))

    const material = new THREE.PointsMaterial({
      size: 0.3,
      color: 0x3b82f6,
      transparent: true,
      opacity: 0.7,
    })

    const points = new THREE.Points(geometry, material)
    scene.add(points)

    let rafId: number
    const animate = () => {
      rafId = requestAnimationFrame(animate)
      points.rotation.x += 0.0003
      points.rotation.y += 0.0005
      renderer.render(scene, camera)
    }
    animate()

    const handleResize = () => {
      const w = mount.clientWidth
      const h = mount.clientHeight
      camera.aspect = w / h
      camera.updateProjectionMatrix()
      renderer.setSize(w, h)
    }
    window.addEventListener('resize', handleResize)

    return () => {
      cancelAnimationFrame(rafId)
      window.removeEventListener('resize', handleResize)
      renderer.dispose()
      mount.removeChild(renderer.domElement)
    }
  }, [])

  return <div ref={mountRef} className="absolute inset-0 -z-10" />
}

Как Canvas-анимации влияют на Core Web Vitals?

Правильно спроектированная Canvas-анимация не ухудшает LCP, CLS и INP. Мы используем requestAnimationFrame и Suspense для ленивой загрузки, чтобы не блокировать основной поток. В результате анимация стартует только после интерактива страницы, не замедляя первый рендер.

Процесс работы

1. Аналитика — изучаем дизайн, требования к производительности, целевые устройства.
2. Прототипирование — создаём MVP анимации с базовыми параметрами.
3. Реализация — пишем движок с паттернами Repository, подключаем React-обвязку.
4. Оптимизация — режем draw calls, добавляем LOD, проверяем Core Web Vitals.
5. Деплой — настраиваем CI/CD, тесты на реальных устройствах.

Сроки ориентировочно

Что входит в услугу

• Исходный код (TS/React-компоненты, документация JSDoc)
• Оптимизация под 60 FPS на целевых устройствах
• Адаптация под мобильные и Retina
• Интеграция с вашим приложением (Next.js, Nuxt, CRA)
• Техническая поддержка 2 недели после сдачи

Сертифицированные специалисты Three.js и WebGL. Гарантия производительности 60 FPS. Закажите разработку Canvas-анимации в нашей командеи получите стабильные 60 FPS на любых устройствах.