WebGPU�划往技术新大陆的船桨
目录
01
02
03
04
发展历程
功能与特性
应用场景和示例
展望与总结
WebGPU 的发展历程
Section 01
赋予 Web App 操控 GPU 的能力
WebGL 的继任者
基于新时代的原生 API
WebGPU：一套 Web 标准
什么是 GPU
用途：渲染、计算
领域：视觉/游戏、机器学习、加密货币
什么是 WebGPU？
平台支持
建立过程
WebGPU 现状
既生 WebGL，
何生 WebGPU？
WebGL：A History
Why Not WebGL?
OpenGL�1.0
OpenGL�2.0
OpenGL�ES 2.0
OpenGL�3.2
OpenGL�ES 3.0
WebGL�1.0
2017
WebGL�2.0
2012
2011
2009
2007
2004
1992
Why Not WebGL?
与此同时，�GPU 硬件一直在迅猛进化
依赖 OpenGL
全局状态设计
基于古早 GPU 架构
进化迟缓
不易学不易用
无法满足新需求
无法与现代 GPU 融合
平台/厂商减少支持
Why Not WebGL?
Why WebGPU?
功能与特性
Section 02
WebGPU 架构图
Adapter�&�Device
Section #
核心概念
Vertex、Fragment、Compute�嵌在 JavaScript 中的 GPU 代码
WebGPU Shader Language
同样是 W3C 标准
Shader
WGSL
Shader & WGSL
核心概念
Hello World：画一个三角形
图形渲染
功能
图形渲染
功能
代码示例：简单的计算
// JavaScript 代码�const input = new Float32Array([1, 3, 5]);
�// Compute Shader�@group(0) @binding(0) var<storage, read_write> data: array<f32>;
@compute @workgroup_size(1) fn computer(
@builtin(global_invocation_id) id: vec3<u32>
) {
let i = id.x;
data[i] = data[i] * 2.0;
}
特性
应用场景与示例
Section 03
新应用场景
技术领域的新大陆！
+
Web ML
Section #
+
交互式网页、视频
数据可视化
艺术创作
游戏
Web XR
展望与总结
Section 04
即将加入的新功能
融入生态
关于安全/隐私的讨论
我们能做什么？
性能优化
开发上层应用
封装框架/库
……
参与制定标准
翻译资料
做教程、评测
建设资源/讨论社区
……
总结
感谢倾听
钱俊颖
Keep 前端工程师 / 掘金优秀创作者