Web图形从flash到webgl次世代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