First introduction to WebGPU and solutions to WebGPU not supported errors

Due to the needs of the company, I started to contact WebGPU. I encountered a problem by chance, and the online search was ineffective. Later, through step-by-step judgment, I finally located the problem. I will record it here to provide solutions to other netizens who encounter this problem.

This includesWebGPU learning resources, first introduction to WebGPU, encountering and solving problems, online examplesFour parts.

WebGPU learning resources

1. Learn the API WebGPU_API .

Insert image description here

3. Basic learning of WebGPU theoretical basis .

Insert image description here

4. Online examplesWebGPU Samples .

Insert image description here

5. Comparison between WebGPU and WebGL: Comparison between WebGL and WebGPU

Based on the above learning resources, quickly understand what WebGPU is and complete the introduction to helloworld.

First introduction to WebGPU

1. What is WebGPU and why should we use WebGPU?

There is a lot of information available online, so here I will briefly explain my understanding:

For computer graphics (two-dimensional and three-dimensional), a large amount of calculations are required, and these calculations usually need to be handed over to the GPU. WebGL provides an interface for calling the GPU, making it easy to load cool effects on the Web side.

However, WebGL drives the GPU through OpenGL, which has certain limitations and cannot fully utilize the performance of the GPU, so WebGPU appeared.

The following is an introduction to WebGPU (copy）：

The WebGPU API enables web developers to use the underlying system's GPU (graphics processing unit) to perform high-performance computing and draw complex graphics that can be rendered in the browser.

WebGPU is the successor to WebGL, providing better compatibility with modern GPUs, support for more general GPU computing, faster operations, and access to more advanced GPU features.

WebGPU solves some of the problems in WebGL and provides a newer general architecture that is compatible with modern GPU APIs and will make you feel smoother. It supports graphics rendering and also has first-class support for GPGPU computing. Rendering individual objects on the CPU side is much cheaper, and it supports modern GPU rendering features such as compute-based particles and filters for post-processing such as color effects, sharpening, and depth-of-field simulation. In addition, it can handle computationally intensive tasks such as culling and skeletal animation models directly on the GPU.

In short: WebGPU, as the next generation of graphics computing, is very promising and awesome. It’s best to learn from it!

Here is an online comparison between WebGL and WebGPU: WebGL and WebGPU performance comparison

Insert image description here

2. WebGPU helloworld


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">

</head>

<body>

<script type="text/javascript">
    // 异步方法
    // 判断是否支持 WebGPU
    async function init() {
      
      
        // 是否支持 WebGPU
        if (!navigator.gpu) {
      
      
            alert("WebGPU not supported.");
            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();
        console.log(device)
        alert("WebGPU supported.");
        //...
    }
    init()
</script>
</body>

</html>