With that in mind, the difference between “WebGPU Spec API” and “graphics” and “real-time rendering technology” is still worth mentioning.

This series of blog posts is a partial interpretation of the “WebGPU Spec API” and may not be completely accurate in terms of concept or details. It’s just, I like the crab, even though it’s a little snaggy.

This is not a tutorial, can only be the WebGPU release dawn of standard learning and self-induction, I hope to help you, there are conceptual mistakes are inevitable.

WebGPU interface, object type, how to combine, and its logic of calling GPU are deeply inspired by D3D12, Metal, Vulkan and other modern graphics development technologies, which have more or less their shadow. However, this is not to say that you can write awesome renderers, 3D editors, and general computing tools if you know WebGPU interfaces and object documents well, and know how to combine objects and transfer data. It still needs the knowledge of other fields to assist in the completion, which also shows that WebGPU is just an API.

How skilled a developer is in using WebGPU only shows how familiar he is with the industry, not necessarily how to carve flowers with tools.

To be honest, WebGPU, like WebGL, has a threshold for some beginners, and WebGPU seems to have a higher threshold. If you add in the control of real-time rendering technology and the understanding of lighting knowledge, it is even more difficult. This can persuade many people, and there are fewer graphics programming technicians.

What is WebGPU

A graphics standard implemented primarily in JavaScript programming on the Web browser side, but also in other languages (such as Rust’s Wgpu). In this case, the application development is mainly on the Web side, without special cases, it refers to the application development on the Web browser side.

It’s often compared to WebGL, and some people say it’s the successor to WebGL, which I don’t think is quite the full story.

The origin of different

WebGL’s father is OpenGL, the shader language GLSL inherits from OpenGL; WebGPU’s father is Metal, D3D12 and Vulkan. The standard is promoted by Apple, Google, Mozilla and Konus Group (OpenGL is also one of the specifications of Konus Group), and its shader language WGSL is also newly designed.

Different design concepts

WebGL is a step by step API, and with the native API, every step of rendering needs to be adjusted precisely and sequentially, which means asynchronous programming can be cumbersome.

WebGPU packs data in advance, designs the calculation process, agrees the input and output, and performs the calculation only after the last coding submission. This kind of thinking with “design in advance” improves the data access efficiency of GPU and reduces the process from CPU to GPU.

It’s a bit like cooking, WebGL is a bit like grabbing spices and ingredients for everything and having to wash the pan halfway through making the next dish. WebGPU stews soup in a pressure cooker while cooking, and carefully prepares the proportion of ingredients and the order of cooking at each step.

Functional differences

Even with the advent of version2, WebGL’s support for general-purpose computing is still poor, and WebGL’s main battleground is still drawing.

WebGPU was designed in the womb and has two main functions: drawing and general-purpose computing.

On the drawing side, however, at small volumes there is little difference, and WebGL is even faster to write.

WebGL is bad?

If you can’t wrap it all and just use the native API, then WebGL will be faster to write even in small scenarios, and the performance won’t make a difference.

If ThreeJs and BabylonJs keep the same encapsulation but use WebGPU at the bottom, it can not only improve performance in large scenes, but also have new features that WebGPU has but WebGL does not. It can even be extended to general-purpose computing interfaces, which developers who use application-level libraries can benefit from.

So do we have to wait for these libraries to be packaged? No, it’s good to be familiar with the underlying API.

There is no absolute, only match.

In the long run, WebGpus will definitely take the lead in general graphics technology at the front end. WebGL will take a back seat and completely replace webGpus is unlikely.

The article directories

  • WebGPU type convention WebIDL

Basic Concepts

  • WebGPU Specification 01 Specification Basics
  • WebGPU Specification 02 Object Initialization

Data Resources section

  • WebGPU Spec 03 Cache objects
  • WebGPU Specification Part 04 Textures
  • WebGPU Specification Part 05 Sampler
  • WebGPU Specification 06 Resource and Group Binding

Render scheduling section

  • WebGPU Specification 07 Shader module
  • WebGPU Specification Part 08 Pipeline
  • WebGPU Specification 09 Channels
  • WebGPU Specification Part 10 Instruction encoding and queuing
  • WebGPU Spec 11 Canvas Context

Additional information

  • WebGPU Supplement VertexBuffer
  • WebGPU Add-on Uniform

Volume II

  • Before sudden death.

Work after

Writing this series is all based on passion, I also found WebGPU and WGSL close connection.

I’m exhausted from writing this series, and I’m going to take my time tinkering with the statements and learning other bits and pieces of the specification, which will be released in volume two.

I’ve had a quick look at WGSL, but I don’t plan on writing anything any time soon until WebGPU is officially available in the browser.

Copyright and content notice

Just keep my name. We can learn and progress together.

There will certainly be mistakes and omissions, meaning not free, I hope to point out.