Understanding WebGL, Its Frameworks, and Performance Optimization Strategies

1. What is WebGL

WebGL (Web Graphics Library) is a JavaScript API that renders high‑performance interactive 3D and 2D graphics in any compatible web browser without plugins, using an API that mirrors OpenGL ES 2.0 and operates inside an <canvas> element. Essence: a JavaScript API for creating 2D/3D graphics on the web.

2. What WebGL Can Do

2D Frameworks/Engines

PIXI.js – demo . A ultra‑fast HTML5 2D rendering engine that leverages WebGL for hardware acceleration while abstracting away low‑level WebGL details.

Phaser.js – demo . An open‑source desktop and mobile HTML5 2D game framework supporting JavaScript and TypeScript.

two.js – demo . A 2D drawing API for modern browsers that can render to SVG, Canvas, or WebGL.

3D Frameworks/Engines

Three.js – demo . The most popular lightweight WebGL library, often used as a foundation for other libraries.

Babylon.js – demo . A JavaScript framework for building 3D games with HTML5 and WebGL.

Cesium.js – demo . An open‑source JavaScript 3D mapping framework that uses WebGL for visualizing digital earth, data visualizations, and virtual scenes.

3. Large‑Scene Case Studies

Scene Classification

GIS main scene – demo

3D indoor roaming scene – demo

2D indoor editing scene – demo

Pain Points of Each Scene

GIS Main Scene

Out‑of‑date GIS data leads to large data volumes that must be refreshed.

High visual‑effect requirements (lighting, shadows, reflections) demand heavy processing of the central model.

Real‑time weather and unified dashboards require massive data integration.

3D Indoor Roaming Scene

1:1 accurate reconstruction demands high data precision and extra visual effects.

IOT/IBMS data integration for real‑time status display and control.

2D Indoor Editing Scene

Numerous circular, sector, and other complex shapes generate many triangles.

WebGL basic primitives are points, lines, and triangles; complex shapes are built from triangles.

Editing operations (split, add, measure, merge, auxiliary lines) involve heavy collision and snapping calculations.

Many component types require different rendering and interaction logic.

Performance Issue Summary

Large model data and numerous external data requests cause slow loading.

Excessive fragment processing and computation.

Too many draw‑call invocations.

Complex scenes with excessive triangle counts.

Node snapping and label avoidance calculations impact performance.

4. Solutions

1. Custom GeoJSON Structure and Big‑Data Compression

GeoJSON is an open standard for encoding geographic data as JSON. It uses WGS‑84 coordinates and decimal degrees.

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": { "type": "Point", "coordinates": [102.0, 0.5] },
      "properties": { "prop0": "value0" }
    },
    {
      "type": "Feature",
      "geometry": { "type": "LineString", "coordinates": [ [102.0,0.0],[103.0,1.0],[104.0,0.0],[105.0,1.0] ] },
      "properties": { "prop0": "value0", "prop1": 0.0 }
    },
    {
      "type": "Feature",
      "geometry": { "type": "Polygon", "coordinates": [ [[100.0,0.0],[101.0,0.0],[101.0,1.0],[100.0,1.0],[100.0,0.0]] ] },
      "properties": { "prop0": "value0", "prop1": { "this": "that" } }
    }
    ...
  ]
}

Each floor's GeoJSON can be ~4 MB, causing half of the page load time to be spent on data transfer.

Idea

Inspired by GZip → Deflate → LZ77 + Huffman.

LZ77 and LZ78 are dictionary‑based lossless compression algorithms introduced in 1977‑78. LZ77 uses a sliding window to replace repeated substrings with (distance, length) pairs.

Example:

Original data: https://www.bytedance.com https://sso.bytedance.com After LZ77 encoding: https://www.bytedance.com (26,8)sso(26,14) (26,8) means the repeated block is 8 characters long and starts 26 characters before the current position.

Because the (distance, length) pair is smaller than the original substring, the file is compressed.

Huffman Coding

Huffman coding is an entropy‑coding algorithm that assigns shorter bit strings to more frequent symbols.

Character

Space

a

e

f

h

i

m

n

s

t

l

o

p

r

u

x

Frequency

7

4

4

3

2

2

2

2

2

2

1

1

1

1

1

1

Code

111

010

000

1101

1010

1000

0111

0010

1011

0110

11001

00110

10011

11000

00111

10010

By building a Huffman tree based on symbol frequencies, we replace each symbol with its variable‑length code, store the frequency table in the compressed file, and output the encoded bitstream.

Optimization Before/After

Before: ~4 MB After: ~800 KB

2. Excessive Fragment Processing and Computation

Fragment‑Processing Optimization (Reduce Fragment Count)

Control draw order: render opaque objects front‑to‑back to minimise overdraw; render transparent objects after opaque ones.

Beware of transparent objects: they disable depth‑write and can invalidate overdraw optimisations.

Approach: sort opaque geometry by depth, draw them first, then draw transparent geometry with proper blending.

Reduce Fragment Calculation

Replace real‑time lighting and shadows with pre‑computed light‑maps.

3. Too Many Draw Calls

Use Batching

Group objects that share the same material into a single draw call. For different materials, merge textures into an atlas and use per‑vertex UV offsets. Instanced drawing in WebGL achieves this.

WebGL 2.0 instanced drawing:

gl.drawArraysInstanced(mode, first, count, instanceCount);
gl.drawElementsInstanced(mode, count, type, offset, instanceCount);

Adjust instance positions:

gl.vertexAttribDivisor(index, divisor);

WebGL 1.0 extension:

var ext = gl.getExtension('ANGLE_instanced_arrays');
ext.drawArraysInstancedANGLE();
ext.drawElementsInstancedANGLE();

In Three.js use InstancedMesh or InstancedGeometry .

Mesh Merging

Combining many small meshes into a single large mesh reduces draw‑call count dramatically.

Example merging 20 000 cubes:

var geometry = new THREE.Geometry();
for (var i = 0; i < 20000; i++) {
  var cube = addCube(); // create cube
  cube.updateMatrix();
  geometry.merge(cube.geometry, cube.matrix); // merge mesh
}
scene.add(new THREE.Mesh(geometry, cubeMaterial));

Pros and Cons of Grouping vs Merging

Pros: No performance loss; a single mesh renders much faster.

Cons: Individual object control (move/rotate/scale) is lost after merging.

4. Too Many Complex Triangles

Geometry Optimization

Reduce triangle count with artist assistance. Vertex splitting occurs for separate UVs or smoothing groups; each unique attribute combination requires a distinct vertex.

LOD (Level‑of‑Detail) Technique

Three.js provides LOD support: distant objects use lower‑detail meshes to improve performance.

Face Culling

Enable back‑face culling to discard triangles facing away from the camera, saving fragment‑shader work.

gl.enable(gl.CULL_FACE);
gl.cullFace(gl.FRONT_AND_BACK);

5. Node Snapping and Label Avoidance Calculations

Use Web Workers for Heavy Computation

Web Workers run scripts in background threads, allowing intensive calculations without blocking the UI.

// filter-sprites-worker.js
onmessage = function(e) {
  console.log('Message received from main script');
  var workerResult = handleFilterSprites(e.data); // process avoidance
  console.log('Posting message back to main script');
  postMessage(workerResult);
};

class view3D {
  constructor() {
    this.initView();
    this.initEvents();
    this.initWorkers();
  }
  initView() { /* ... */ }
  initEvents() { /* ... */ }
  cameraChange() { this.autoFiterSprites(); }
  initWorkers() {
    this.calcWorker = new Worker('filter-sprites-worker.js');
    this.calcWorker.onmessage = this.onmessage;
  }
  onmessage(e) { console.log(e, 'Message received from worker'); }
  autoFiterSprites() { this.calcWorker.postMessage([spritesGruops, this.camera]); }
  disposed() { this.removeEvents(); this.calcWorker.terminate(); }
}

Pros and Cons of Using Workers

Pros: Main thread stays responsive while heavy tasks run in parallel; results are returned via messages.

Cons: Workers consume resources; they should be terminated when no longer needed.

5. Optimization Before/After Comparison

Before

After

Data Size

~4 MB

~800 KB

Page Load Time

8 s

3 s

User Experience

Noticeable stutter during node snapping

Smooth interaction, improved UX

6. WebGL Summary

WebGL opens a new door for web graphics developers; browsers can render impressive 3D effects without plugins.

For front‑end developers, WebGL has a low entry barrier thanks to abundant frameworks and engines.

Advanced WebGL work requires knowledge of real‑time rendering, graphics theory, and computational geometry.

Current market situation:

Companies find it hard to hire expert WebGL developers; recruitment often relies on internal referrals.

Few companies focus on WebGL, but the number is growing.

WebGL developer salaries are notably high.

7. WebGPU

What is WebGPU

WebGPU is a browser‑based graphics API that abstracts modern native APIs (DirectX 12, Vulkan, Metal) and exposes more GPU capabilities to web developers. It is not a continuation of WebGL nor an OpenGL counterpart; it is a brand‑new, next‑generation web graphics API.

Advantages of WebGPU

Better multithreading support.

Compute‑shader capability.

Will become a standard supported by all major browsers.

…

Trying WebGPU

Although not officially released, WebGPU is mature enough for learning demos.

For Chrome

Download Chrome Canary: link

Enable the flag at chrome://flags/#enable-unsafe-webgpu

For Safari

Download Safari Technology Preview: link

Enable WebGPU via Safari → Preferences → Advanced → Develop menu → Experimental Features → WebGPU

Future of WebGPU

The future of WebGPU depends on the evolution of both web and native ecosystems, especially in the context of the metaverse. Decisions about whether to implement 3D scenes via the browser or native desktop will vary across companies and projects. While the outlook for WebGPU is promising, market adoption will be shaped by existing ecosystem constraints.