WebGPU 与 WebGL 2 – 揭秘最佳功能（WebGPU vs WebGL 2 – Uncovering the Best Features）

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

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

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

原文章地址：WebGPU vs WebGL 2 – Uncovering the Best Features

---

前言：

WebGPU 是一种先进的API，旨在超越 WebGL2，提供增强的功能和更高效的现代 GPU 硬件利用。专为那些追求高性能、便携性以及先进视觉效果的创作者设计，成为他们的首选。尽管如此，WebGL2 由于开发者对其更熟悉以及更广泛的跨平台支持，可能更受资深开发者的青睐。

---

WebGPU 和 WebGL 2 之间的主要区别

• WebGPU 旨在取代 WebGL，它解决了 WebGL 的局限性，并通过与现代 GPU 硬件的有效交互提供了更好的性能。
• WebGL 2 是一种光栅化引擎，它不处理 3D 数学，而 WebGPU 可以减轻 3D 复杂性并通过计算着色器提供更灵活的编程模型。
• WebGL 2 享有更广泛的跨平台支持；WebGPU 目前可用于 ChromeOS、macOS 和 Windows，并计划支持 Android 和 Linux。
• WebGPU 提供强大的资源管理和清晰的错误消息以进行故障排除，与 WebGL 2 相比，有可能减少开发障碍。

比较	WebGPU	WebGL2
引擎类型	图形API	光栅化引擎
用法	图形和机器工作负载	绘制 3D，需要用户具备 3D 方面的知识
新的编程可能性	支持	不支持
机器学习计算支持	支持	不支持
基于平台	网页	图形处理器
利用现代 GPU 硬件提高效率	高	取决于用户对 3D 方面的了解
自动处理同步挑战	支持	不支持
着色器的使用	计算	顶点和片段
资源管理	最佳，由计算着色器辅助	取决于开发者
表现	如果使用得当会更高	取决于用户提供的着色器
发布状态	首次在适用于 Windows、ChromeOS 和 MacOS 的 Chrome 113 中发布。计划进一步推出。	目前可用

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

WebGPU 作为下一代图形和计算API，旨在突破 WebGL 的限制。它继承了 Direct3D 12、Metal 和 Vulkan 等知名API的精髓。由W3C 的 “ Web 的 GPU ” 联盟精心设计，它能高效地与现代 GPU 硬件配合工作。在 Chrome 113 版本中，它已在 ChromeOS、macOS 和 Windows 系统上实现。

这款 API 的主要用户群体包括游戏开发者、移动应用工作室，以及那些希望在浏览器中实现复杂视觉效果和进行机器学习计算的开发者。WebGPU 致力于平衡 CPU 和 GPU 的使用，同时提升安全性、性能和便携性，成为 WebGL 的崭新而强大的继任者。

1. WebGPU 的优点

• 释放惊人性能
• 最少的样板代码
• 对 JavaScript WebGL 库的强大支持

2. WebGPU 的缺点

• 仍处于早期发展阶段
• 作为 WebGL 的扩展，默认情况下已禁用

WebGL2 是什么以及它适合谁？

WebGL2 并非一个 3D 库，而是一款功能强大的光栅化引擎。它能够绘制 3D 图形，但具体的三维表现则需要开发者自行实现。WebGL2 擅长根据指令绘制点、线和三角形。它依赖于 GPU 的强大性能，并通过 GLSL 代码进行操作。需要注意的是，WebGL2 主要负责光栅化处理并提供深度缓冲。

WebGL2 面向那些熟悉矩阵数学、标准化坐标和视锥体等概念的开发者。它能够创建沉浸式和令人印象深刻的场景，是构建 3D 应用的基础。无论是实现光线反射还是纹理映射，WebGL2 都能带来卓越的用户体验。然而，使用 WebGL2 需要开发者具备一定的实践能力和深入理解。

1. WebGL2 的优点

• 能够构建高度交互的 3D 应用程序
• 支持高级技术，打造视觉震撼的场景
• 与 Three.js 合作渲染 3D 应用程序

2. WebGL2 的缺点

• 所有 3D 数学知识必须由用户提供
• 从表面处理 3D 方面

WebGPU 和 WebGL 2 的代码示例

WebGPU

这是一个使用 WebGPU 在 3D 空间中绘制三角形的简单示例。为了理解这个示例，你需要具备基础的 JavaScript 知识，并且对GPU 编程中的一些概念（比如缓冲区、着色器和管道状态）有所了解。

// Creating a device
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

// Creating a buffer
const vertices = new Float32Array([
  1.0,  1.0,
  -1.0,  1.0,
  1.0, -1.0,
]);
const vertexBuffer = device.createBuffer({
  size: vertices.byteLength,
  usage: GPUBufferUsage.VERTEX,
  mappedAtCreation: true,
});
new Float32Array(vertexBuffer.getMappedRange()).set(vertices);
vertexBuffer.unmap();

WebGL 2

一个 WebGL2 示例，绘制一个简单的正方形，并使用动画循环旋转它。它需要了解 JavaScript，特别是 requestAnimationFrame 函数和基本 WebGL 构造。

// Creating square buffer
var squareVerticesBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
var vertices = [
  1.0,  1.0,  0.0,
 -1.0,  1.0,  0.0,
  1.0, -1.0,  0.0,
 -1.0, -1.0,  0.0
];

// Pass the vertices to WebGL
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// Draw rotation
var rotation = 0, lastFrameTime = 0;
function rotateAnimation(now) {
  rotation += (now - lastFrameTime) * 0.01;
  lastFrameTime = now;
  renderScene();
  requestAnimationFrame(rotateAnimation);
}

WebGPU 还是 WebGL2：技术决断

你现在正处在两大技术力量—— WebGPU 和 WebGL2 的交汇点。它们各自都有着深厚的优势，选择哪一个取决于你所使用的工具、你的需求以及你的技术能力。让我们来引导你走出这个复杂的选择迷宫。

驾驭现代科技浪潮的开发者

对于那些追求最新技术的开发者来说，如果你们已经接触过 Direct3D 12、Metal、Vulkan 等前沿 API，那么 WebGPU 将是一个不错的选择。它能有效利用现代 GPU 硬件，减少了模板代码，同时降低了 JavaScript 调用的额外开销。虽然目前 WebGPU 还处于早期开发阶段，但它的潜力巨大，可能会为你带来梦寐以求的卓越性能。

3D 数学大师

如果你对矩阵数学和标准化坐标了如指掌，那么 WebGL2 可能是你的理想选择。它要求开发者亲自动手，而不是提供现成的工具，适合那些热衷于亲手打造 3D 杰作的高手。WebGL2 不仅仅是一个光栅化引擎，它是创建高度互动的 3D 应用的坚实基础。

GPU 命令飞行员

如果你对 GPU 命令有所涉猎，并且喜欢掌控一切，那么 WebGPU 可能是你理想的指挥伙伴。这个 API 专为 GPU 命令高手设计，它提供了一个高效的 GPU 接口，能够智能地管理计算资源，并自动解决资源同步的难题。

---

总结：

对于初学者或者那些开发休闲应用的开发者来说，WebGL2 是个合适的选择。但是，对于那些追求 GPU 功能最前沿和高效 API 交互的开发者来说，即使是初期阶段，WebGPU 也显得与众不同。它的强项在于其性能和可用性潜力，可能会超越 WebGL 的限制。你应该根据你的技能水平、需求以及你追求的开发目标来做出选择。