第二部分 WebGPU基础 在这一部分中，我们将学习贯穿本书后续内容的WebGPUWebGPUWebGPU基础概念以及技术。掌握了这些基本功后，我们就能写出更加有趣的应用程序。以下是本部分各章的简介。 第4章“WebGPU的初始化” 这一章将带领读者进一步理解WebGPU并学习如何对它进行初始化，为后续的3D绘图工作打好基础。另外，也会介绍一些WebGPUWebGPU的基本技术主题，例如表面、像素格式（pixel format）、页面翻转（pageflipping）、深度缓冲（depth buffering）和多重采样（multisampling）。我们还会学习用性能计数器（performancecounter）度量时间，用于统计每秒中所渲染的帧数。除此之外，还会给出一些有关WebGPU的调试小窍门。最后，我们会开发和使用属于自己的应用程序框架——当然，这并不是指SDK框架。 第5章“渲染流水线” 在这篇幅较长一章里将对渲染流水线（rendering pipeline）进行全面地讲解。渲染流水线是基于虚拟摄像机（virtual camera）的视角来进行观察，并据此生成场景2D图像的一系列步骤。在此，我们将学习定义3D场景、控制虚拟摄像机，以及将3D几何体投影至一个2D图像的平面中。 第6章“利用WebGPU绘制几何体” 这一章将关注：定义3D几何体、配置渲染流水线、创建顶点着色器（vertexshader）和像素着色器（pixel shader），以及向渲染流水线提交用于绘制的几何体等操作相关的WebGPU API接口与方法。结束本章的学习后，我们将能够绘制一个3D立方体并从不同的角度来观赏它。 第7章“利用WebGPU绘制几何体（续）” 这一章将介绍本书后续要用到的几种绘制模式。借助优化CPU与GPU之间的工作负载平衡，引出重新组织绘制物体的渲染流程这一主题。本章最后将展示怎样渲染出更为复杂的物体，如栅格、球体、立柱乃至模拟动态的波浪。 第8章“光照” 这一章展示了光源的创建过程，并定义了光与不同材质表面之间的交互。在此，我们还特别演示了如何用顶点着色器和像素着色器来实现平行光光源（directionallights）、点光源（point lights）和聚光灯光源（spotlights）。 第9章“纹理贴图” 这一章描述了纹理贴图（texturemapping），这是一种通过将2D图像数据映射到3D图元上、继而使场景更加真实的技术。例如，运用纹理贴图，我们就可以把2D砖块的图片应用到一个3D立方体的表面，以此来模拟砖块。其他关键的纹理主题也将在这一章讲授，其中包括纹理平铺（texture tiling）和动态纹理变换（animated texturetransformation）。 第10章“混合” 利用混合（blending）技术，我们便可以实现许多如透明度（transparency）这样的特效。另外，我们将在这一章探讨HLSL内置的裁剪函数（clip），通过它便可以从可视的图像中掩盖住指定的部分，比如说，此函数可用于绘制铁丝网和门等物体。另外，本章还会展示如何实现雾的效果。 第11章“模板” 这一章介绍了模板缓冲区（stencilbuffer），顾名思义，它就像是一块“模板”，允许我们阻止特定像素的绘制操作。而且，这种遮罩像素的技术在各种情况下都适用。为了使读者充分理解本章的主题，我们将深入研究用模板缓冲区实现平面反射（planar reflection）和平面阴影（planarshadow）的方法。 第12章“几何着色器” 这一章展示了如何编写几何着色器（geometry shader）。几何着色器比较特殊，因为它可以创建和销毁整个几何图元（geometric primitive）。几何着色器的常见应用场合有公告牌（billboard）、毛发渲染（furrendeing）、细分（subdivision）和粒子系统（particlesystem）。另外，这一章还阐释了图元ID和纹理数组（texturearray）等概念。 第13章“计算着色器” 计算着色器（compute shader）是一种可编程着色器。WebGPU提供的计算着色器并非直属于渲etransformation）。 第10章“混合” 利用混合（blending）技术，我们便可以实现许多如透明度（transparency）这样的特效。另外，我们将在这一章探讨HLSL内置的裁剪函数（clip），通过它便可以从可视的图像中掩盖住指定的部分，比如说，此函数可用于绘制铁丝网和门等物体。另外，本章还会展示如何实现雾的效果。 第11章“模板” 这一章介绍了模板缓冲区（stencilbuffer），顾名思义，它就像是一块“模板”，允许我们阻止特定像素的绘制操作。而且，这种遮罩像素的技术在各种情况下都适用。为了使读者充分理解本章的主题，我们将深入研究用模板缓冲区实现平面反射（planar reflection）和平面阴影（planarshadow）的方法。 第12章“几何着色器” 这一章展示了如何编写几何着色器（geometry shader）。几何着色器比较特殊，因为它可以创建和销毁整个几何图元（geometric primitive）。几何着色器的常见应用场合有公告牌（billboard）、毛发渲染（furrendeing）、细分（subdivision）和粒子系统（particlesystem）。另外，这一章还阐释了图元ID和纹理数组（texturearray）等概念。 第13章“计算着色器” 计算着色器（compute shader）是一种可编程着色器。WebGPU提供的计算着色器并非直属于渲染流水线。通过它即可将图形处理器（GPU）应用于通用计算（general purpose computation）。例如，一款图像应用软件可以利用计算着色器，实现GPU对图像处理算法的加速。由于计算着色器是WebGPU的一部分，所以它的读写操作都依赖于WebGPU的资源。这样一来，我们就可以直接把计算结果整合到渲染流水线中。因此，除了通用计算以外，计算着色器依然可用于3D渲染。 第14章“曲面细分阶段” 这一章将探索渲染流水线的曲面细分阶段（tessellation stage）。利用这个阶段中的镶嵌技术便能够将几何体细分为更小的三角形，接着再以某种方式对新生成的顶点进行偏移。其中，增加三角形数量的动机是使网格增添细节。本章将详解这项技术的工作原理，我们会展示怎样根据四边形面片的观察距离来对它进行镶嵌化处理，也将演示如何来渲染三次贝塞尔四边形面片的表面。
第三部分 主题篇 在本部分中，我们的重点是通过WebGPU实现几组3D应用来演示多种相关技术，例如渲染天空场景、环境光遮蔽（ambient occlusion，也有译作环境光吸收等）、角色动画（character animation）、拾取（picking）、环境贴图（environment mapping，也有译作环境映射）、法线贴图（normalmapping，也有译作法线映射）以及阴影贴图（shadowmapping，也有译作阴影映射）。 第15章“构建第一人称视角的摄像机与动态索引” 本章将展示怎样按第一人称的游戏视角来设计一个摄像机系统。示例中，我们会通过键盘与鼠标的输入操作来控制此摄像机。除此之外，本章还会介绍WebGPU中新引进的动态索引（dynamicindexing）技术，以此对着色器中的纹理对象数组进行动态索引。 第16章“实例化与视锥体剔除” 实例化（instancing）是一种硬件支持技术，可以针对同一几何图形以不同参数（意即在场景中的不同位置或具有不同的颜色）的绘制情况进行优化。视锥体剔除也是一种优化技术，当整个物体都处于虚拟摄像机的视野之外时，我们就可利用此技术将已提交至渲染管线的对应物体完全丢弃。我们还会在此章展示如何计算网格的包围盒与包围球。 第17章“拾取” 本章会讲述如何来确定用户通过鼠标选取的特定3D对象（或3D图元）。3D游戏与3D应用中经常会用到此技术，使用户利用鼠标与3D环境交互。 第18章“立方体贴图” 本章将演示如何将环境贴图映射到任意形状的网格之上，还会通过环境图来为天空球（sky-sphere）贴图。 第19章“法线贴图” 本章将展示如何通过使用法线图（normal map，即存有法向量的纹理）来为实时光照效果增添更加丰富的细节。由于法线图中的表面法线比逐顶点法线（per-vertex normal）的粒度更细，因此光照效果也更加真实。 第20章“阴影贴图” 阴影贴图是一种实时的阴影绘制技术，借此可以将阴影渲染到任意形状的几何体之上（即不仅限于平面阴影）。本章还会介绍投影纹理的工作原理。 第21章“环境光遮蔽” 在使场景变得更加真实的过程中，光照扮演着极为重要的角色。本章会根据场景中某点对入射光被周围物体遮挡的程度来改良光照方程中的环境光项。 第22章“四元数” 本章将介绍称为四元数（quaternion）的数学对象（mathematical object），将展示用单位四元数表示旋转，并用简便的方法对它进行插值，以此来简洁地实现插值以及旋转操作。一旦可以实现上述操作，我们便可创建3D动画。 第23章“角色动画” 本章涵盖了角色动画理论，并展示怎样通过一个复杂的行走动画来驱动人形游戏角色。