Introduction
Hello everyone, this series from 0 to start learning WebGPU API, and gives relevant demo.
WebGPU Introduction
WebGPU equivalent DX12 / Vulkan, programmers can operate more flexibly GPU, thus greatly enhancing performance.
Why learn WebGPU
WebGPU better support for multi-threading
WebGPU support compute shader, so that programmers can take advantage of GPU optimization to achieve a lot
- WebGPU and WebGL2 difference is large, the two are not easily compatible. If you want to WebGL1 upgrade, it is best to upgrade directly to WebGPU, once and for all
WebGPU is standard, all major browsers support. Unlike WebGL2, Apple does not support directly.
Currently WebGPU Although not yet officially released, but has been more mature, but also for learning relevant Demo
WebGPU degree of perfection
Since 2017 proposed WebGPU, already after two years of development.
Currently Chrome and Safari are better supported, it has the basic functions (such as the ability to draw model pbr material, support compute shader, etc.), but also has been running in the MacOS.
Babylonjs has supported WebGPU, see WebGPU document .
But WebGPU for shader programs which use has not yet determined:
in Chrome, use version 4.5 of glsl, need third-party libraries official will convert it to binary code (SPIR-V);
in Safari, the direct use of the new language WSL , no conversion.
The former benefit is that we are familiar with glsl, learning and low cost;
the latter benefit is that the new language more powerful, better performance.
- Reference material
Implementation Status
WebGPU and WSL in Safari
WebGPU and WSL in Web Inspector
Babylonjs->WebGPU 文档
webgpu-samples for Chrome (uses GLSL via SPIR-V)
WebKit/Safari Demos (uses WSL)
gpuweb->issues
Ready development environment
Currently runs only on MacOS high WebGPU version (I had a MacOS 10.10 version, not WebGPU run! MacOS Catalina can be upgraded to run!).
For Chrome:
Download the latest Chrome Canary, and open chrome: // flags / # enable- unsafe-webgpu
For Safari:
Download the latest Safari Technology Preview, select Safari → Preferences → Advanced → Develop menu → Experimental Features → WebGPU
WebGPU learning materials
Currently learning very little information, it belongs to the early exploration stage ~
WebGPU learning Chinese data
WebGPU: An Explicit at The Web Graphics API for
the Get Started with GPU Compute ON at The Web
WebGPU API specification
This series of technology selection
Development environment
- Chrome Canary
because of the higher Chrome market occupancy rate and shader using glsl easier, so I use Chrome Canary.
- Chrome Canary
Technology stack
Javascript language
Use virgin WebGPU API
Give you any benefits?
- Learning from 0 WebGPU, familiar with the native API
- Narrow the gap with the PC the latest 3D technology (learn WebGPU, it is only with the latest generation of DX12 RTX half the difference! WebGL2 but only about DX10)
- Update mode of thinking, learning the latest design concepts (WebGPU compared WebGL quite flexible and modular, if you want to be packaged into the engine, then need some new design ideas)
Content planning
This series is divided into three parts:
first part
One by one official learning the Sample , master the basic API calls, explain the relevant concepts
the second part
Advanced learning content (such as multi-threading), and to achieve the corresponding demo
the third part
The integrated use of what they learn, simple to use compute shader ray tracing demo