Understanding the Basics: WebGPU vs Metal

For developers prioritizing cross-platform functionality and modern GPU advancements, WebGPU is the winning contender, despite its ongoing development. It offers improved performance over WebGL and minimal boilerplate code. Yet, if targeting solely Apple devices with high-performance graphical needs, Metal‘s near-direct GPU access and efficiency bring its own wealth of merits.

Key Differences Between WebGPU and Metal

• Development: WebGPU is a collaboration, led by the W3C ‘GPU for the Web’ group, including technology giants like Apple, Google, and Microsoft. Metal, however, is developed, and maintained solely by Apple Inc.
• Usage: While WebGPU enables usage of modern GPU hardware functionalities across various platforms, Metal provides near-direct GPU access specifically for Apple’s hardware, boosting efficiency and graphics performance.
• Support: WebGPU is available in Chrome 113 on ChromeOS, macOS, and Windows with plans for other platforms. Metal, conversely, only supports Apple devices.
• Compatibility: WebGPU, owing to its Vulkan base, promotes compatibility with diverse hardware. Metal, being a product of Apple, only aligns with A7 devices or later.

What Is WebGPU and Who’s It For?

A new API for graphics and machine workloads, WebGPU was developed to address the limitations of WebGL. Born from a collaboration between tech giants like Apple, Google, Mozilla, Microsoft, and Intel, this technology reflects modern GPU hardware functionalities and brings the advancements of modern APIs to the web. Being a part of the web platform, WebGPU is ideal for developers looking to enable complex visual effects and port complex algorithms onto the GPU, including those used in machine learning computations. Moreover, with a minimal boilerplate code requirement, it’s a user-friendly technology that reduces the overhead of JavaScript calls.

Pros of WebGPU

• Reflects modern GPU hardware functionalities
• Enables complex visual effects and algorithms
• Reduces overhead of JavaScript calls
• Minimal boilerplate code required
• Provides in-depth error messages for troubleshooting

Cons of WebGPU

• Still in early stages of development
• Currently disabled by default
• Compatibility determination with hardware and browser needed

What Is Metal API and Who’s It For?

Metal API, developed by Apple Inc., offers near-direct access to the graphics processing unit, promoting hardware-accelerated graphics on all Apple platforms. This technology finds its place in games and professional applications that require high-performance graphics. With its impressive ability to incorporate complex materials, enhanced graphics performance, and low CPU load, Metal API is ideal for developers working on gaming and machine learning applications on Apple’s platform. Its direct compatibility with A7 devices or newer makes it a key API for all Apple device users.

Pros of Metal API

• Provides near-direct access to the GPU
• Supports high-performance graphics and machine learning
• Relieves CPU workload
• Compatible with A7 devices or newer

Cons of Metal API

• Not compatible with all graphics APIs
• Exclusively for Apple devices

Code Examples for WebGPU & Metal

WebGPU

In this WebGPU code snippet, we’ll animate a complex, multi-color icosahedron. It’s crucial to have GPUCommandEncoder, GPURenderPipelineState, and GPURenderPassDescriptor knowledge for best understanding.

//Define Command Encoder
const gpuCommandEncoder = gpuCommandQueue.createCommandEncoder();
//Set up the render pass descriptor
let renderPassDescriptor = new GPURenderPassDescriptor();
renderPassDescriptor.colorAttachments[0].clearColor = [0.5, 1, 1, 1];
//Design render pipeline state
const renderPipelineState = device.createRenderPipelineState({
  vertexFunctionName: "vertexShader",
  fragmentFunctionName: "fragmentShader",
  colorFormats: [device.supportedTextureFormats[0]],
});
//Encoding Commands for Drawing 
gpuCommandEncoder.setRenderPipelineState(renderPipelineState);
gpuCommandEncoder.setVertexBuffer(0, vertexBuffer);
gpuCommandEncoder.drawIndexedPrimitives(indexBuffer, indexCount);
//Finish Encoding and Commit Command Buffer
const commandBuffer = gpuCommandEncoder.finishEncodingCommand();
commandBuffer.commit();

Metal

In the following Metal code snippet, we’ll render a procedurally generated galaxy. Comprehensive knowledge of MTLCommandQueue, MTLCommandBuffer, and MTLRenderPassDescriptor is advised.

//Set up command queue and command buffer
let commandQueue = device.newCommandQueue();
let commandBuffer = commandQueue!.makeCommandBuffer()!;
//Define the render pass descriptor
let renderPassDescriptor = view.currentRenderPassDescriptor!
//Create the render command encoder
let renderEncoder = commandBuffer.makeRenderCommandEncoder(descriptor: renderPassDescriptor)!
//Set the render pipeline state
renderEncoder.setRenderPipelineState(renderPipelineState);
//Set the vertex buffer
renderEncoder.setVertexBuffer(vertexBuffer, offset: 0, index: 0);
//Draw primitives
renderEncoder.drawPrimitives(type: .triangle, vertexStart: 0, vertexCount: vertices.count);
//End encoding
renderEncoder.endEncoding()
//Commit the command buffer
commandBuffer.present(view.currentDrawable!);
commandBuffer.commit();

Final Verdict: WebGPU or Metal?

Concluding, it’s clear both technologies offer their own set of unique advantages. Here’s the drill-down to serve your choice.

1. Web Developers

Given its web-native nature, WebGPU stands as a better choice. Offering advanced visual effects and addressing WebGL limitations, it brings an efficient interface with GPU and a flexible model with compute shaders. It is on the forefront of enriching user-experience of browser-based applications.

2. Machine Learning Enthusiasts

While Metal has made strides in optimizing GPU training in machine learning with TensorFlow, PyTorch, and JAX, WebGPU also packs substantial promise. For anyone looking for an avenue beside the Apple ecosystem, WebGPU with its efficient command structure seems a lucrative choice.

3. Game Developers

If your focus is gaming, particularly for iOS, Metal has clear advantages. With lower overhead, high performance upscaling, pro-level direct GPU access, and rich shading features, it delivers superior graphic rendering.

In sum, WebGPU, the browser-native API, offers extensive possibilities for web developers and is on the rise. However, for iOS-centric development, particularly games, Metal takes the lead.