初探WebGPU

一个最简WebGL示例

See: ((6629243b-9def-4c3e-b6f6-64e2d1791154))

特点

C like API

Shading Language (GLSL)

WebGL vs WebGPU

WebGL历史

OpenGL 桌面版 (1993)

WebGL 1.0 (2011) 基于 OpenGL ES 2.0

WebGL 2.0 (2017) 基于 OpenGL ES 3.0 (2012)

WebGPU历史

Vulkan (2016) 由 Khronos 小组创建,这个跨平台 API 是 OpenGL 的“继承者”。

D3D12 (2015) 由 Microsoft 创建,专用于 Windows 和 Xbox

Metal (2014) 由 Apple 创建,是 Apple 设备的专有 API。它的设计考虑到了 Apple 硬件上的最佳性能。

WebGPU 目标

通用计算能够高效地在 GPU 上执行。

提供一种人类可编写的语言,用于指定在 GPU 上运行的计算。

能够在浏览器的多进程架构中实现,并维护 Web 的安全性。

Why Not WebGL3

WebGL 1.0 和 WebGL 2.0 分别是 OpenGL ES 2.0 和 OpenGL ES 3.0 API 的 Javascript 投影。WebGL 的设计溯源至 1992 年发布的 OpenGL 1.0 API(该 API 进一步溯源至 1980 年代的 IRIS GL)。这一血统具有许多优势,包括大量可用的知识体系和从 OpenGL ES 到 WebGL 的应用程序移植相对容易。

然而,这也意味着 WebGL 并不符合现代 GPU 的设计,导致 CPU 性能和 GPU 性能问题。这也使得在现代本地 GPU API 之上实现 WebGL 变得越来越困难。WebGL 2.0 Compute 是一次尝试在 WebGL 中添加通用计算功能,但与本地 API 的阻抗不匹配使得这项工作难度极大。WebGL 2.0 Compute 的贡献者决定将他们的努力集中在 WebGPU 上。

另一份参考文档: webgl-vs-webgpu #[[Reference]]

一个最简WebGPU示例

如何学习

教程和示例

入门学习教程:您的第一个WebGPU应用 ,我只跟到第5步

跟着示例学习: WebGPU-Step-By-Step

官网示例

之前做的DOM版生命游戏:game-of-life-dom,后续做一版3D WebGPU版。

WebGPU的应用

当前实现和兼容性:implementaion status

GPU计算

示例,计算矩阵乘积:tfjs-webgpu

3D类应用(VR、AR)

Three.js

官方说正在支持

Babylon.js

Orillusion

一个适合入门3D应用开发的基于WebGPU的引擎(框架)。

相机

透视相机

title{:height 161, :width 294}

正交相机

title{:height 152, :width 296}

几何体

内置几何体:orillusion-mesh-geometry

内置几何体,官网示例:Internal Geometry

GLTF —— JPEG of 3D

资源

threejs examples 有一些资源学习时可以使用。

https://sketchfab.com/feed ,大部分收费,AI加持下是否会变便宜?

还有什么

光照和阴影

动画

物理引擎

多媒体