Clear Color - Webgpu Typing CST Test
Loading…
Clear Color — Webgpu Code
Clears the canvas with a solid color using WebGPU.
# webgpu/demo/clear_color.js
async function clearColor() {
const canvas = document.getElementById('canvas');
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const context = canvas.getContext('webgpu');
context.configure({
device: device,
format: 'bgra8unorm'
});
const commandEncoder = device.createCommandEncoder();
const textureView = context.getCurrentTexture().createView();
const renderPass = commandEncoder.beginRenderPass({
colorAttachments: [{
view: textureView,
clearValue: { r: 0, g: 0, b: 1, a: 1 },
loadOp: 'clear',
storeOp: 'store'
}]
});
renderPass.end();
device.queue.submit([commandEncoder.finish()]);
}
clearColor();Webgpu Language Guide
WebGPU is a modern, low-level graphics and compute API for the web that provides high-performance access to GPU hardware. It is the successor to WebGL, offering better performance, compute shaders, modern GPU features, and a more efficient programming model inspired by Vulkan, Metal, and Direct3D 12.
Primary Use Cases
- ▸High-performance 3D rendering in browser
- ▸GPU compute tasks (ML inference, physics, simulations)
- ▸Game engines built for WebGPU
- ▸Scientific visualization and real-time data graphics
- ▸Running ML frameworks like TensorFlow.js with WebGPU backend
Notable Features
- ▸Compute shaders support
- ▸Bind groups for efficient resource binding
- ▸Explicit pipeline model inspired by Vulkan/Metal
- ▸Async device/adapter acquisition
- ▸Cross-platform GPU abstraction layer
Origin & Creator
WebGPU was designed by the W3C GPU for the Web Community Group, with major contributions from Google, Mozilla, Apple, Intel, and the broader WebAssembly/WebGL community (2017-2024).
Industrial Note
WebGPU is rapidly being adopted for in-browser AI inference, game engines, CAD tools, simulation platforms, ML model runners, and high-performance web visualizations. It enables workloads previously only possible natively.