Dec 03, 2021 06:00:00

How much performance will be improved with Chrome's new API 'WebGPU'?

Google has announced that Chrome, which will be available in the first quarter of 2022, will update the

JavaScript API used to render computer graphics from existing WebGL to its successor, WebGPU. Pixels Commander, a news blog focused on front-end development, explains the 'compute shader' that performs calculations on the GPU, which is the biggest feature of the new WebGPU.

WebGPU computations performance in comparison to WebGL | Pixels Commander
https://pixelscommander.com/javascript/webgpu-computations-performance-in-comparison-to-webgl/

In the past, when using the 3D graphic function on the browser, ' WebGL ' was adopted in most cases. However, the 'WebGPU' scheduled to be implemented in the first quarter of 2022 is equipped with a function called 'Compute Shader' that draws out the performance of the GPU, which is improving year by year, and performs calculations on the GPU.

According to Pixels Commander, traditional WebGL does not have a calculation API equivalent to a compute shader, and if you want to perform calculations on a GPU, you can 'convert the data to an image once and then actually do it' as follows. The calculation is performed while rendering in synchronization with the pixel shader in charge of the calculation, and the calculation result output as pixels on the canvas element is converted to data again. '

On the other hand, WebGPU uploads data as a buffer to the GPU, performs calculations, and then outputs it as a buffer. Furthermore, the calculation itself is executed asynchronously, it does not block the main thread of JavaScript, it does not go through the canvas element unlike WebGL, and there is no process of converting pixels to data.

Below is the result of Pixels Commander benchmarking WebGL and WebGPU on Chrome Canary for developers using matrix multiplication that can easily adjust the complexity and amount of computation. The horizontal axis shows the size of the matrix, and the vertical axis shows the number of seconds taken for processing. The smaller the value of the Y coordinate, the shorter the processing time = excellent. In the first experiment, WebGPU (red) outperformed WebGL (blue) when the size of the matrix was small, but WebGPU was superior when the size of the matrix was large.

However, according to the investigation of Pixels Commander, the above result has a limit on the number of operations calculated in one batch processing, and if the number of operations does not fall under this limit, the following result was obtained. That.

Regarding the second result, Pixels Commander commented, 'WebGPU was 3.5 times faster than WebGL.' Also, WebGL will fail in the calculation if the matrix size is 4096 x 4096 or more, but WebGPU can support up to 5000 x 5000.