Orillusion

例子
1.https://wonderlandengine.com/downloads/
2.figma

另外 wasm前身asm.js，figma突破性地用了这项技术。

For my platform:
CPU: Intel i5 7200U
Mem: 8gb
GPU: Intel UHD 620
OS: Win10
Chrome: 100.0.4896.60（正式版本） （64 位）

Chrome
WebGL 20~ 70ms
writeBuffer 120~130 ms
mapAsync/unmap 70~90 ms

截图：

1f59bacf-8720-4aa4-9de1-e2e2d700d416-image.png

92a57132-356f-4632-b8cb-8e32630dbf35-image.png

我的平台运行WebGL绘制速度不稳定，也可能是我的电脑配置低影响的，不过通过对比，WebGPU确实比GL慢许多，兴许底层优化不够好么? 看来WebGPU的性能值得优化提升！

@webgpu 又看了看备注，那段改成“WebGL 诞生之初对压缩纹理的支持不太好，以致于后来用 extension 的方式加载压缩纹理让开发者有点不好受。现在 WebGPU 原生就支持，所以 WebGPU 在这方面还是考虑了历史经验的。”吧

做过羊肉汤吗？GPUBindGroup 就是那包羊肉辅料，GPUBindGroupLayout 就是羊肉辅料的配方表。
这么比喻有点不妥，其实 bindGroup 主要负责传递到管线的资源的绑定，而 layout 对象是告诉管线进来的资源长啥样（资源的元数据）。

@shuangliu 感谢回复👍

@shuangliu 明白了，感谢您的回复👍

@optics
可以参考这篇文章
https://thebookofshaders.com/10/?lan=ch

我好像明白了，0，1是建立着色器和GPU缓冲区的一种方式代号，把缓冲区里面的顶点数据和颜色数据引用到着色器里面，联系的方式是buffers里的shaderLocation：0 和着色器里的[[location(0)]],因为我在main文件中创建顶点和颜色数据；
因此在最后的渲染管道中，我需要读取顶点数据和颜色数据的GPUBuffers时，同样也需要进行插槽(通俗讲：一个属性代指一个有序数字)的指向，确保缓冲区内的数据于着色器保持同步进行渲染。

把顶点坐标和颜色数据放在缓冲区写，是因为main.ts是typescript写成的，有代码提示，相比文本的着色器，调试起来更方便。

0b4036c9-5928-4dc3-aaf6-efba13ed146d-image.png

a490cedb-9040-40aa-a2a4-6b9cdc0bfb74-image.png

af509abe-9493-4a6b-ad7a-6d8d7cf3df50-image.png