WebGPU

大多数程序员对 CPU 和**顺序**编程都有深入的了解，因为他们是在为 CPU 编写代码的过程中长大的，但许多程序员不太熟悉 GPU 的内部工作原理以及它们如此特别的原因。在过去的十年中，GPU 由

您知道吗，JavaScript 现在有一种本地内置的方法可以进行对象的深层复制？ 没错，这个 structuredClone 函数内置于 JavaScript 运行时中.

WebGPU 是即将推出的 Web API，可提供对GPU的底层控制并用于通用目的计算任务 。 我对计算机图形不是很有经验。我通过阅读有关如何使用 OpenGL 构建游戏引擎的教程了解了 WebGL

本文接续基础知识文章。我们将从一些基本的计算着色器开始，然后希望继续讨论解决现实世界问题并写一些示例。 在上一篇文章中，制作了一个非常简单的计算着色器，可以将数字加倍。 这是着色器 然后像这样有效地运

有关 WGSL 的深入概述，请参阅 WGSL 之旅。还有实际的 WGSL 规范，尽管它可能很难理解，因为它是为语言律师编写的 😂 本文假设您已经知道如何编程。它可能过于简洁，但希望它可以帮助您理解和编

在 WebGPU 中，提供给它的几乎所有数据都需要在内存中设定布局，以匹配在着色器中定义的内容。这与 JavaScript 和 TypeScript 形成鲜明对比，后者很少出现内存布局问题。 在 WG

在上一篇文章中，我们必须将 F 移到视锥体前面，因为 mat4.perspective 函数 将眼睛放在原点 (0, 0, 0) 并且把对象 放到 位于眼前 -zNear 到 -zFar 之间的视锥体

本文将尝试向您介绍 WebGPU 的基础知识。 在阅读本文之前，希望您应该已经对 mapping arrays, destructuring assignment, spreading values,

在上一篇文章中，我们介绍了一些关于 WebGPU 的非常基础的知识。在本文中，我们将回顾阶段间变量( inter-stage)的基础知识。 Inter-stage variables come int

上一篇文章讲的是阶段间变量。这篇文章将是关于uniforms的基础知识。 Uniforms are kind of like global variables for your shader. You

这篇文章是关于存储缓冲区的，我们从上一篇文章暂停的地方继续。 存储缓冲区在许多方面类似于统一缓冲区。如果我们所做的只是将 JavaScript 中的 UNIFORM 更改为 STORAGE 并将 WG

在上一篇文章中，我们将顶点数据放在存储缓冲区中，并使用内置的 vertex_index 对其进行索引。虽然该技术越来越受欢迎，但向顶点着色器提供顶点数据的传统方法是通过顶点缓冲区和属性。 顶点缓冲区就

在本文中，我们将介绍纹理的基础知识。在之前的文章中，我们介绍了 将数据传递到着色器的主要方法，它们是inter-stage variables, uniforms, storage-buffers,

我们在上一篇文章中介绍了有关使用纹理的一些基础知识。在本文中，我们将介绍从图像导入纹理。 在上一篇文章中，通过调用 device.createTexture 创建了一个纹理，然后通过调用 device

让我们通过JavaScript 来模拟WebGPU的实现， 来尝试解释 GPU如何使用顶点着色器和片段着色器 。这样会对对真正发生的事情有一个直观的感受。 如果你熟悉 Array.map，稍微认真思考

我们将开始编写与顶点缓冲区文章中的示例类似的代码，但这次将绘制单个 F 而不是一堆圆，并使用索引缓冲区来保持数据更小。 让我们在像素空间而不是裁剪空间中工作，就像 Canvas 2D API 我们将制

单位圆是半径为 1.0 的圆。 下图是一个单位圆。 [注释1] 在上图中，当围绕圆拖动蓝色手柄时，X 和 Y 位置会发生变化，代表该点在圆上的位置。且在顶部，Y 为 1，X 为 0。在右侧，X 为 1

缩放变换与平移变换一样简单。 将顶点位置乘以想要的比例。以下是之前示例中对着色器的更改。 而且，和之前前一样，需要更新uniform 缓冲区大小，以便为scale 留出空间。 在渲染时需要更新缩放比例

在最近的 3 篇文章中，介绍了如何平移、旋转和缩放顶点位置。平移、旋转和缩放都被认为是一种变换。这些变换中的每一个都需要对着色器进行修改，并且 3 个转换中的每一个都依赖于顺序。 在之前的示例中，先缩

在上一篇文章中，讨论了矩阵的工作原理。讨论了如何通过 1 个矩阵和一些神奇的矩阵数学来完成平移、旋转、缩放，甚至从像素到裁剪空间的投影。实现 3D 操作 只需要再向前迈一小步。 在之前的 2D 示例中