尝试 WebGPU 过程中掉的一些坑

需要参考, 建议看 WebGPU Samples:
https://webgpu.github.io/webgpu-samples/samples/computeBoids

---

buffer 编码对齐问题

uniform buffer 的编码规则. 数据会按照大小对齐, 但是编码的时候

https://www.w3.org/TR/WGSL/#address-space-layout-constraints

可以试试自己加上 padding 来 buffer

https://stackoverflow.com/questions/74186801/is-there-any-way-to-enforce-a-16-byte-alignment-for-a-uniform-buffer-in-glsl

按照文档说的, 不止对 uniform buffer 是这样...

听说可以用工具做一下可视化, 但是我还没有尝试过...
https://webgpufundamentals.org/webgpu/lessons/resources/wgsl-...

---

Storage Texture, 在 compute shader 计算时会用到, 结果遇到问题, 发现也是 padding 的问题.

这个例子当中默认使用的是 vec2f 表示二维的点,
https://webgpu.github.io/webgpu-samples/samples/computeBoids#...
我需求当中的改成了 vec3f 的三维点, 结果发现数据不对, 包括 0 位也出现了数据,
突然反应过来可能是 padding 的问题. 修改以后果然, 两个 vec3f 数据之间需要有一个 padding.

---

没有 FBO 怎么办

https://www.cnblogs.com/onsummer/p/the-missing-fbo-and-rbo-in...

整体思路可以参考 blur 的做法, 至少能跑通的,

https://webgpu.github.io/webgpu-samples/samples/imageBlur#../...

整个思路是通过 Storage Buffer 和 Pipeline 自己拼接一套流程,
Storage Buffer 可以用来存储中间状态, 从而写出 ping/pong buffer 的用法.
render pipeline 相当于一种特殊的 compute pipeline, WebGPU 是比较基础的 API 可以拼出来对应功能.

---

binding 的 expectation 有的是跟 WGSL 里定义的 texture 类型定义的, 在 js 代码中看不到. 比如 multisampilsed.

---

Buffer Resize

调整 canvas.style.height 之后, canvas.height 也需要更新, 而且也要考虑 pixel ratio.
canvas context 的 getCurrentTexture 获取的 size 这时也是要改变的.

depth texture 也类似, 当窗口大小发生变化, canvas 大小发生变化, depth texture 也需要对应更新. 不然会提示大小不对应.

---

vec3f 缩写

vec3f 是 vec<f32> 的缩写, 这个还是看教程的时候发现的,
对应的 vec2f vec4f 也用.
不过 wgsl analyzer 使用的时候发现还没识别号这个缩写.

---

TODO