如何玩转 WebGL 并行计算

简介： 如今在 Web 端使用 WebGL 进行高性能计算已有不少实践，例如在端智能领域中的 tensorflow.js，再比如可视化领域中的 Stardust.js。

作者 | 沧东
来源 | 阿里技术公众号

如今在 Web 端使用 WebGL 进行高性能计算已有不少实践，例如在端智能领域中的 tensorflow.js，再比如可视化领域中的 Stardust.js。在本文中，我们将介绍以下内容：

• 使用 GPU 进行通用计算（GPGPU）的历史
• 当前在 Web 端使用图形 API 实现 GPGPU 的技术原理，以及前端开发者可能遇到的难点
• 相关业界实践，包括布局计算、动画插值等
• 局限性与未来展望

一 什么是 GPGPU

由于硬件结构不同，GPU 与 CPU 擅长执行不同类型的计算任务。CPU 通过复杂的 Cache 设计实现低延迟，包含复杂的控制逻辑（分支预测），ALU 只占一小部分。而 GPU 为高吞吐量而生，包含大量 ALU。因此在单指令流多数据流（SIMD）场景下，GPU 的运算速度远超 CPU，并且这种差距还在不断拉大。

而一些现代 GPU 上甚至有专门负责张量计算、光线追踪的硬件（Tensor/RT Core），例如 Nvidia 的图灵架构。这使得在处理这些计算复杂度极高的任务时能获得更大的性能提升。

这里就需要引出一个概念，用 GPU 进行除渲染外的通用计算：General-Purpose computation on Graphics Processing Units，即 GPGPU。

自 2002 年提出以来，在实时加解密、图片压缩、随机数生成等计算领域都能看到它的身影，GPU Gems/Pro 上也有专门的章节介绍。经由 Nvidia 提出的 CUDA(Compute Unified Device Architecture) 这一统一计算架构，开发者可以使用 C、Java、Python 等语言编写自己的并行计算任务代码。

那么在 Web 端我们应该如何使用 GPU 的计算能力呢？

二 用 WebGL 实现并行计算的原理

在现代化的图形 API（Vulkan/Metal/Direct3D）中提供了 Compute Shader 供开发者编写计算逻辑。考虑到 WebGPU 仍在开发中，目前在 Web 端能使用的图形渲染 API 只有 WebGL1/2，它们都不支持 Compute Shader（WebGL 2.0 Compute 已废弃），因此只能“曲线救国”。在本文的最后一节我们将展望未来的技术手段。

我们先忽略具体的 API 用法，从 CPU 和 GPU 的角度看两者在并行计算过程中是如何协作的，前者也常被称作 host，后者为 device。第一步为数据初始化，需要从 CPU 内存中拷贝数据到 GPU 内存中，在 WebGL 中会通过纹理绑定完成。第二步