Web图形从flash到webgl次世代Webgpu

次世代Webgpu"/>

Web图形从flash到webgl次世代Webgpu

我刚刚大学毕业的时候第一份工作就是要脱flash，搞成webgl+wasm+C+++自研引擎，也算有缘分最后能碰到了第一代flash，然后是现在webgl1.0 ,下一代的也出来了兴奋，耳闻webgpu是移动端web的救星！！！

WebGPU 是用于加速图形和计算的未来 Web 标准和 JavaScript API 的工作名称，旨在提供“现代 3D 图形和计算能力”。 它由 W3C GPU 为 Web 社区组开发，工程师来自 Apple、Mozilla、Microsoft、Google 等。
与 WebGL 不同，WebGPU 不是任何现有原生 API 的直接端口。 它基于 Vulkan、Metal 和 Direct3D 12 中的概念，旨在跨移动和桌面平台在这些现代图形 API 上提供高性能。

Chromium 团队于 2017 年初展示了第一个名为 NXT 的概念原型。WebGPU 使用自己的着色语言，称为 WGSL，可轻松转换为 SPIR-V。 这个选择是三个提议之间的折衷：Apple 的文本 WebMetal、Apple Safari 的文本 WebHLSL / WSL 和 Mozilla 的二进制 SPIR-V。Chrome 和 Firefox 都支持带有 SPIR-V 的 WebGPU，WGSL 前端的工作正在进行中。 Safari 支持带有 WSL 的 WebGPU。

WebGPU 的优点:

• WebGPU更好地支持多线程
• WebGPU支持compute shader，从而让程序员能利用GPU实现很多优化
• WebGPU与WebGL2的区别很大，两者不容易兼容。如果要从WebGL1升级，最好直接升级到WebGPU，一劳永逸
• WebGPU是标准，各大浏览器都会支持。不像WebGL2，苹果直接不支持。
• 目前WebGPU虽然还未正式发布，但已经比较成熟了，也有相关的Demo可供学习.

WebGPU性能分析:

WebGPU性能分析:

WebGPU的demo在there.js中有例子:

http://127.0.0.1:5500/examples/webgpu_compute.html
http://127.0.0.1:5500/examples/webgpu_materials.html
http://127.0.0.1:5500/examples/webgpu_instance_uniform.html
http://127.0.0.1:5500/examples/webgpu_lights_custom.html

浏览器支持：

遗憾的是需要在chrome9.4版本后才支持要在2021.9.21以后才支持可惜我现在的还没到有带你太早啦~

9.4版本后

9 月21号后再试了一下奇怪没成功（今天都26号啦）! 原来是需要在浏览器后面加 “chrome.exe" -enable-unsafe-webgpu 这句就支持webgpu了
chrome 94版本,注意不是金丝雀 是94正式版 快捷方式 右键 属性然后管理员模式启动