初学者对 WebGL 与 WebGPU 的看法（A Beginner’s Perspective of WebGL vs WebGPU）
初学者对 WebGL 与 WebGPU 的看法（A Beginner’s Perspective of WebGL vs WebGPU）
在搜索了解 WebGPU 与 Vulkan 的关系与区别的时候发现的关于 WebGL 和 WebGPU 对比的不错的文章。
这里翻一下提供给需要的人。
PS：软件翻的，手动修改了一些别扭的地方，整体还行！
原文章地址：A Beginner’s Perspective of WebGL vs WebGPU
前言：
WebGL 作为一种广泛使用的图形应用程序接口（API），因其在多个平台上具有良好的兼容性而被众多开发者所青睐。
尽管如此，对于那些致力于探索图形处理和计算负荷极限的研究人员而言，WebGPU 展现出了其潜在的新功能、高效的硬件交互能力以及卓越的性能表现，预示着它将成为未来网络图形API发展的关键方向。
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);
最终裁决：WebGL 与 WebGPU
在基于浏览器的 3D 图形的激烈竞争中，WebGL 和 WebGPU 都表现出了强大的竞争力。
但究竟谁才是王道？谁应该将自己的筹码放在哪种技术上？让我们深入探讨一下。
网络游戏开发
对于网络游戏的开发者而言，源自 Vulkan 的 WebGPU 无疑是最优选择。
在这样一个每一帧都至关重要、计算复杂性不断增长的生态中，WebGPU 带来的更佳性能和均衡的 CPU/GPU 利用，不仅优化了代码效率，也提升了玩家的游戏体验。
WebGPU 不断的进步和承诺的功能提升，更是暗示了这是一项具有未来保障的技术投资。
AR/VR 内容创作者
AR/VR 内容创建者倾向于使用 WebGL。凭借对 AR/VR 内容的可靠支持，WebGL 在可靠性至关重要的领域中脱颖而出。
与 HTML5 的无缝集成、原生 GLSL 支持和跨平台兼容性不仅保证了开发的简易性，还扩大了用户覆盖范围。
不过，请密切关注 WebGPU 在这些领域即将推出的增强功能。
机器学习爱好者
机器学习爱好者应该加入 WebGPU。
WebGPU 具有诸多优势，例如更低的 CPU 使用率和更高效地与现代 GPU 硬件交互，它大胆地涉足了未知领域。
在 GPU 上移植复杂算法可能会通过 WebGPU 的计算着色器得到改观，从而显著提升机器学习算法的性能。
结论：
在 WebGL 的跨平台兼容性和易用性，与 WebGPU 的现代高性能承诺之间，我们的判断如下：WebGL 依然是网络图形处理的可靠选择；而 WebGPU，虽然初出茅庐，但在处理密集型机器学习算法和复杂游戏应用方面展现了巨大潜力。
原文地址：https://blog.csdn.net/linzi19900517/article/details/140515794
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！