Why WebGL Is Fading and How WebGPU Is Shaping the Future of Web AI
This article traces WebGL's rise and decline, explains WebGPU's origins, compares their capabilities, provides hands‑on code examples, and shows how WebGPU's compute‑first design unlocks high‑performance Web AI applications.
1. Introduction
As internet technologies accelerate, the web has evolved from simple text and images to rich, interactive applications. WebGL introduced 3‑D graphics to browsers, but its limitations raise questions about its future and whether WebGPU can open new possibilities for AI on the web.
2. The Turbulent Fate of WebGL
2.1 WebGL 1.0
In 2006, Vladimir Vukićević built Canvas3D, a prototype of OpenGL on the HTML Canvas element. Mozilla and other browser vendors adopted the idea, leading to the official WebGL 1.0 specification in 2011.
2.2 WebGL 2.0
After recognizing the need for improvements, the WebGL working group released WebGL 2.0 in 2017, nearly six years after the first version. Chrome and Firefox supported it immediately, while Apple delayed support until September 2021, causing a missed decade of momentum.
2.3 OpenGL Legacy
WebGL inherits its API from OpenGL ES, a Khronos‑maintained graphics standard. Early Apple devices, backed by Steve Jobs, used OpenGL ES, so WebGL initially enjoyed strong Apple support. After Jobs’ death, Apple abandoned OpenGL for its own Metal API, and Khronos shifted focus to Vulkan, leaving OpenGL largely deprecated on modern operating systems.
In practice, most WebGL code is not executed directly by OpenGL ES; browsers translate it via the ANGLE library to native APIs (DirectX on Windows, Metal on macOS, etc.).
3. WebGPU: The Future Star of Web Graphics
3.1 Birth of WebGPU
WebGPU emerged to address WebGL’s shortcomings. It began as Google’s 2016 “WebGL Next” proposal, later joined by Mozilla, Apple, and Opera. The name “WebGPU” was coined by Apple, and the specification was eventually adopted by the W3C.
3.2 WebGPU vs WebGL
Precise graphics API WebGPU exposes the full GPU command set, allowing developers to control the hardware directly rather than using an opaque canvas context.
Higher design standards WebGPU targets modern native graphics APIs such as Vulkan, Metal, and Direct3D 12, instead of falling back to older system APIs.
GPU Compute Shader first‑class support WebGPU includes native compute‑shader capabilities, whereas WebGL requires experimental extensions for similar functionality.
Standard shader language (WGSL) WebGPU introduces WGSL, a unified, web‑focused shading language that avoids the fragmentation of GLSL across vendors.
Asynchronous API Commands are queued in command buffers, freeing the JavaScript main thread while the GPU processes work.
Performance comparison Benchmarks show WebGL’s CPU time can be roughly 240 × higher than WebGPU for the same rendering workload.
3.3 Getting Started with WebGPU
Enable WebGPU in Chrome (flags → “Unsafe WebGPU” → Enabled) and verify support with console.log(navigator.gpu). A minimal “Hello World” demo creates an adapter, requests a device, configures a canvas context, builds a render pipeline, and draws a red triangle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebGPU Demo</title>
</head>
<body>
<canvas id="webgpu-canvas" width="640" height="480"></canvas>
<script>
if (!navigator.gpu) {
document.body.innerText = 'WebGPU is not supported.';
throw new Error('WebGPU not supported');
}
async function initWebGPU() {
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const canvas = document.getElementById('webgpu-canvas');
const context = canvas.getContext('webgpu');
const format = 'bgra8unorm';
context.configure({device, format});
const commandEncoder = device.createCommandEncoder();
const renderPassDescriptor = {
colorAttachments: [{
view: context.getCurrentTexture().createView(),
clearValue: [0, 0, 0, 1],
loadOp: 'clear',
storeOp: 'store',
}],
};
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
const pipeline = device.createRenderPipeline({
layout: 'auto',
vertex: {module: device.createShaderModule({code: `@vertex fn main(@builtin(vertex_index) vertexIndex: u32) -> @builtin(position) vec4<f32> { var pos = array<vec2<f32>, 3>(vec2<f32>(0.0, 0.5), vec2<f32>(-0.5, -0.5), vec2<f32>(0.5, -0.5)); return vec4<f32>(pos[vertexIndex], 0.0, 1.0); }`})},
fragment: {module: device.createShaderModule({code: `@fragment fn main() -> @location(0) vec4<f32> { return vec4<f32>(1.0, 0.0, 0.0, 1.0); }`}), targets: [{format}]},
primitive: {topology: 'triangle-list'},
});
passEncoder.setPipeline(pipeline);
passEncoder.draw(3, 1, 0, 0);
passEncoder.end();
device.queue.submit([commandEncoder.finish()]);
}
initWebGPU();
</script>
</body>
</html>3.4 Basic Programming Model
The typical workflow is: create an adapter, request a device, obtain a canvas context, configure the format, create a command encoder, define a render pass, build a render pipeline (vertex & fragment shaders), issue draw calls, and finally submit the command buffer.
3.5 Shader Examples
@vertex
fn main(@builtin(vertex_index) vertexIndex: u32) -> @builtin(position) vec4<f32> {
var pos = array<vec2<f32>, 3>(
vec2<f32>(0.0, 0.5),
vec2<f32>(-0.5, -0.5),
vec2<f32>(0.5, -0.5)
);
return vec4<f32>(pos[vertexIndex], 0.0, 1.0);
}@fragment
fn main() -> @location(0) vec4<f32> {
return vec4<f32>(1.0, 0.0, 0.0, 1.0);
}4. Towards a Web AI Era
4.1 AI Client Trend
Running large models on edge devices reduces latency, saves bandwidth, improves data privacy, and enables personalized experiences. Apple’s MM1 chip exemplifies the move toward on‑device inference for voice assistants, translation, and other real‑time tasks.
4.2 WebGPU Empowering Web AI
WebGL’s graphics‑first design hampers machine‑learning workloads. WebGPU’s compute‑first API and unified memory model give TensorFlow.js >100× speedup and allow projects like WebLLM to run large language models directly in the browser.
4.3 Running WebLLM with WebGPU
WebLLM executes open‑source LLMs in the browser. Because model files exceed Chrome’s release‑version cache limits, developers must use Chrome Canary and allow the initial download to complete before subsequent runs are fast.
5. Conclusion
WebGPU resolves many of WebGL’s shortcomings by providing a precise, asynchronous, compute‑ready graphics API, paving the way for high‑performance Web AI and next‑generation interactive experiences.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
MoonWebTeam
Official account of MoonWebTeam. All members are former front‑end engineers from Tencent, and the account shares valuable team tech insights, reflections, and other information.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.