WebGPU 是个好东西,它取代 WebGL 是必然的,属于 WebGPU 的时代即将到来

简介: 7月更文挑战第12天

GPU 是单词 graphics processing unit 的缩写,中文通常会被翻译为:​​图形处理器​​​ 或 ​​图形处理单元​​。
所以 WebGPU 从字面上可以简 单理解为:让浏览器(Web)拥有访问和使用 GPU 的能力。
如何查看自己电脑是否有 GPU ?

  1. 打开系统任务管理器
  2. 点击 性能 面板
  3. 在左侧如果能够找到 GPU 则表示你的电脑有 GPU
  4. 若你的电脑本身就没有 GPU,那你搞不了 WebGPU 了...
    对于 WebGPU 而言,无论是 集成显卡,还是 独显,都是可以的。WebGPU 是一种新的 Web API,可用于在图形处理器(GPU)上执行渲染和计算操作。

WebGL的短板:API 标准太过陈旧
WebGL 最新的版本 2.0 发布于 2017 年,该版本支持的 GPU 标准对应的是 Open ES 3.0,发布于 2012 年,而 Open ES 3.0 桌面端对应的标准为 Open GL 3.2,发布于 2009 年。
2009 年已经是 12 年前了。
在如此陈旧的标准下,根本无法充分利用到当前计算机中的性能优势:多核 CPU + 并行/通用计算 GPU 的优势。

Open GL 归属于 Khronos Group 这个组织,这个组织就没打算继续发展优化 Open ES 和 WebGL,Khronos 目前主要想发展的是另外一套标准:Vulkan,算是 OpenGL 的下一代版本。
有一种阴谋论,说 WebGPU 替代 WebGL 原因之一是因为 WebGL 背后的 Open ES 版权归 Khronos,所以 W3C 组织才希望搞出属于自己的 WebGPU,一派胡言。
WebGL 在渲染性能方面实在是没有跟上时代,这也是为什么 WebGL 网页 3D 实际上并没有大规模流行起来的原因。甚至学习 WebGL、Three.js 都被称为 ​​小众​​。

补充:苹果浏览器 Safari 2021年 9 月才开始支持 WebGL 2.0。
为啥苹果浏览器对 WebGL 2.0 支持度这么晚?因为苹果觉得 WebGL 太慢,于是自己搞了一个 Metal 架构,将 WebGL 2.0 构建在自己的 Metal 架构之下,以便提升 WebGL 的性能。
实际上这个性能的提升是有限的,且仅适用于苹果浏览器,不适用于谷歌浏览器。

天下分久必合 合久必分
在 WebGL 不给力,且提升无望的情况下,各家各自造自己的轮子。
最终 微软、浏览器厂商、芯片厂商、W3C、Khronos 等多方达成共识:放弃 WebGL,开发全新的 Web 图形渲染 API ,就是 WebGPU。
浏览器厂商:苹果浏览器、谷歌浏览器、火狐浏览器等等主流浏览器
芯片厂商:英特尔、AMD等
W3C:万维网联盟,Web 标准的制定者
Khronos:OpenGL / Open ES 的版权方

多方对WebGPU达成的共识:
WebGPU 必须可以同时兼容 D3D12(微软)、Metal(苹果)、Vulkan(Khronos) 这 3 个底层框架。

  1. 相同的 API 和 着色器语言
    WebGL 对应的着色器语言为 GLSL(OpenGL Shading Language)
  2. 减少 CPU 开销
    具体体现在 优化渲染管线
  3. 更好支持 多线程
    WebGL 渲染命令一旦调用,就会立即全局生效,同步执行,所以是单线程。
    而 WebGPU 则将渲染命令拆分成 2 个步骤:录制命令(纯CPU操作) + GPU执行(多线程并行计算)
  4. 支持现代 GPU 架构
  5. 支持 GPU 通用计算
    关于 通用计算,这可能是 WebGPU 会爆发的另外一个点,不仅仅是用作 Web 3D 渲染,还为浏览器提供 GPU 通用计算的能力。
    TensorFlow.js 有可能也会迎来爆发。
    此外 WebGPU 还支持 Shared Memory(共享内存),简单来说可以定义一些变量让不同的进程都可以访问到该变量,极大提升 GPU 计算能力。
    注:共享内存(Shared Memory) 和 全局变量 并不是同一回事。

WebGPU结构体系图:
你的程序(浏览器网页) > WebGPU API > 系统平台(OS) > { DirectX 12、Metal、Vulkan }
图片来源:https://web.dev/gpu/
特别补充:

  1. 上图中的 DirectX 12 就是 ​​D3D12​​ 。
  2. WebGL 适用的是 DirectX 11,也就是 D3D11。

WebGPU通过充分利用GPU并行计算的能力来提升渲染 3D 性能。
关于 “并行计算” 的一个举例说明:
假设现在要计算 8 个数字的和,例如 2 + 4 + 3 + 6 + 8 + 1 + 7 + 9 等于多少,那么:
这里我们假设每 2 个数字求和所需时间为 1 毫秒 (我只是举例)

  1. WebGL 是​​单线​​​计算,它的步骤是:从左到右逐一计算,即 先计算前两个数之和(2 + 4 = 6),然后将计算结果再与第 3 个数字求和(6 + 3 = 9),然后再继续......
    那么这 8 个数字求和一共需要 7 毫秒。2. WebGPU 则采用 ​​并行计算​​​,它的步骤是:将 8 个数字分成 4 组(每组 2 个数),然后这 4 组 分别同时求和,得到 4 个数字,然后将这 4 个数字再拆分成 2 组(每组 2 个数字),再次分别同时求和,将得到的 2 个数字进行最终的求和。
    那么这 8 个数字求和一共需要 3 毫秒。7 毫秒 VS 3 毫秒
    上面使用 8 个数字求和仅仅是举例,实际中 3D 渲染所需的运算量非常大,可想而知性能差异会更大。
    你可以把 WebGL 对应的 CPU 单线计算看作是 1 位拥有超高心算能力的强者。
    而 WebGPU 对应的 GPU 并行计算 则是 1 万名普通人。
    ​​1 位强者​​​ VS ​​1 万个普通人​​ ,强者再强也是没有胜算的。

总之,记住一句话:WebGPU 是个好东西,它取代 WebGL 是必然的,属于 WebGPU 的时代即将到来。

相关实践学习
部署Stable Diffusion玩转AI绘画(GPU云服务器)
本实验通过在ECS上从零开始部署Stable Diffusion来进行AI绘画创作,开启AIGC盲盒。
相关文章
|
7月前
|
Rust JavaScript 前端开发
WebAssembly 技术:解锁浏览器的无限潜能
随着互联网的快速发展,Web 应用程序的功能需求也越来越复杂。传统的 JavaScript 语言在处理大规模数据和高性能计算方面存在一些局限性。然而,WebAssembly 技术的出现改变了这一切。本文将介绍什么是 WebAssembly,它的应用领域以及如何使用它来提升 Web 应用程序的性能和体验。
|
Web App开发 前端开发 JavaScript
WebGL:开始学习 / 理解 WebGL / WebGL 需要掌握哪些知识 / 应用领域 / 前端值得学WebGL吗
WebGL:开始学习 / 理解 WebGL / WebGL 需要掌握哪些知识 / 应用领域 / 前端值得学WebGL吗
491 0
|
4月前
|
JSON Dart Android开发
Flutter 2024: Impeller引擎引领渲染新纪元
Flutter 2024以Impeller引擎引领渲染新时代,全面提升性能与流畅度。Impeller已在iOS及Android(支持Vulkan/OpenGL)全面部署,Material 3集成深化视觉体验,多视图支持增强复杂UI管理。Dart 3.2与3.4版本迭代优化语言特性与性能,引入宏编程简化JSON处理。桌面与Web端持续优化,深化平台适配。
240 14
|
2月前
|
JavaScript 前端开发 图形学
WebGL 技术详解
【10月更文挑战第7天】
|
2月前
|
前端开发 JavaScript API
前端开发新趋势:探索WebAssembly与WebGL在游戏开发中的应用
【10月更文挑战第1天】前端开发新趋势:探索WebAssembly与WebGL在游戏开发中的应用
82 2
|
6月前
|
机器学习/深度学习 人工智能 前端开发
WebAssembly:浏览器中的新语言,引领Web性能革命
【6月更文挑战第12天】WebAssembly,简称Wasm,是浏览器中的新语言,旨在带来近乎原生的性能,引领Web性能革命。它具有高效、可移植、安全和多语言支持的特点,适用于游戏开发、图形处理、计算机视觉等领域。随着浏览器支持增强,Wasm将在跨平台应用、AI、机器学习、云计算和边缘计算中发挥更大作用,推动Web应用的发展。
|
7月前
|
移动开发 前端开发 JavaScript
游戏开发技术- 请谈谈WebGL与Canvas的区别,以及在什么情况下更适合使用WebGL。
WebGL和Canvas都是网页游戏开发的关键技术。Canvas是2D绘图API,适合初学者和简单的2D游戏,而WebGL是基于OpenGL的3D渲染标准,用于复杂3D图形和游戏,提供GPU硬件加速。当涉及3D渲染、高级视觉效果或高性能需求时,WebGL是更好的选择。对于轻量级2D应用,Canvas就足够了。某些游戏引擎支持两者自动切换,以实现最佳性能和兼容性。
566 4
|
7月前
|
Rust 前端开发 JavaScript
前端技术的未来演进:WebAssembly与JavaScript的深度融合
【2月更文挑战第11天】 在数字化时代,前端技术的迅速发展不仅推动了用户体验的革新,也促进了Web应用的性能提升。本文将探讨WebAssembly(以下简称Wasm)与JavaScript(以下简称JS)之间的深度融合如何成为前端技术发展的关键转折点。不同于传统的技术文章摘要,我们将通过一种叙事式的预览引导读者进入这一技术领域的探索之旅,揭示Wasm和JS结合后为前端开发带来的无限可能性和挑战。
|
JavaScript 前端开发 API
使用three.js与WebGL相比有什么优势?
简单的说Three.js是WebGL的框架。封装和简化了WebGL的方法。three.js在它的基础上进行了进一步的封装和简化开发开发过程,个人认为类似于jQuery对原生js的关系。下面我们一点一点来了解下。
319 0
使用three.js与WebGL相比有什么优势?
|
机器学习/深度学习 存储 API
WebGPT VS WebGPU
到目前为止,GPT4 模型一直是开创性的模型,公众可以免费或通过其商业门户(用于公共测试版)获得。它为许多企业家点燃了新的项目想法和用例,但对参数和模型数量的保密性正在杀死所有押注第一个 1 万亿参数模型到 100 万亿参数声明的爱好者!
205 0
下一篇
DataWorks