如何在WebGL2.0模拟Compute Shader功能 - 问题详情 - 创脉思

解读

面试官抛出该题，核心想验证三件事：

你对WebGL2.0 能力上限是否清楚（无 Compute Shader、无 SSBO、无原子操作）；
能否把GPU 并行思维迁移到“伪计算管线”，用 Vertex/Fragment Shader 做 GPGPU；
是否具备Unity WebGL 工程落地经验，能把“伪计算”结果喂回渲染或逻辑，且兼顾主线程阻塞、精度、兼容性等国产浏览器暗坑。
答得太浅（只说“用 RenderTexture 凑合”）会被追问精度、同步、回读细节；答得太偏（直接搬 WebGPU）会被判跑题。

知识点

WebGL2.0 特性与限制：支持 Transform Feedback、浮点纹理、MRT、RGBA32F，但无 Compute Shader、无原子计数器、无共享内存。
GPGPU 经典套路：Vertex Shader 做“一顶点一数据线程”，Fragment Shader 做“一像素一数据线程”，用双缓冲 Ping-Pong RT 避免读写冲突。
Unity 侧封装：
- 创建 RenderTexture(EnableRandomWrite=false)，格式 RGBAFloat，filterMode=Point，wrapMode=Clamp；
- 用 Blit 或 CommandBuffer.DrawMesh 把数据纹理喂给材质；
- 结果回读需异步 AsyncGPUReadback，否则主线程会卡 16 ms 以上，低端国产安卓 WebView 直接掉帧。
精度与带宽：WebGL2.0 浮点纹理单通道 32 bit，但部分国产浏览器（如微信 X5 内核）默认关闭 OES_texture_float_linear，需强制关闭滤波并做手动双线性。
线程组模拟：把 N 个数据拆成 M×M 纹理，像素坐标 uv=(id+0.5)/M 对应线程编号，用 uint v = uint(uv.x * M + uv.y) 重建一维索引，模拟 SV_DispatchThreadID。
同步假象：WebGL2 无 glMemoryBarrier，Unity 里靠双缓冲+帧延迟保证上一帧写完再读；若逻辑帧需立即用结果，只能拆帧延迟一帧，策划表现层做插值掩盖。

答案

分三步落地，代码级可直接写进面试草稿：

数据纹理化
把粒子位置、速度等结构化数据 float4[] 按行主序写入 Texture2D，宽度选 2 的幂，高度=ceil(count/width)，单像素存一条数据；
首帧用 Texture2D.SetPixels/Apply 上传，后续全程 GPU 内 Ping-Pong。

伪计算 Shader
Vertex Shader 只负责把全屏三角形顶出去；核心逻辑写在 Fragment Shader：

float4 frag (v2f i) : SV_Target {
    uint id = uint(i.uv.x * _TexWidth + i.uv.y * _TexHeight);
    float4 data = tex2D(_DataTex, i.uv);
    // 伪粒子积分
    data.xyz += data.w * _DeltaTime;
    return data;
}

用 Graphics.Blit(_DataTex, _RT2, _Mat) 完成一次“Dispatch”；下一帧交换 _DataTex 与 _RT2。

结果消费
- 渲染侧：把 _DataTex 当实例化坐标缓冲，用 Graphics.DrawMeshInstancedProcedural 绘制粒子；
- 逻辑侧：若必须 CPU 读回，用 AsyncGPUReadback.Request(_DataTex, 0)，回调里把 NativeArray<float> 拷到 List<Vector4>，禁止在主线程直接 GetPixels，否则微信小游戏 60 fps 直接掉到 20 fps。

踩坑提示：

国产浏览器（QQ/360）对浮点纹理回读会强制转成 RGBA8，需提前在启动阶段检测 SystemInfo.SupportsRenderTextureFormat(RenderTextureFormat.ARGBFloat)，不支持就降级到半精度 RGBAHalf 或弹窗提示。
iOS 15 以下 WebKit 单帧 glReadPixels 超过 1 MB 会触发 JSC 锁，建议一次回读不超过 256×256 像素，大数据分片多次。

拓展思考

如果数据量>1 M 粒子，纹理尺寸超过 2048×2048，纹理采样次数翻倍导致移动端发热，可改用双 Pass 分层：第一 Pass 用 Vertex Shader 的 gl_VertexID 做线程号，把结果写进 Transform Feedback 缓冲（WebGL2 支持），第二 Pass 再画一遍，省一次采样。
需要原子累加时，可预分配 32 bit 无符号纹理，把要累加的数值拆成 8 bit 四通道，用 Fragment Shader 手动实现CAS 循环，但性能在低端机只有 1/10，非必要不用。
长远看，Unity 2023 LTS 已实验性支持 WebGPU 后端，Compute Shader 原生可用；面试时可补充“现阶段用 GPGPU 兜底，后续切 WebGPU 只需把 Shader 文件改成 .compute，数据纹理转 StorageTexture，一行 C# 不改”，体现你对技术演进的 roadmap 有准备。