WebGL Visualization: Shaders, Particles, and Optimization

A visitor opens a page with a map, and the browser starts to lag: scrolling jerks, tooltips appear after a second. If you've encountered this — the data is too large for SVG or Canvas 2D. WebGL solves this problem. It renders hundreds of thousands of points in a single draw call, using the client's GPU. With 500,000+ points, Canvas 2D drops to 3 fps, while WebGL maintains 60 fps. This is not just an improvement. It's an ability to create real-time dashboards that were previously impossible. Typical project cost ranges from $2,000 to $10,000 depending on complexity.

Once we worked on a geodata visualization project for a logistics company. They had 800k points with coordinates and weights. Canvas 2D delivered 5 frames per second. We rewrote everything in WebGL — got stable 60 fps. The client saved on hardware and accelerated dashboard loading by 12 times. The client saved over $12,000 annually on hardware upgrades.

We specialize in WebGL visualizations for over 10 years, guaranteeing stable 60 fps on target devices. Our certified engineers ensure top quality. During this time, we've implemented dozens of projects: from maps with millions of objects to animated particle effects. Our experience ensures that visualization will run smoothly on any device — from desktop to mid-range mobile.

How WebGL delivers 60 fps on large data

WebGL uses the GPU and minimizes the number of draw calls. Unlike Canvas 2D, which draws each point individually, WebGL sends the entire data array in one call. This reduces CPU overhead and allows achieving 60 fps even with 1 million points. Key factors: using float buffers, avoiding redundant uniforms, and proper blending configuration. According to the WebGL API, each draw call can process up to 2^32 vertices, providing a huge performance margin. For an efficient WebGL visualization, combine deck.gl with custom shaders for optimal performance.

When WebGL is needed

• Scatter plot with 500,000+ points (financial data, geospatial)
• Particle systems: interactive backgrounds, physical process visualizations
• Real-time heatmaps (stock trading data, click heatmaps)
• Procedural animations (Perlin noise, mathematical surfaces)
• Image processing via shaders (filters, effects)

For standard charts (100–10,000 points), D3.js or Recharts are sufficient.

Comparison of WebGL, Canvas 2D, and SVG for large data

WebGL is 10x faster than Canvas 2D at 500k points — that's the difference between 60 fps and 3 fps. The choice depends on data volume and visualization requirements.

Comparison of popular WebGL libraries

Choosing between deck.gl and custom shaders

For geospatial data (maps, scatter plots, heatmaps) we use deck.gl — a library from Uber optimized for large datasets. It provides ready-made Layer components (ScatterplotLayer, HeatmapLayer, ColumnLayer) and supports WebGL2. For custom visualizations (particle systems, procedural graphics) we write shaders directly or via the regl wrapper.

deck.gl: visualizing geospatial data

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>Value:</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 shaders directly: 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: convenient wrapper over 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() }) 

What's included

• Data analysis and selection of appropriate technology (deck.gl, raw WebGL, regl)
• Implementation of visualization with performance considerations (async loading, LOD)
• Optimization for 60 fps on mid-range mobile devices
• Writing custom shaders if needed
• Documentation for integration and use
• Training the client's team on working with the code
• Free support for 14 days after delivery

Work process

1. Analytics — we study data volume and structure, determine the type of visualization
2. Design — choose a library or raw WebGL, design shaders
3. Implementation — write code, integrate with CMS/React/Next.js
4. Testing — check performance on desktop, tablet, mobile
5. Deployment — publish, set up CDN for textures and data

Estimated timelines

• Basic visualization with deck.gl (scatter plot, heatmap) — 3–4 days
• Custom shaders and particle systems — 7–10 days
• Complex visualization with multiple layers and animation — up to 3 weeks

Pricing is calculated individually, based on shader complexity, data volume, and need for old browser support.

Typical mistakes when implementing WebGL

• Using WebGL for simple charts (up to 10k points) — overkill, Canvas 2D will do.
• Not considering performance on mobile devices — mid-range phones often have weak GPUs.
• Forgetting fallback to WebGL1 for Safari <15 or old Android.

Order a WebGL visualization — get a consultation within a day. Our engineers with 10+ years of experience will help you choose the optimal solution and implement the project turnkey. Get a consultation on your project — contact us to discuss.