WebGL-визуализация: шейдеры, частицы и оптимизация

Посетитель заходит на страницу с картой, а браузер начинает тормозить: скролл дёргается, Tooltip появляется через секунду. Если вы сталкивались с таким — данные слишком большие для SVG или Canvas 2D. WebGL решает эту проблему: он рендерит сотни тысяч точек за один draw call, используя GPU клиента. При 500 000+ точек Canvas 2D падает до 3 fps, а WebGL держит 60 fps. Это не просто улучшение — это возможность создавать дашборды реального времени, которые раньше были невозможны.

Однажды к нам пришёл проект по визуализации геоданных для логистической компании. У них было 800 тысяч точек с координатами и весами. Canvas 2D выдавал 5 кадров в секунду. Мы переписали всё на WebGL — получили стабильные 60 fps. Заказчик сэкономил на железе и ускорил загрузку дашборда в 12 раз.

Мы специализируемся на WebGL-визуализациях более 10 лет. За это время реализовали десятки проектов: от карт с миллионами объектов до анимированных particle-эффектов. Наш опыт гарантирует, что визуализация будет работать плавно на любых устройствах — от десктопа до mid-range мобильных.

Как WebGL обеспечивает 60 fps на больших данных?

WebGL использует GPU и минимизирует количество draw calls. В отличие от Canvas 2D, который отрисовывает каждую точку отдельно, WebGL передаёт весь массив данных одним вызовом. Это снижает накладные расходы CPU и позволяет достичь 60 fps даже при 1 млн точек. Ключевые факторы: использование буферов с типом float, отказ от избыточных uniform-ов, и правильная настройка blending. Согласно WebGL API, каждый draw call может обрабатывать до 2^32 вершин, что даёт огромный запас производительности.

Когда нужен именно WebGL

• Scatter plot с 500 000+ точек (финансовые данные, геопространственные)
• Particle systems: интерактивные фоны, визуализации физических процессов
• Heatmaps в реальном времени (данные биржевых торгов, тепловые карты кликов)
• Процедурные анимации (шум Перлина, математические поверхности)
• Обработка изображений через шейдеры (фильтры, эффекты)

Для стандартных графиков (100–10 000 точек) — D3.js или Recharts достаточно.

Сравнение WebGL, Canvas 2D и SVG для больших данных

WebGL в 10 раз быстрее Canvas 2D при 500k точках — это разница между 60 fps и 3 fps. Выбор инструмента зависит от объёма данных и требований к визуализации.

Сравнение популярных библиотек WebGL

Как выбрать между deck.gl и кастомными шейдерами?

Для геопространственных данных (карты, scatter plots, heatmaps) используем deck.gl — библиотека от Uber, оптимизированная для больших датасетов. Она предоставляет готовые Layer-компоненты (ScatterplotLayer, HeatmapLayer, ColumnLayer) и поддерживает WebGL2. Для кастомных визуализаций (particle-системы, процедурная графика) пишем шейдеры напрямую или через обёртку regl.

deck.gl: визуализация геопространственных данных

npm install deck.gl @deck.gl/layers @deck.gl/react react-map-gl maplibre-gl 

import DeckGL from '@deck.gl/react' import { ScatterplotLayer, HeatmapLayer, ColumnLayer } from '@deck.gl/layers' import Map from 'react-map-gl/maplibre' interface DataPoint { coordinates: [number, number] value: number category: string } function GeoVisualization({ data }: { data: DataPoint[] }) { const [viewState, setViewState] = useState({ longitude: 37.6, latitude: 55.75, zoom: 10, pitch: 45, bearing: 0, }) const layers = [ new ScatterplotLayer({ id: 'scatter', data, getPosition: (d) => d.coordinates, getRadius: (d) => Math.sqrt(d.value) * 10, getFillColor: (d) => { const t = d.value / 1000 return [255 * t, 100, 255 * (1 - t), 200] }, pickable: true, radiusMinPixels: 2, radiusMaxPixels: 50, }), new HeatmapLayer({ id: 'heatmap', data, getPosition: (d) => d.coordinates, getWeight: (d) => d.value, radiusPixels: 40, intensity: 1, threshold: 0.1, colorRange: [ [0, 0, 255, 0], [0, 255, 255, 128], [0, 255, 0, 200], [255, 255, 0, 220], [255, 0, 0, 255], ], }), ] return ( <DeckGL viewState={viewState} onViewStateChange={({ viewState }) => setViewState(viewState as any)} layers={layers} getTooltip={({ object }: { object: DataPoint }) => object && { html: `<b>Значение:</b> ${object.value}`, style: { background: '#fff' } } } style={{ position: 'relative', height: '600px' }} controller={true} > <Map mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json" /> </DeckGL> ) } 

WebGL шейдеры напрямую: GLSL

function WebGLCanvas() { const canvasRef = useRef<HTMLCanvasElement>(null) useEffect(() => { const canvas = canvasRef.current! const gl = canvas.getContext('webgl2')! const vertexShaderSrc = `#version 300 es in vec2 a_position; in float a_value; out float v_value; uniform vec2 u_resolution; void main() { vec2 zeroToOne = a_position / u_resolution; vec2 zeroToTwo = zeroToOne * 2.0; vec2 clipSpace = zeroToTwo - 1.0; gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1); gl_PointSize = max(2.0, sqrt(a_value) * 3.0); v_value = a_value; } ` const fragmentShaderSrc = `#version 300 es precision highp float; in float v_value; out vec4 outColor; vec3 viridis(float t) { const vec3 c0 = vec3(0.267, 0.004, 0.329); const vec3 c1 = vec3(0.127, 0.566, 0.551); const vec3 c2 = vec3(0.993, 0.906, 0.144); return mix(mix(c0, c1, t), mix(c1, c2, t), t); } void main() { vec2 coord = gl_PointCoord - 0.5; if (length(coord) > 0.5) discard; outColor = vec4(viridis(v_value), 0.8); } ` function createShader(type: number, source: string): WebGLShader { const shader = gl.createShader(type)! gl.shaderSource(shader, source) gl.compileShader(shader) if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { throw new Error(gl.getShaderInfoLog(shader) ?? 'Shader error') } return shader } const program = gl.createProgram()! gl.attachShader(program, createShader(gl.VERTEX_SHADER, vertexShaderSrc)) gl.attachShader(program, createShader(gl.FRAGMENT_SHADER, fragmentShaderSrc)) gl.linkProgram(program) const N = 100_000 const positions = new Float32Array(N * 2) const values = new Float32Array(N) for (let i = 0; i < N; i++) { positions[i * 2] = Math.random() * canvas.width positions[i * 2 + 1] = Math.random() * canvas.height values[i] = Math.random() } const posBuffer = gl.createBuffer() gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer) gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW) const aPosition = gl.getAttribLocation(program, 'a_position') gl.enableVertexAttribArray(aPosition) gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0) const valBuffer = gl.createBuffer() gl.bindBuffer(gl.ARRAY_BUFFER, valBuffer) gl.bufferData(gl.ARRAY_BUFFER, values, gl.STATIC_DRAW) const aValue = gl.getAttribLocation(program, 'a_value') gl.enableVertexAttribArray(aValue) gl.vertexAttribPointer(aValue, 1, gl.FLOAT, false, 0, 0) gl.useProgram(program) gl.uniform2f(gl.getUniformLocation(program, 'u_resolution'), canvas.width, canvas.height) gl.clearColor(0.05, 0.05, 0.1, 1) gl.clear(gl.COLOR_BUFFER_BIT) gl.enable(gl.BLEND) gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA) gl.drawArrays(gl.POINTS, 0, N) }, []) return <canvas ref={canvasRef} width={800} height={600} /> } 

Regl: удобная обёртка над WebGL

npm install regl npm install -D @types/regl 

import createREGL from 'regl' const regl = createREGL(canvasRef.current!) const drawParticles = regl({ vert: ` precision mediump float; attribute vec2 position; attribute float age; uniform float time; void main() { vec2 pos = position + vec2(cos(time + age), sin(time * 0.7 + age)) * 0.05; gl_Position = vec4(pos, 0, 1); gl_PointSize = 3.0; } `, frag: ` precision mediump float; void main() { gl_FragColor = vec4(0.4, 0.8, 1.0, 0.7); } `, attributes: { position: particlePositions, age: particleAges, }, uniforms: { time: regl.context('time'), }, count: PARTICLE_COUNT, primitive: 'points', }) regl.frame(({ time }) => { regl.clear({ color: [0, 0, 0.1, 1], depth: 1 }) drawParticles() }) 

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

1. Аналитика — изучаем объём и структуру данных, определяем тип визуализации
2. Проектирование — выбираем библиотеку или raw WebGL, проектируем шейдеры
3. Реализация — пишем код, интегрируем с CMS/React/Next.js
4. Тестирование — проверяем производительность на десктопе, планшете, мобильном
5. Деплой — публикуем, настраиваем CDN для текстур и данных

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

• Базовая визуализация с deck.gl (scatter plot, heatmap) — 3–4 дня
• Кастомные шейдеры и particle-системы — 7–10 дней
• Комплексная визуализация с несколькими слоями и анимацией — до 3 недель

Стоимость рассчитывается индивидуально, исходя из сложности шейдеров, объёма данных и необходимости поддержки старых браузеров.

Типичные ошибки при внедрении WebGL

• Использовать WebGL для простых графиков (до 10k точек) — избыточно, подойдёт Canvas 2D.
• Не учитывать производительность на мобильных устройствах — mid-range телефоны часто имеют слабое GPU.
• Забывать про fallback на WebGL1 для Safari <15 или старых Android.

Закажите WebGL-визуализацию — получите консультацию в течение дня. Наши инженеры с 10+ летним опытом помогут выбрать оптимальное решение и реализуют проект под ключ. Получите консультацию по вашему проекту — свяжитесь с нами для обсуждения.