初学者对 WebGL 与 WebGPU 的看法（A Beginner’s Perspective of WebGL vs WebGPU）

- WebGL 和 WebGPU 之间的主要区别：
- WebGL 是什么以及它适合哪些人使用？
- WebGPU 是什么？它适合谁使用？
- WebGL 和 WebGPU 的代码示例
- 最终裁决：WebGL 与 WebGPU

在搜索了解 WebGPU 与 Vulkan 的关系与区别的时候发现的关于 WebGL 和 WebGPU 对比的不错的文章。

这里翻一下提供给需要的人。

PS：软件翻的，手动修改了一些别扭的地方，整体还行！

原文章地址：A Beginner’s Perspective of WebGL vs WebGPU

前言：

WebGL 作为一种广泛使用的图形应用程序接口（API），因其在多个平台上具有良好的兼容性而被众多开发者所青睐。

尽管如此，对于那些致力于探索图形处理和计算负荷极限的研究人员而言，WebGPU 展现出了其潜在的新功能、高效的硬件交互能力以及卓越的性能表现，预示着它将成为未来网络图形API发展的关键方向。

WebGL 与 WebGPU

WebGL 和 WebGPU 之间的主要区别：

WebGL 基于 OpenGL ES，其性能可能不如 DirectX。而 WebGPU 则采用 Vulkan 的标准 API 构建，提供了更出色的性能和更均衡的CPU/GPU利用。

WebGL 作为一种成熟技术，已获得广泛的技术支持。相较之下，WebGPU 尚处于发展的早期阶段，其完整潜能尚未完全展现。

在API设计上，WebGL 实现了跨平台的兼容性，并为开发者提供了诸如 JavaScript 自动内存管理等便利特性；而 WebGPU 则降低了 JavaScript 的调用负担，并能自动管理资源同步。

就应用领域而言，WebGL 主要服务于浏览器中的 3D 图形渲染。WebGPU 的引入，则为复杂的视觉特效和机器学习计算带来了新的可能，这些在以往是不实际的。

比较	WebGL	WebGPU
API 类型	低级 3D 图形 API	现代图形和机器工作负载 API
发行年份	2011	自 2017 年起开始开发
一体化	直接集成到浏览器中	设计用于与现代 GPU 硬件高效交互
开发人员支持	JavaScript 自动内存管理简单且无需编译	减少过多 JavaScript 调用的开销，尽量减少样板代码
图形支持	支持 3D 图形	实现复杂的视觉效果，支持机器学习计算
支持	苹果、谷歌、微软、Mozilla	苹果、谷歌、Mozilla、微软、英特尔
兼容性	跨平台兼容性	针对现代硬件进行了优化，计划实现多平台兼容性
表现	相对较慢，OpenGL 存在质量问题	潜在的高性能、平衡的 CPU/GPU 使用率
访问 GPU	允许浏览器利用计算机上的GPU资源	有效地与现代 GPU 硬件交互
使用范围	移动端 Web 标准，用于在线交互式 3D 图形	在 GPU 上移植算法、机器学习计算、复杂的视觉效果

WebGL 是什么以及它适合哪些人使用？

WebGL 是一个功能强大的低级 3D 图形 API，通过 HTML5 Canvas 连接到 ECMAScript，并基于 OpenGL ES 构建。

在 Flash 消亡之后，WebGL 成为在线交互式 3D 图形的首选技术。

它专为寻求跨平台兼容性和无需额外插件即可实现 GPU 3D 加速的开发人员量身定制。

然而，与 DirectX 不同，由于它依赖于运行速度较慢的 OpenGL，因此它的可理解性有限。

在这里插入图片描述

1. WebGL 的优点

直接浏览器集成，无需插件
受到 Apple、Google、Microsoft 和 Mozilla 等主要浏览器供应商的支持
提供跨平台兼容性和原生 GLSL 支持
WebKit 的开源特性允许用户进行修改和定制
实现与其他 HTML 文档元素的直接交互

2. WebGL的缺点

由于使用 OpenGL，速度相对较慢
与 DirectX 相比缺乏可理解性
实际运行技术因平台而异
OpenGL的质量问题使得游戏开发更倾向于使用针对Windows平台的D3D10+

WebGPU 是什么？它适合谁使用？

WebGPU 是一种前沿的 API，专为图形处理和机器负载而开发。

它克服了 WebGL 的局限性，展现了现代 GPU 硬件的强大功能，并拓宽了编程的应用范围。

其推出代表着网络图形处理的一大飞跃，将 DirectX 12、Metal 和 Vulkan 的特性带到了互联网上。

WebGPU 主要面向那些追求通过网页实现高级视觉效果、计算优化和 GPU 加速机器学习的开发者。

在这里插入图片描述

1. WebGPU 的优点

展现现代 GPU 硬件的强大功能
降低频繁JavaScript调用的额外负担
自动管理资源同步
如果使用得当，可以释放高性能能力
提供计算着色器，实现灵活的编程和计算资源的处理

2. WebGPU的缺点

仍处于早期发展阶段
尚未实现全平台全面部署
WebGL 的后继者，但目前默认禁用
W3C 仍在设计功能改进的实现

WebGL 和 WebGPU 的代码示例

WebGL：交互式颜色光谱立方体

在此 WebGL 代码片段中，我们使用顶点着色器和片段着色器来创建立方体。

如果没有兼容的 WebGL 渲染器（例如 three.js），此功能将无法运行。


// 创建一个边长为 1 的立方体几何对象
var cubeGeometry = new THREE.BoxGeometry(1,1,1);

// 顶点着色器代码
var vertexShader = `
    // 定义一个 varying 变量 vUv，用于传递顶点的 UV 坐标
    varying vec3 vUv; 
    void main() {
        // 将顶点的位置赋值给 vUv
        vUv = position; 
        // 计算并设置顶点的最终位置
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }
`;

// 片段着色器代码
var fragmentShader = `
    // 接收从顶点着色器传递过来的 vUv 变量
    varying vec3 vUv;
    void main() {
        // 将 vUv 作为颜色值设置给片段
        gl_FragColor = vec4(vUv, 1.);
    }
`;

// 创建一个自定义的着色器材质
var cubeMaterial = new THREE.ShaderMaterial({
    // 指定顶点着色器代码
    vertexShader: vertexShader,
    // 指定片段着色器代码
    fragmentShader: fragmentShader,
});

// 创建一个立方体网格对象，并使用自定义的着色器材质进行渲染
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

// 将立方体添加到场景中
scene.add(cube);

WebGPU：基本计算着色器

此 WebGPU 代码片段会启动一个基本计算着色器，将缓冲区的每个元素设置为相同的值。

它需要兼容 WebGPU 的浏览器，并且必须从安全的上下文中提供。

// 获取浏览器的 GPU 信息
const gpu = navigator.gpu;

// 获取 canvas 的 GPU 呈现上下文
const context = canvas.getContext('gpupresent');

// 请求 GPU 适配器
const adapter = await gpu.requestAdapter();

// 请求 GPU 设备
const device = await adapter.requestDevice();

// 定义着色器模块描述符
var shaderModuleDescriptor = {
    code: `
        // 定义一个结构体 Data
        [[block]] struct Data {
          value: u32;
        };

        // 定义一个存储缓冲区变量 buffer，绑定到 0 号绑定点，属于 0 号组
        [[binding(0), group(0)]] var<storage_buffer> buffer: Array<Data>;

        // 定义一个计算着色器函数 main，在计算阶段执行，工作组大小为 1
        [[stage(compute), workgroup_size(1)]] fn main([[builtin(global_invocation_id)]] id: vec3<u32>) {
          // 将 1234 赋值给 buffer 中索引为 id.x 的元素的 value 字段
          buffer[id.x].value = 1234;
        }
    `,
};

// 创建着色器模块
var shaderModule = device.createShaderModule(shaderModuleDescriptor);