Реализация WebGL-анимаций и 3D-эффектов на сайте
При попытке добавить 3D-анимацию через Canvas 2D производительность падает до 15 FPS на мобильных устройствах — GPU простаивает. WebGL решает эту проблему, давая прямой доступ к графическому процессору. Когда нужно рендерить тысячи частиц, деформировать геометрию по аудиосигналу или строить интерактивные 3D-сцены без плагинов — мы используем WebGL 2.0 (поддержка 95%+ браузеров) через Three.js или напрямую через WebGL API для нестандартных задач. Например, в одном проекте для премиального лендинга мы заменили CSS-анимацию шейдерным фоном — LCP упал с 4.2 до 1.8 секунд, а визуальная сложность выросла втрое. Свяжитесь с нами для оценки вашего проекта.
Почему WebGL — стандарт для 3D на вебе?
WebGL — единственная технология, обеспечивающая полноценную 3D-графику без плагинов. В отличие от CSS-анимаций или Canvas 2D, WebGL использует шейдеры на GPU, что даёт производительность, недостижимую другими средствами. Для визуализации данных, геймификации или премиального дизайна это стандарт. Спецификация WebGL от Khronos Group поддерживается всеми современными браузерами. По данным Google, интерактивные 3D-элементы увеличивают конверсию на 30–40% в e-commerce — но только при грамотной оптимизации.
Как мы реализуем 3D-эффекты?
Создаём шейдерные фоны (анимированный шум, градиенты с реакцией на мышь), системы частиц (100k+ частиц с анимацией на GPU), деформацию изображений при hover, 3D-модели продуктов с конфигуратором материалов и интерактивные сцены. Ниже — таблица с типовыми эффектами.
| Эффект | Инструмент | Производительность | Срок прототипа |
|---|---|---|---|
| Шейдерный фон | Raw WebGL / Three.js | 60fps на десктопе | 1–2 дня |
| Система частиц (100k) | Three.js с BufferGeometry | 30–60fps на мобильных | 2–3 дня |
| Image distortion | Three.js с displacement map | 60fps | 1 день |
| 3D-модель продукта | Three.js + GLTF | Зависит от полигонов | 5–7 дней |
Техническая реализация: шейдеры, частицы, деформации
Three.js — стандарт де-факто для большинства веб-проектов. Абстрагирует шейдеры и буферы, предоставляет сцену, камеру, освещение. Версия r169+ поддерживает WebGPU как альтернативный рендерер. Raw WebGL применяется когда нужна полная управляемость: кастомные геометрические примитивы, нестандартные режимы бленда, минимальный bundle size. GLSL-шейдеры пишутся вручную под каждый эффект.
// Вертексный шейдер — деформация плоскости по шуму
uniform float uTime;
uniform float uAmplitude;
varying vec2 vUv;
vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
void main() {
vUv = uv;
vec3 pos = position;
float noise = snoise(vec2(pos.x * 0.5 + uTime * 0.3, pos.y * 0.5));
pos.z += noise * uAmplitude;
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
// Three.js — инициализация сцены с постпроцессингом
import * as THREE from 'three'
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#webgl'),
antialias: true,
alpha: true,
})
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.toneMapping = THREE.ACESFilmicToneMapping
const composer = new EffectComposer(renderer)
composer.addPass(new RenderPass(scene, camera))
composer.addPass(new UnrealBloomPass(
new THREE.Vector2(window.innerWidth, window.innerHeight),
0.8, // strength
0.4, // radius
0.85 // threshold
))
Система частиц
Для 100k+ частиц используется BufferGeometry с атрибутами в Float32Array. Анимация идёт целиком в вертексном шейдере — CPU не задействован в runtime.
const COUNT = 150000
const positions = new Float32Array(COUNT * 3)
const randoms = new Float32Array(COUNT)
for (let i = 0; i < COUNT; i++) {
positions[i * 3 + 0] = (Math.random() - 0.5) * 10
positions[i * 3 + 1] = (Math.random() - 0.5) * 10
positions[i * 3 + 2] = (Math.random() - 0.5) * 10
randoms[i] = Math.random()
}
const geometry = new THREE.BufferGeometry()
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
geometry.setAttribute('aRandom', new THREE.BufferAttribute(randoms, 1))
const material = new THREE.ShaderMaterial({
uniforms: {
uTime: { value: 0 },
uSize: { value: 3.0 * renderer.getPixelRatio() },
},
vertexShader: particleVertexShader,
fragmentShader: particleFragmentShader,
transparent: true,
depthWrite: false,
blending: THREE.AdditiveBlending,
})
Image distortion при hover
Текстура изображения деформируется через displacement map по позиции курсора. Эффект «жидкого» наведения.
// Uniforms для передачи в шейдер
const uniforms = {
uTexture: { value: texture },
uDisplacement: { value: displacementTexture },
uMouse: { value: new THREE.Vector2(0, 0) },
uVelo: { value: 0 },
}
// Отслеживание скорости движения мыши
let lastMouse = new THREE.Vector2()
let currentVelo = 0
window.addEventListener('mousemove', (e) => {
const current = new THREE.Vector2(
e.clientX / window.innerWidth,
1.0 - e.clientY / window.innerHeight
)
const delta = current.distanceTo(lastMouse)
currentVelo = Math.min(delta * 10, 1.0)
lastMouse.copy(current)
uniforms.uMouse.value.copy(current)
})
Загрузка ассетов
3D-модели — формат .glb (бинарный GLTF). Сжатие через Draco (geom) + KTX2 (текстуры).
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'
import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js'
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('/draco/')
const ktx2Loader = new KTX2Loader()
ktx2Loader.setTranscoderPath('/basis/')
ktx2Loader.detectSupport(renderer)
const loader = new GLTFLoader()
loader.setDRACOLoader(dracoLoader)
loader.setKTX2Loader(ktx2Loader)
loader.load('/models/scene.glb', (gltf) => {
scene.add(gltf.scene)
}, (progress) => {
const pct = (progress.loaded / progress.total * 100).toFixed(0)
onProgress(pct)
})
Оптимизация производительности и адаптивность
Framerate target — 60fps на десктопе, 30fps на мобильных с автоматическим снижением качества. Определяется через navigator.hardwareConcurrency и бенчмарк при первом рендере. Ключевые правила: один drawcall вместо тысячи (InstancedMesh), renderer.setPixelRatio(Math.min(devicePixelRatio, 2)), dispose при unmount, постпроцессинг только при prefersReducedMotion === false. Сравнение подходов приведено в таблице.
| Параметр | Three.js | Raw WebGL |
|---|---|---|
| Скорость разработки | Высокая (готовые компоненты) | Низкая (ручное управление) |
| Производительность | Достаточная для 90% задач | Максимальная при кастомной оптимизации |
| Bundle size | ~600 KB (min) | ~50 KB (только шейдеры) |
| Когда выбирать | Стандартные эффекты, сроки критичны | Уникальные сцены, минимальный размер |
Как оптимизировать WebGL для слабых устройств?
Автоматически проверяем мощность GPU через бенчмарк при загрузке. Если FPS падает ниже целевого, снижаем пиксель ратио, количество частиц, отключаем постпроцессинг. Для мобильных используем InstancedMesh и избегаем прозрачных материалов. Поддержка prefers-reduced-motion отключает анимацию полностью. Такой подход экономит до 40% трафика и гарантирует плавный опыт на любом устройстве.
Что входит в проект?
- Прототип эффекта с исходными шейдерами
- Интеграция в ваш фреймворк (React, Vue, Angular, vanilla)
- Оптимизация под Core Web Vitals и мобильные устройства
- Документация по настройке и поддержке
- Доступ к репозиторию с кодом
Получите консультацию в течение рабочего дня — свяжитесь с нами для обсуждения вашей задачи.
Этапы работы и ориентировочные сроки
- Брифинг и анализ требований — 1–2 дня
- Прототипирование основного эффекта — 3–5 дней
- Разработка и оптимизация — 5–10 дней
- Тестирование на устройствах — 2–3 дня
- Деплой и документация — 2 дня
Общий срок: от 10 до 20 рабочих дней в зависимости от сложности. Стоимость рассчитывается индивидуально. Свяжитесь с нами для оценки вашего проекта.