https://pixelscommander.com/javascript/webgpu-computations-performance-in-comparison-to-webgl/

-- Pixels Commander

[ In English, Na russkom ]
[Search              ]
 
By: Pixels Commander
30-11-2021
JavaScript, WebGL, Web applications performance
Share

  * Facebook
  * Twitter
  * Digg
  * StumbleUpon
  * Del.icio.us

WebGPU computations performance in comparison to WebGL

WebGPU - the successor of WebGL, a brand new API to utilize GPUs in
the browser. It is promised to be available in regular Chrome in Q1
2022. In comparison to WebGL, WebGPU promises better performance and
better compatibility with modern hardware, but the most recognizable
feature of WebGPU is a special API for performing computations on
GPU.

Matrices multiplication WebGPU vs WebGL

Does not WebGL have the same feature?

Yes and no. WebGL does not have a special API for computation but
still, there is a hack that makes it possible. Data is being
converted into an image, image uploaded to GPU as a texture, texture
rendered synchronously with a pixel shader that does an actual
computation. Then the result of computation we have as a set of
pixels on a <canvas> element and we have to read it synchronously
with getPixelsData then color codes to be converted back to your
data. Looks like an inefficient mess, right?

WebGL computation pipeline

How WebGPU is different?

API WebGPU provides for computations (compute shaders) is different
in the way it is easy to miss the importance of the improvements,
however, it empowers developers with absolutely new features. The way
it works is:

WebGPU computations pipeline

The differences

 1. Data uploaded to GPU as a buffer, you do not convert it to pixels
    so it is cheaper
 2. Computation is being performed asynchronously and does not block
    JS main thread (say hi to real-time post-processing and complex
    physics simulation at 60FPS)
 3. We do not need canvas element and we avoid its limitation on size
 4. We do not do expensive and synchronous getPixelsData
 5. We do not spend time converting pixels values back to data

So WebGPU's promise is that we can compute without blocking the main
thread and compute faster, but how much faster?

How do we benchmark?

As a benchmark, we use matrix multiplication which lets us scale the
complexity and amount of computations easily.

For example, 16x16 matrix multiplication requires 7936 multiplication
operations and 60x60 already gets us 428400 operations.

Sure thing we run the test in an appropriate browser which is Chrome
Canary with #unsafe-webgpu-enabled flag on.

Results

The first results were discouraging and WebGL outperformed WebGPU at
the bigger numbers:

Matrices multiplication benchmark WebGPU incorrect

Then I found that the size of a working group (number of operations
to calculate in a single batch) is set in code to be as big as the
matrix side. It works fine until the matrix side is lower than the
number of ALUs on GPU (arithmetic logical unit) which is reflected in
WebGPU API as a maximumWorkingGroupSize property. For me, it was 256.
Once the working group was set to be less or equal to 256 this is the
result we get:

Matrices multiplication WebGPU vs WebGL

This is quite impressive while is expected. WebGPU initialization and
data transfer times are remarkably lower because we do not convert
data to textures and do not read it from pixels. WebGPU performance
is significantly higher and gets to 3.5x faster compared to WebGL
while it does not block the main thread.

It is also interesting to see WebGL failing after matrix size gets
over 4096x4096 because of canvas and texture size limitations while
WebGPU is capable to perform for matrices up to 5000x5000 which
sounds not much of a difference but actually is 112552823744 more
operations to perform and 817216 more values to hold.

Small but interesting fact - both WebGL / WebGPU require some time to
warm up while JS goes full power straight away.

Conclusion

The experiment proved that WebGPU compute shaders are in practice
3.5x faster than WebGL computing with pixel shaders while having
significantly higher limits regarding the amount of data to process
also it does not block the main thread. This allows new kinds of
tasks in the browser: video and audio editing, real-time physics
simulation, and more realistic visual effects, machine learning. This
is the incomplete list of jobs to benefit from WebGPU where we can
expect the new generation of apps to appear and the boundaries of
what is possible to do on the Web significantly expanded.

Hi!

I`m front-end developer with passion for experiments and performance
optimization. As interaction designer I was hippy to work for
National Olympic Sommittee, Timur Bekmambetov, Nissan Auto etc. I`m
based in Amsterdam and believe it`s a sunrise of interactive
revolution.


Follow @PixelsCommander


Categories

  * HTML5
  * JavaScript
  * React
  * WebGL
  * iPhone
  * Android
  * One frontend
  * Interactive revolution
  * Interactive projections
  * Web applications performance
  * Social networks
  * Flash

Tags

3d alternativa android application build C# canvas compilation css
deploy development experiments eye flash flashdance flashjs game gpu
acceleration gradle html html5 image installation interactive
internet connection javascript java script js labs mask mobile
offline applications online onlinejs optimization performance png
projection react social three.js tools vvvv webgl web mobile

Web performance workshop

 

Challenging native is a full day workshop and e-book we are working
on together with Yurii Luchaninov. In recent years web technologies
became a silver bullet for UI, crossplatform development. However we
still have a lot of discussion on it pros and cons. The most critical
issue developers face creating web apps is a performance comparing to
native applications. A lot of "know how" is required in order to
produce HTML / JS application which is as fast as iOS or Android
native. This project is a short practical guide into web performance
which cover all aspects you need to know to create fast applications
and stunning interactive experiences able to challenge native
platforms.


Interested? Submit this application and we notify you when full-day
Challenging Native workshop is going to happen at your place

Archives

  * November 2021
  * October 2019
  * December 2016
  * October 2015
  * March 2015
  * January 2015
  * May 2014
  * January 2014
  * October 2013
  * September 2013
  * June 2013
  * April 2013
  * December 2012
  * May 2012
  * February 2012
  * November 2011
  * October 2011
  * July 2011
  * June 2011
  * May 2011
  * April 2011
  * December 2010

  * English
  * Russkii

(c) 2010 --Pixels Commander. All Rights Reserved. Powered by Wordpress.

Designed by Wpshower