WebGPU 是比 WASM 更好的选择吗？ （Is WebGPU a Better Choice Than WASM? ）
WebGPU 是否比 WASM 更好？（Is WebGPU a Better Choice Than WASM?）
- WebGPU 与 WebAssembly (WASM) 的关键区别
- WebGPU是什么？它适用于哪些人群？
- WebAssembly 是什么？它适合谁使用？
- WebGPU 和 WASM 的代码示例
- WebGPU 与 WebAssembly 的终极对决：最终结论
在搜索了解 WebGPU 与 Vulkan 的关系与区别的时候发现的关于 WebGL 和 WebGPU 对比的不错的文章。
这里翻一下提供给需要的人。
PS：软件翻的，手动修改了一些别扭的地方，整体还行！
原文章地址：Is WebGPU a Better Choice Than WASM?
前言：
对于优先追求图形性能并希望最大化利用 GPU 的开发者而言，WebGPU 提供了突破性进展。相较于 WebGL，它的升级能释放出更强大的计算潜能。而若核心需求是广泛的语言支持、增强的安全性以及接近原生的运行速度，WebAssembly（WASM）则成为更理想的选择.
WebGPU 与 WebAssembly (WASM) 的关键区别
- WebGPU 旨在通过与现代 GPU 硬件的良好接口实现卓越的图形性能，而 WASM 则不然。
- WebAssembly 支持多种语言（C、C++、Rust、Go），其二进制格式可以直接在浏览器中编译使用。
- WebGPU 基于 Vulkan 构建，承诺实现平衡的 CPU/GPU 使用，并提升性能，超越 WebGL。
- WASM 提供增强的内存安全性，通过减少漏洞攻击面来提升安全性。
- WebGPU 在机器学习计算和复杂视觉效果方面表现出色，可能为浏览器上的新编程可能性打开大门。
- WASM 服务于多种用途，从虚拟现实/增强现实（VR/AR）、点对点（P2P）服务到科学模拟和图像/视频编辑。
| 比较 | WebGPU | WebAssembly |
|---|---|---|
| 成立 | 由 W3C“GPU for the Web”小组于 2017 年开发 | 成立于 2017 年，2019 年成为 W3C 标准 |
| 浏览器支持 | 可在 ChromeOS、macOS、Windows 上的 Chrome 113 中使用；其他平台尚在规划阶段 | 受所有主流浏览器支持，包括 Chrome、Edge、Firefox 和 WebKit |
| 性能优势 | 减少过多 JavaScript 调用的开销，高效的资源同步，最佳的计算资源管理 | 以接近原生的速度运行，缓解 JavaScript 中的效率问题，提高内存利用率和应用程序安全性，支持字节码执行 |
| 应用 | 将算法移植到 GPU、复杂的视觉效果、机器学习计算 | 视频编辑、3D 游戏、虚拟/增强现实、P2P 服务、科学模拟 |
| 语言支持 | 使用 JavaScript 模式，支持流行的 JavaScript WebGL 库中正在进行的 WebGPU 端口 | 运行以多种语言编写的代码，可以本机运行 C、C++、Rust、Python 和 Go 等语言 |
| 安全和漏洞管理 | 处理资源同步挑战，减少 JavaScript 调用，最大限度地降低潜在风险 | 通过更好的内存管理来限制攻击面，提高内存安全性，提供沙盒，并通过 wasmCloud 扩展安全范围 |
| 未来方向 | 持续开发，功能改进正在进行中；如果它能实现预期的安全性、性能和可移植性，有可能成为开发人员的首选 | 有可能成为编写应用程序的标准，超越浏览器的范围，非常适合流媒体、微服务、无服务器和边缘环境 |
WebGPU是什么？它适用于哪些人群？
WebGPU 是一项革命性技术，它突破了 WebGL 的限制，为现代硬件GPU提供了更高效的接口。这一新 API 利用 Direct3D 12、Metal 和 Vulkan 等技术的进步，支持在浏览器中实现以往难以实现的复杂视觉效果及机器学习计算。
该技术自 2017 年起由 W3C 的 “GPU for the Web” 工作组积极开发，主要面向开发者、移动游戏工作室及任何希望将先进图形呈现和机器学习算法集成到Web平台的技术爱好者。
1. WebGPU 的优点
- 克服 WebGL 对高级图形和机器工作负载的限制
- 支持复杂的视觉效果和机器学习计算
- 使用计算着色器优化计算资源
- 最小化样板代码，提高编程效率
- 自动处理资源同步挑战
2. WebGPU 的缺点
- 仍处于早期发展阶段
- 目前默认禁用，需要手动激活
- 需要通过 API 确定与硬件和浏览器的兼容性
- W3C 正在设计全面功能改进
WebAssembly 是什么？它适合谁使用？
WebAssembly (WASM) 是自 2019 年起成为 W3C 标准的一种突破性技术，它极大地提高了网站的性能和功能。作为一种低级二进制格式，它可在现代网络浏览器中运行，并提供令人兴奋的新功能，显著提高性能。
这项多功能技术面向需要高速、高效、可移植性、可读性、可调试性和安全性的开发人员。WebAssembly 在解决 VR、AR、图像/视频编辑和计算机视觉等更密集用例的性能问题方面特别有用。
1. WebAssembly 的优点
- 提供显著的性能提升和低级二进制格式
- 支持以接近本机的速度运行用多种语言编写的代码
- 浏览器内可执行语言包括 C、C++、Rust、Python 和 Go
- 通过减少漏洞攻击面来增强安全性
- 促进高效共享库，无论底层语言是什么
2. WebAssembly 的缺点
- 需要了解特定语言才能进行调试
- 初始二进制指令对于新手用户来说可能很复杂
- 内存安全依赖沙盒环境
- 浏览器内执行目前仅限于特定语言
WebGPU 和 WASM 的代码示例
使用 Simplex 噪声动画化 WebGPU
这个富有创意的示例利用 WebGPU 的计算能力，通过 Simplex 噪声创建一个动态表面。它需要对 GPU 计算概念和 Simplex 噪声有基本的了解。在运行代码之前，请确保添加了 gpu.js 库。
// Create a gpu instance
const gpu = new GPU();
// Create the kernel function
const animateSurface = gpu.createKernel(function() {
let x = this.thread.x / 100;
let y = this.thread.y / 100;
return noise.simplex2(x, y)/2 + 0.5;
}).setOutput([800, 600]).setGraphical(true);
function render() {
animateSurface();
requestAnimationFrame(render);
}
// schedule the first render
requestAnimationFrame(render);
在 WASM 中分配内存
这是一个中级示例，通过 JavaScript 中的 WASM API 突出显示内存分配。在执行之前，请确保您正在支持 “WebAssembly JavaScript API” 的环境中工作。预运行设置包括在 wasm 模块中分配内存并执行操作。
// Instantiate the wasm module
const wasmModule = new WebAssembly.Module(wasm_byte_code);
// Create an import object with the memory
const wasmInstance = new WebAssembly.Instance(wasmModule, {
env: {
memory : new WebAssembly.Memory({initial: 10, maximum: 100})
}
});
// Allocate memory
let ptr = wasmInstance.exports.alloc(32);
// Perform operations
let memory = new Uint8Array(wasmInstance.exports.memory.buffer);
for(let i = 0; i < 32; i++) {
memory[ptr+i] = 42;
}
WebGPU 与 WebAssembly 的终极对决：最终结论
经过对 WebGPU 和 WebAssembly (WASM) 的全面评估，现在我们将正式敲定法槌，针对以下用户群体宣布胜出方案。
需要 Web 现代 GPU API 的开发者
对于开发者而言，Direct3D 12、Metal 和 Vulkan 等现代 GPU API 的进步为 WebGPU 奠定了坚实基础。WebGPU 能够高效对接现代 GPU 硬件，其功能映射了底层API的能力，并大幅扩展了浏览器端的编程可能性。开发者可期待通过它实现新型算法、复杂的视觉效果，甚至拓宽机器学习计算的边界。此外，WebGPU 充分利用现有 Web 平台特性（如 JavaScript 的成熟模式），使得样板代码（Boilerplate Code）保持精简且易于管理。
解决 JavaScript 中的性能问题
当 JavaScript在AR/VR、图像/视频编辑、计算机视觉等密集型任务中面临性能瓶颈时，WebAssembly（WASM）以其低层级二进制格式和多语言支持特性成为理想选择。WASM 可将原生代码编译为二进制格式，在浏览器中以接近原生速度运行，从而显著降低性能损耗。开发者无需直接编写 WASM 代码即可利用其优势，既保障了执行效率与安全性，又简化了开发流程。
专注于无服务器环境的开发人员
随着无服务器环境的出现，WebAssembly（Wasm）逐渐成为更优解决方案。其设计专门用于补充并与 JavaScript 协同工作，使开发者无需适配特定的应用运行时。此外，通过减少漏洞攻击面、更优的内存管理及沙箱隔离机制，安全性得到显著提升，为构建安全高效的无服务器环境提供了理想基础。
总结：
WebGPU 与 WASM 凭借其独特优势，分别针对不同的编程挑战提供了针对性解决方案。WebGPU 在现代 GPU 指令效率与广泛的可编程性方面表现卓越，而 WASM 则在性能效能和无服务器环境适配性上更具优势。