The cube on top is WebGPU, and the cube on the bottom of this post is WebGL. And the video is a side-by-side comparison if you don't have WebGPU support. As expected is there no differences in their output. But it is two different graphic libraries. Where WebGPU was the one that needed the most code. But then WebGPU can utilize more of the graphic card than WebGL can.
WebGPU has more in common with the libraries Metal, Vulcan, and DirectX 12 than WebGL. And it looks like it will be the successor of WebGL. Of course, I stumbled over it right after starting to learn WebGL. So now I am not sure which I will spend the most time on. WebGPU is pretty young and is still only an experimental feature in some web browsers. So actually, you probably do not see the WebGPU that I have embedded in this post. And for the moment, even if you have support, there is no guarantee that you will see the cube.
I have in this post followed examples from WebKit and have only got them to run in Safari. Other examples I have looked at have only run in a different browser. That includes the one in WebGPU's GitHub. Hopes it is because the WebKit examples do not use the same shader language. I probably have to swap languages since it looks like WGSL will win the battle and not WHLSL.
Now was the plan to go through some parts of the code and highlighting the differences. But surprise, I need to work more with both libraries first. So maybe another day.