但是，如果我们需要频繁更新顶点颜色（例如在动画中），那么将属性分离到不同的缓冲区中可能会更好。在这种情况下，使用单个缓冲区效率更高，因为它可以避免创建额外的资源，并且无需将数据从 CPU 复制到 GPU 两次。在前面的示例中，我们使用两个单独的缓冲区和两个 location 来提供顶点的位置和颜色，但是使用多个缓冲区并不总是必要的或最佳的。首先，我们修改颜色属性描述符。设置为 24 字节 (4 * 6)，而不是以前的 12，因为每个顶点现在有 6 个与其关联的浮点数（3 个用于位置，3 个用于颜色）。

值得注意的是，这种插值不仅限于颜色，我们在顶点阶段输出的任何值都将由 GPU 进行插值，以便为每个片段分配适当的值，特别是对于那些不直接位于顶点的片段。这种机制非常有用，因为考虑到场景中的片段通常远多于顶点，单独为所有片段指定值是不切实际的，所以我们可以依靠 GPU 根据仅在每个顶点定义的值有效地生成这些值。通过为不同的顶点分配不同的颜色，我们现在可以解决之前提出的问题：如何为位于三角形中间的那些片段生成片段颜色？然而，最有趣的方面是这些顶点之间发生的情况，我们可以观察到三角形表面颜色的平滑过渡。

在我们之前的教程中，我们在片段着色器中对输出颜色进行了硬编码。这次，我们将把这种硬编码转移到顶点阶段，并将颜色从顶点阶段传递到片段阶段。本节的内容不多，请访问。你可以修改示例代码并亲自尝试这个概念，尝试为每个顶点分配不同的颜色，并观察 GPU 如何在三角形表面上插入这些颜色。在顶点阶段，我们处理单个顶点，而在片段阶段，我们处理单个片段。这里有一个值得思考的有趣问题：如果我们为每个顶点分配不同的颜色，GPU 将如何为片段分配颜色？在顶点和片段阶段之间，有一个称为光栅化的自动过程，由 GPU 处理。

一部2024新的WebGPU教程，作者Shi Yan。内容很好，翻译过来与大家共享，内容上会有改动，加上自己的理解。更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加微信号：digital_twin123在我们之前的教程中，我们在没有提供显式顶点数据的情况下绘制了一个三角形，绘制原理是在着色器中计算顶点位置。虽然这种方法适用于简单的几何形状，但对于大多数现实场景来说是不切实际的。

在前面的示例中，我们没有创建任何着色器。着色器程序是在GPU上执行的程序，一般来说，着色器程序主要分为三种类型：顶点着色器、片段着色器和计算着色器。计算着色器用于通用计算，而顶点和片段着色器与渲染相关。顶点着色器处理几何体的每个顶点，确定其在屏幕上的最终位置。然后，片段着色器确定由这些顶点定义的形状内每个像素的颜色。这些着色器共同将几何图元（例如点或三角形）转换为我们在屏幕上看到的像素。...</现在我们了解了着色器的作用，接下来我们将它们添加到我们的项目中。

一部2024新的WebGPU教程，作者Shi Yan。内容很好，翻译过来与大家共享，内容上会有改动，加上自己的理解。更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123创建空画布一开始可能看起来比较枯燥，但对于任何涉及 WebGPU 编程的项目来说，它都是一个重要的起点。在本节中，我们将为全书的所有编程练习奠定基础。

在结束本节之前，我们首先讨论一下为什么需要 GPU。为什么我们不能只使用强大的 CPU 来处理图形工作？打个比方，想象一下你是一个工厂主，你总是想雇用拥有博士学位的员工来替你打工吗？如果你正在建设一家专利工厂，那么聘请博士是非常有意义的。然而，如果你正在建造一家香蕉罐头工厂，并且任务只是剥香蕉皮，那么雇用 100 只猴子可能是更好的选择。使用相同数量的资源，可以维持更大的猴子团队。博士非常有能力，可以在研究项目上进行良好的合作，但剥香蕉不需要广泛的研究能力或合作。

学校毕业后，我找到了第一份工作，担任系统软件工程师，负责 OpenGL（GPU 驱动程序）工作。但当时我对驱动程序的了解还相当有限。在大学里，GPU和驱动软件并不是计算机科学研究的重点，所以我只知道驱动程序是一个软件，充当硬件和应用程序之间的桥梁。我不知道它是如何工作的，也不知道它传输到硬件的数据类型。直到我加入团队并开始从事该项目后，我才对 GPU 驱动程序的运行方式及其在图形渲染过程中的关键作用有了更深入的了解。作为图形工程师，我们编写程序在屏幕上绘制像素。

WebGPU 是一种新的图形 API，概念上与其他 API 类似，但目标不同：它的目标是将本机的图形能力引入到Web上。在此概述之后，我们将探索 WebGPU 最简单的用法：绘制三角形，这是 3D 图形的基本元素。我认为涵盖这些主题是至关重要的。在撰写本文时，高斯泼溅是一种尖端的场景表示和渲染技术，能够捕获和渲染现实生活中的 3D 场景，具有高度的真实感和实时性能。对于想学习图形编程的来说，几年前，OpenGL 是初学者的首选 API，而 DirectX 则是那些对游戏开发感兴趣的人的替代选择。

更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123此处接上文：Threejs中的WebGPU实践（1-1）

更多精彩内容尽在，关注公众号：sky的数孪技术，技术交流、源码下载请添加VX：digital_twin123。

在本教程中，我们将使用 WebGPU 技术中的计算着色器实现图像效果。更多精彩内容尽在。

使用WebGPU，我们需要自己优化绘图命令，类似于驱动层对WebGL所做的事情。因此，如果编码没有适当优化，结果可能会比WebGL慢。确定每个 WebGPU 函数调用的性能特征并优化渲染代码非常重要。为了做到这一点，在某些情况下可能需要检查我们正在创建的库或应用程序的设计。在许多情况下，需要将着色器可以访问的大部分数据预先部署到 GPU 上的缓冲区中。

WebGPU 虽然也有一个总管家一样的对象 —— device，类型是 GPUDevice，表示可以操作 GPU 设备的一个高层级抽象，它负责创建操作图形运算的各个对象，最后装配成一个叫 “CommandBuffer（指令缓冲，GPUCommandBuffer）”的对象并提交给队列，这才完成 CPU 这边的劳动。在 WebGL 中，始终会调用着色器的入口main函数，但在 WebGPU 中，当使用着色器时，可以指定要调用的函数。当然，仍然可以自己检查错误，但即使什么都不做，仍然可以获得一些有用的信息。

首先，在着色器中定义一个常量。稍后可以从 JavaScript 端覆盖该常量。这次我们在片段着色器中定义它。@fragment} else {通过在常量名称之前添加override，该常量就成为可以从 JavaScript 端覆盖的常量。是否指定默认值并不重要，但如果不指定，则必须始终从 JavaScript 端覆盖它。如果不覆盖，将使用着色器端定义的默认值。

此时用作参数的描述符是一个名为 GPURenderBundleDescriptor 的类型， 注意创建RenderPassEncoder时与GPURenderPassDescriptor不同。由于注册的绘图命令在内部被转换为GPU可以理解的命令格式， 比绘制时每次都用RenderPassEncoder进行转换效率更高。命令可以重复使用，这减少了为每个绘制调用注册命令的成本。创建 RenderBundleEncoder 后，像注册 RenderPassEncoder 一样注册绘图命令。

我们可以从屏幕上看到三角形被绘制到纹理上。在WebGL中，需要生成一个FBO（Framebuffer对象）来设置渲染目标，并且FBO中的绑定操作也很复杂。WebGPU 上的纹理渲染给人的印象是编码变得更加直观。

我们现在采用了一些设置来开启深度测试，也将纹理应用于立方体。

以上，使用UniformBuffer的绘制就完成了。虽然这个立方体看起来很奇怪。。。这是因为我们还没有在绘图时启用深度测试。下次我们将启用深度测试以确保正确绘制立方体。

绘制结果没有明显变化，但对 IndexBuffer 的支持已完成，而且我们还不需要更改着色器代码。

通过上面的编码修改，现在我们可以使用 VertexBuffer 绘制矩形了。

在本文中，我们将使用 WebGPU 绘制一个简单的三角形。