WebGPU实战教程

# WebGPU 实战教程 来源：https://shi-yan.github.io/webgpuunleashed/ 作者：Shi Yan 作者：Shi Yan 欢迎阅读《WebGPU 实战教程》——带你走进图形编程的动态世界。这本免费书籍将基于我个人的学习经历，教你使用 WebGPU 进行 JavaScript 图形编程。 我为什么要写这本书？最近，有位朋友问我，他的孩子应该学什么来入门图形编程。几年前，OpenGL 是初学者的首选 API，而对游戏开发感兴趣的人则可以选择 DirectX。 然而，近年来图形 API 的格局发生了显著变化。新一代 API 已经涌现，包括 Vulkan、Metal 和 DirectX 12。这些 API 更轻量、性能更高，但需要更冗长的代码。虽然概念相似，但它们比 OpenGL 更加碎片化，有些仅在某些平台上可用。这种碎片化常常让初学者感到困惑，不确定该从哪个 API 开始入手。 这时，WebGPU 登场了。它是一个新的图形 API，概念上与其他 API 相似，但目标不同：将原生图形能力带到 Web 上。与其他在图形驱动中有原生实现的 API 不同，WebGPU 本质上是上述 API 的一个封装。这使得 WebGPU 作为入门 API 具有多个优势： 1. 作为封装，WebGPU 旨在成为其他 API 的公共子集，因此相对更简单。 2. 作为 Web 图形 API 标准，WebGPU 在所有平台上均可使用。 3. 对于对原生开发感兴趣的人来说，有 C++ 和 Rust 的 WebGPU 实现可用。 随着 WebGPU 的近期发布，现在正是学习它的最佳时机。 我们将从 GPU 驱动和 GPU 管线概述开始——这些内容在其他图形 API 书籍中往往被忽略。许多能够实现简单图形应用的学生对 GPU 驱动以及图形软件如何与底层硬件交互缺乏了解。我认为涵盖这些主题至关重要。 在概述之后，我们将探索 WebGPU 最简单的用法：绘制三角形（3D 图形的基本元素）。虽然这听起来很基础，但掌握它对于理解更复杂的概念至关重要。接着，我们将介绍 2D 渲染技术和 3D 场景控制，这些是实现完整的 Web 图形应用所必需的技能。 在高级章节中，我们将深入探讨使用 WebGPU 进行 GPU 计算，并探索超越简单三角形的高级渲染技术。过去通过 WebGL 无法实现的 Web GPU 计算，现在借助 WebGPU 成为可能。这开启了令人兴奋的可能性，包括用于 Web 应用的潜在 GPU AI 推理。 作为本书的最终教程，我们将实现高斯泼溅渲染——一个结合 GPU 计算和渲染的复杂示例。在撰写本文时，高斯泼溅是一种尖端的场景表示和渲染技术，能够以高度逼真和实时的性能捕捉并渲染来自现实生活的 3D 场景。 我付出了相当大的努力来呈现本书的内容。最初计划写一本传统书籍，但我意识到，对于技术书籍来说，交互式网页格式会更有效。这种方法允许： - 通过视频更好地解释概念 - 通过链接轻松引用参考资料 - 一个在线游乐场，托管所有代码示例，你可以运行演示并修改代码 启动游乐场 - 5\_06\_骨骼动画 (https://shi-yan.github.io/webgpuunleashed/code/code.html#5_06_skeleton_animation) 本书中的所有代码片段都与游乐场示例互相引用。为了避免冗长的代码让读者不堪重负，我仅在文章中包含了相关的代码片段。文本与游乐场之间的导航非常方便。 这种在线格式的另一个优点是能够接收读者的反馈。如果你有任何建议或改进，请随时通过 GitHub 讨论和问题分享。 让我们一起踏上这段 WebGPU 之旅吧！