由施焱撰写，欢迎来到《WebGPU 解放》——通向图形编程动态世界的门户。这本免费书籍将教你如何使用 WebGPU 在 JavaScript 中进行图形编程，源自我自己的学习旅程。我为什么会写这本书？最近，一位朋友问我他的孩子应该学习什么以开始图形编程。几年前，OpenGL 是初学者的首选 API，而 DirectX 则是对游戏开发感兴趣的人士的替代选择。然而，近年来图形 API 的格局发生了显著变化。新一代 API 应运而生，包括 Vulkan、Metal 和 DirectX 12。这些 API 更加轻量和高效，但需要更冗长的代码。虽然概念相似，但它们比 OpenGL 更加支离破碎，其中一些仅在特定平台上可用。这种碎片化往往使初学者感到困惑，让他们无法确定应该从哪个 API 开始。这里出现了 WebGPU，这是一个在概念上与其他 API 类似但目标不同的新图形 API：将原生图形功能引入网页。与其他具有图形驱动程序中原生实现的 API 不同，WebGPU 本质上是对前述 API 的一个包装器。这使得 WebGPU 作为首个 API 具有多个吸引人的理由：作为一个包装器，WebGPU 旨在成为其他 API 的共同基础，因此相对简单。作为网页图形 API 标准，WebGPU 在所有平台上均可用。对于那些对原生开发感兴趣的人，已有 C++ 和 Rust 的 WebGPU 实现。随着 WebGPU 的最近发布，现在正是学习它的理想时机。我们将从 GPU 驱动程序和 GPU 管道的概述开始——在其他图形 API 书籍中常常被忽视的话题。许多能够实现简单图形应用程序的学生，对于 GPU 驱动程序以及图形软件如何与底层硬件交互的理解却常常不足。我认为涵盖这些主题非常重要。在此概述之后，我们将探索 WebGPU 的最简单用法：绘制三角形，这是 3D 图形的基本元素。虽然这听起来很基础，但掌握它对于理解更复杂的概念至关重要。然后我们将涵盖 2D 渲染技术和 3D 场景控制，这些是实现完整网页图形应用程序所需的技能。在高级章节中，我们将研究使用 WebGPU 的 GPU 计算，并探索超越简单三角形的高级渲染技术。以前通过 WebGL 无法实现的网页 GPU 计算，现在通过 WebGPU 成为可能。这开启了激动人心的可能性，包括在网页应用程序中潜在的 GPU AI 推理。作为本书的最后教程，我们将实现高斯喷溅渲染——一个结合 GPU 计算和渲染的复杂示例。在撰写本文时，高斯喷溅是一种领先的场景表示和渲染技术，能够以高度真实和实时性能捕获和渲染现实生活中的 3D 场景。我在呈现本书内容方面投入了大量精力。最初计划以传统书籍的方式呈现，但我意识到互动网页格式对于技术书籍来说更为有效。这种方式使得：通过视频更好地解释概念，便于通过链接引用参考资料，提供一个在线平台托管所有代码示例，您可以在其中运行演示和修改代码。启动 Playground - 5_06_skeleton_animation。书中的所有代码片段都与平台示例相互引用。为避免让读者被冗长代码所淹没，我只在文章中包含相关代码段。文本与平台之间的导航非常简单。在线格式的另一个优势是能够接收读者反馈。如果您有建议或改进意见，请随时通过 GitHub 讨论和问题与我分享。让我们一起踏上这段 WebGPU 的旅程！