AI 摘要：文章宣布 WebGPU 正式在 Chrome、Edge、Firefox 与 Safari 上全面支持，这标志着网页端高性能计算和 3D 图形的新时代。WebGPU 不仅替代 WebGL，更在性能与设计层面跃升，支持现代 GPU 功能、Compute Pipeline（通用计算管线）和 Render Bundles（渲染指令集复用）等特性，为游戏、AI 推理、视频处理和物理仿真提供桌面级性能。文章还介绍了各浏览器与操作系统的支持情况以及生态圈的成熟度，包括 Babylon.js、Three.js、ONNX Runtime、Transformers.js 等框架的支持，并感谢各大公司与开发者的多年协作。

1. WebGPU 的意义与特性
• WebGPU 是 WebGL 的继任者，提供更现代、更高效的 GPU 接口。
• 设计包含符合 JavaScript 习惯的 API 与现代着色语言（Shader Language）。
• 支持 Compute Pipeline，让网页端可以执行机器学习推理、模型训练、视频处理等高性能任务。
• Render Bundles 能记录并重用渲染命令，提高性能、降低 CPU 开销。
• 示例：Babylon.js 的 Snapshot Rendering 通过 Render Bundles 提升渲染性能约 10 倍。

2. 浏览器与系统支持现状
• Chrome / Edge：在 Windows（Direct3D 12）、macOS、ChromeOS 自 v113 起支持；Android 自 v121 起支持。
• Firefox：Windows 自 v141 起支持，macOS ARM64 自 v145 起支持。
• Safari：在 macOS、iOS、iPadOS、visionOS 的版本 26 中支持。
• Linux、Android 及部分平台的支持仍在持续开发中，可查看 Implementation Status。

3. WebGPU 生态系统的成长
• 主流框架已支持 WebGPU，包括 Babylon.js、Three.js、PlayCanvas、ONNX Runtime、Transformers.js、React Native WebGPU、TypeGPU、Unity WebGPU。
• 底层引擎如 Dawn (Chromium) 与 wgpu (Firefox) 可独立使用，方便跨平台开发。
• 借助 WebAssembly (Wasm)、Emscripten、Rust web-sys 等工具，可将原生 GPU 应用移植至 Web。

4. 致谢与社区协作
• WebGPU 的成功来自 W3C GPU for the Web Working Group 的多年协作。
• 感谢多家公司与贡献者，包括 Apple、Google、Intel、Microsoft、Mozilla 等。
• 特别致谢开发者 Corentin Wallez、Ken Russell、Thomas Lucchini 等。

web.dev

WebGPU is now supported in major browsers  |  Blog  |  web.dev

Read about the biggest web graphics launch since WebGL. WebGPU is supported across major browsers, bringing unparalleled performance to the web.

AI 摘要：介绍 WebGPU 的基础知识及使用 GPU-Curtains 库创建 3D 场景的入门教程。

本文是 WebGPU 系列教程的第一部分，旨在帮助开发者从 WebGL 过渡到现代图形 API WebGPU。文章通过构建一个包含 4 个独立场景的落地页，逐步演示如何利用 GPU-Curtains 库实现以下功能：
1. 基础网格绘制：创建随机分布的立方体和球体，调整位置以适应视口。
2. 动画与交互：添加入场动画（GSAP 时间轴）和基于滚动的场景可见性控制。
3. 着色与光照：通过自定义 WGSL 着色器实现 Lambert 光照模型，管理环境光和定向光。
4. 性能优化：禁用视锥体裁剪、复用几何体缓冲、异步设备初始化等。
作者还对比了 WebGPU 与 WebGL 的优势（如异步调用、计算着色器、多画布渲染），并详细解析了 GPU-Curtains 库的设计思想与核心
API。

OKAY DEV®

Dive Into WebGPU—Part 1 (Tutorial)

Learn WebGPU with GPU-Curtains, a lightweight library for 3D scenes. Master shading, object manipulation, and particle systems in this 4-part tutorial.