Part 1: Introduction and Basics of WebGPU

Introduction to WebGPU API

What is WebGPU?

WebGPU is a modern graphics and compute API for the web that allows web applications to use the GPU for high-performance rendering and parallel computing. It’s the successor to WebGL, offering better performance, more control over the GPU, and support for advanced graphics features similar to Vulkan(Linux), Metal(MacOs), and Direct3D(Windows).

How it differs from WebGL?

What is WebGL?

WebGL (Web Graphics Library) is a JavaScript API that allows web applications to render 2D and 3D graphics using the GPU. It is based on OpenGL ES and has been widely used for web-based games, simulations, and interactive visualizations. WebGL provides direct access to the GPU but is mainly designed for rendering, making it less efficient for general-purpose GPU computations.

How WebGPU Differs from WebGL

Feature	WebGL	WebGPU
API Design	Based on OpenGL ES, an older API.	Inspired by modern APIs like Vulkan, Metal, and Direct3D 12.
Performance	Higher CPU overhead due to implicit state management.	Lower CPU overhead with explicit control over GPU resources.
Compute Capabilities	Limited compute shader support via WebGL extensions.	Native support for compute shaders, allowing advanced GPU computations.
Memory Management	Automatic memory management, less control over GPU resources.	Explicit memory management for better optimization.
Multithreading	Limited support, relies on extensions.	Better multithreading support, improving performance on modern GPUs.
Future Adoption	Still widely used but becoming outdated.	Designed as the next-generation web graphics API.

Note: WebGPU is faster, more efficient, and more flexible than WebGL, making it the future of web-based graphics and GPU computing. If you're starting a new project that requires advanced graphics or compute power, WebGPU is the better choice.

Why WebGPU is Important?

1. Better Performance and Efficiency

• WebGPU reduces CPU overhead by giving developers more control over the GPU.

• Uses explicit memory management, leading to faster rendering and smoother performance.

2. Advanced GPU Features

• Supports compute shaders, allowing complex GPU computations beyond rendering.

• Enables parallel processing, useful for AI, physics simulations, and data processing.

3. Modern API Design

• Inspired by Vulkan, Metal, and Direct3D 12, making it more powerful than WebGL.

• Provides low-level control over the GPU for better optimization.

4. Cross-Platform and Future-Proof

• Works across Windows, macOS, Linux, and mobile devices via browsers.

• Designed as the successor to WebGL, ensuring long-term support.

5. Expands Beyond Just Graphics

• Not just for 3D rendering—it can also be used for machine learning (ML), physics simulations, and scientific computing.

How WebGPU interacts with the browser and system GPU

1. Web Apps (Top Layer)

• These are the web applications running in the browser that use WebGPU for rendering or computation.
• Each app can request access to the GPU through WebGPU’s API.

2. WebGPU Layer

This layer acts as a bridge between web applications and the actual GPU.

a) Logical Devices

• When a web app wants to use the GPU, it creates a logical device to communicate with WebGPU.
• A logical device is a virtual representation of the GPU that the web app can use.

b) Adapter

• The adapter helps WebGPU find a suitable GPU on the system.
• It selects the best available GPU (integrated or discrete) for performance.
• The adapter also provides information about the GPU’s capabilities.

3. Underlying System (GPU and Drivers)

This is where WebGPU connects to the actual hardware.

a) Native GPU API

• WebGPU does not talk to the GPU directly. Instead, it communicates with a native GPU API like:
  • Vulkan (Linux, Windows, Android)
  • Direct3D 12 (Windows)
  • Metal (macOS, iOS)
• The native API translates WebGPU commands into GPU-specific instructions.

b) Driver

• The GPU driver is responsible for handling communication between the system and the actual GPU hardware.
• It optimizes and manages GPU commands to ensure smooth execution.

c) GPU (Hardware)

• Finally, the GPU processes the commands and executes rendering or computations.

Accessing a GPU Device in WebGPU

To use WebGPU, a web app needs to access a logical device (represented by a GPUDevice object). This device allows the app to interact with the GPU.

How the Process Works

1. Check WebGPU Support

• Use navigator.gpu to check if WebGPU is available in the browser.

2. Request an Adapter

• Call navigator.gpu.requestAdapter() to get an adapter (which represents a GPU).
• You can optionally request a high-performance or low-power adapter.

3. Request a Device

• Use adapter.requestDevice() to create a logical GPU device.
• You can provide optional settings (features and limits), but by default, WebGPU gives a general-purpose device.

async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU not supported.");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("Couldn't request WebGPU adapter.");
  }

  const device = await adapter.requestDevice();

  //...
}

Wrapping Up Part 1

So far, we’ve explored what WebGPU is, how it differs from WebGL, and how to access a GPU device. This is just the beginning!
What's Next in Part 2?
In the next part, we’ll dive deeper into the core WebGPU workflow, covering:

• Shaders – Writing vertex and fragment shaders
• Shader Modules – Compiling and managing shader programs
• Pipelines – Setting up rendering and compute pipelines
• Create Buffer – Sending data to the GPU efficiently
• Rendering - descriptor object as a parameter

We’ve built a solid foundation, and now it's time to bring everything together into a fully working WebGPU project. Stay tuned for Part 2, where we’ll write a complete WebGPU rendering pipeline!

See you soon in the next part! Happy coding! 🚀🎨