“This is the first day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

What is a WebGPU?

WebGPU is a new generation of API designed for Web platform, which exposes the underlying capabilities of GPU hardware

The current state of graphical API usage on the Web platform

  • At present, WebGPU related work is still in an orderly and fast progress
  • At present, the method of graphics acceleration in Web platform is still based on WebGL.

Why WebGPU development

Now that we have WebGL, why do we need to develop a whole new set of apis for WebGPU? Let’s start with the evolution of WebGL:

WebGL

  • WebGL is the de facto graphics standard for the Current Web platform.
  • WebGL is a set of low-level 3D graphics apis
  • WebGL’s design is very close to the OpenGL ES standard

But with the development of computer science, people’s pursuit of performance is endless, and gradually WebGL began to show some problems.

WebGL is too old

We can see that the latest WebGL2.0 corresponds to OpenGL ES3.0, while OpenGL ES3.0 corresponds to desktop OpenGL 3.2 (2010). Now it is 2022, but we are still using the standard of ten years ago. As a result, the power of many modern Gpus cannot be exploited.

Also, OpenGL has a lot of historical baggage. Since prior to the OpenGL2.0 era, gpus had almost no programmable capabilities and were almost fixed rendering pipelines. So OpenGL is designed to be a large state machine. All states are global and the same state is used for each drawCall.

After OpenGL2.0, the design of global state was retained despite the advent of programmable rendering pipelines.

WebGL is struggling to move forward

  • Apple only supports OpenGL4.1 and OpenGL ES3.0, and does not support computing shaders
  • Implementing WebGL on Metal takes a lot of work (which is why WebGL2 is only now being supported in Safari 15)

Gradually, vendors began to abandon OpenGL, and the latest features of the GPU were no longer supported on OpenGL.

The advantage of WebGPU

The design of WebGPU is easier to be implemented by D3D12 (D3D12 [Direct3D 12] is a graphics API developed by Microsoft), Metal(Apple), Vulkan(a cross-platform graphics API developed by Khronos Group), and has the following advantages:

Reduce CPU overhead

As can be seen from the above figure, if WebGL is an API that directly calls OpenGL/OpenGL ES, the cost of implementing WebGL is relatively low. However, due to the design problems of OpenGL, the driver of OpenGL requires a series of error detection. We want error checking to be done only in the development phase; it is not necessary in the actual run time. So this is going to increase the CPU overhead. WebGPU does not require a driver to do these error checks.

In addition, if WebGL is built on a non-OpengL platform, such as D3D12, there is an additional set of applications that need to be implemented to accommodate this, resulting in increased CPU overhead.

In contrast to WebGL’s global state setting, WebGPU uses PipelineStateObject (PipelineStateObject) to set information in the rendering pipeline. This makes it easy to switch states between render pipelines at run time.

Multithreading support

Another powerful feature of webGpus is the ability to support multithreading. WebGL cannot support multithreading due to the global state setting, which executes immediately once the state is set. The secret that WebGPU can support multithreading lies in that the execution of WebGPU is divided into two stages: “record command” and “submit command”.

  • The recording command is a pure CPU process that can record separately in multiple threads and then submit it to a “queue”
  • The submission command is based on the previously recorded commands, in accordance with the recording sequence, the GPU really execute the relevant commands in turn.

Web Workers support the above features.

Development status of WebGPU

WebGPU is still under development, you can try WebGPU in Chrome Canary by turning on Flags.

But the WebGPU API is still unstable and evolving all the time.

The development of WebGPU

Browser support

  1. The open source projectgfx-rsComputing is used as a WebGPU implementation in Firefox.
  2. Apple is also working on implementing a WebGPU
  3. Microsoft Edge is based on Chromium, but does not yet support WebGpus

3D development framework support

  1. Babylon. Js computing supports WebGPU in version 5.0
  2. Three.js is already implementing a back-end renderer for WebGPU

conclusion

Well, that’s all for WebGPU today. If you found this article useful, don’t forget to give it a thumbs up. Your likes are the best encouragement to the author!

Refer to the article

WebGPU, next generation Web graphics technology – YouTube