Розробка 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 на будь-яких пристроях.