![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webgpu
文章平均质量分 94
webgpu
xuejianxinokok
这个作者很懒,什么都没留下…
展开
-
19. WebGPU —计算着色器(compute shader)
WebGPU 是即将推出的 Web API,可提供对GPU的底层控制并用于通用目的计算任务。我对计算机图形不是很有经验。我通过阅读有关如何使用 OpenGL 构建游戏引擎的教程了解了 WebGL 的点点滴滴,并通过观看 Inigo Quilez 在 ShaderToy 上仅使用着色器而不使用任何 3D 网格或模型来完成令人惊叹的事情,从而了解了有关着色器的更多信息。这让我足以在 PROXX 中构建诸如背景动画之类的东西,但我对 WebGL 一直不满意,我将很快解释原因。原创 2023-07-04 13:55:08 · 654 阅读 · 1 评论 -
18. WebGPU 计算着色器
缺省时每个维度默认为 1,因此 @workgroup_size(1) 等同于 @workgroup_size(1, 1, 1)。如果将工作组定义为 @workgroup_size(3, 4, 2) ,那么将定义 3 * 4 * 2 个线程,或者换句话说,每个工作组有 24 线程。如果随后调用。原创 2023-06-29 10:10:02 · 402 阅读 · 0 评论 -
17. WebGPU WGSL
有关 WGSL 的深入概述,请参阅。还有实际的,尽管它可能很难理解,因为它是为语言律师编写的 😂本文假设您已经知道如何编程。它可能过于简洁,但希望它可以帮助您理解和编写 WGSL 着色器程序。原创 2023-06-27 11:15:09 · 430 阅读 · 0 评论 -
16. WebGPU 数据内存布局
在 WebGPU 中,提供给它的几乎所有数据都需要在内存中设定布局,以匹配在着色器中定义的内容。这与 JavaScript 和 TypeScript 形成鲜明对比,后者很少出现内存布局问题。在 WGSL 中,当编写着色器时,通常定义 struct。结构有点像 JavaScript 对象,声明结构的成员,类似于 JavaScript 对象的属性。但是,除了给每个属性一个名称之外,还必须给它一个类型。并且,在提供数据时,需要计算该结构的特定成员将出现在缓冲区中的哪个位置。原创 2023-06-26 10:54:04 · 199 阅读 · 0 评论 -
15. WebGPU 相机
例如,在 X 中平移 123 的矩阵的逆矩阵 是在 X 中平移 -123 的矩阵。中所讨论的那样,因为我们使用 +Y = 向下 来匹配大多数 2D 像素库(2D pixel libraries),所以我们将三角形顶点顺序倒置以用于普通 3D,并最终剔除 ‘front’ 朝向的三角形而不是正常的 ‘back’ 朝向三角形,因为将 Y 缩放负 1。换句话说,如果你有一个指向东南的向量和一个向上的向量,然后计算叉积,你将得到一个指向西南或东北的向量,因为它们是垂直于东南的 2 个向量及以上。原创 2023-06-25 09:31:51 · 278 阅读 · 0 评论 -
14. WebGPU 透视投影
在上一篇文章中,介绍了如何制作 3D ,但 3D 没有任何透视效果。它使用的是所谓的“正交”视图,它有其用途,但通常不是人们说“3D”时想要的。现在,需要添加透视图。究竟什么是透视?基本特征就是离得越远的东西显得越小。看看上面的例子,远处的东西被画得更小了。给定我们当前的示例,一种使距离更远的东西看起来更小的简单方法是将剪辑空间 X 和 Y 除以 Z。这样想:如果你有一条从 (10, 15) 到 (20,15) 的线,它有 10 个单位长。在我们当前的示例中,它将被绘制为 10 像素长。原创 2023-06-23 09:30:00 · 228 阅读 · 0 评论 -
13. WebGPU 正交投影
在上一篇文章中,讨论了矩阵的工作原理。讨论了如何通过 1 个矩阵和一些神奇的矩阵数学来完成平移、旋转、缩放,甚至从像素到裁剪空间的投影。实现 3D 操作 只需要再向前迈一小步。在之前的 2D 示例中,将 2D 点 (x, y) 乘以 3x3 矩阵。要实现 3D操作,需要 3D 点 (x, y, z) 和一个 4x4 矩阵。以最后一个示例为例,将其更改为 3D。我们将再次使用 F,但这次是 3D“F”。需要做的第一件事是更改顶点着色器以处理 3D。这是旧的顶点着色器。它变得更加简单!原创 2023-06-22 09:30:00 · 274 阅读 · 0 评论 -
11. WebGPU 缩放变换
另一件需要注意的事情是它从 0 开始缩放,0 对于 F 是左上角。这是合理的,因为我们将位置乘以缩放比例 将远离 0, 0。例如,您可以在缩放之前添加另一个平移,即预缩放平移。希望这最后 3 篇文章有助于理解平移、旋转和缩放。接下来,我们将回顾一下矩阵的魔力,它将所有这 3 种形式组合成一种更简单且通常更有用的形式。而且,和之前前一样,需要更新uniform 缓冲区大小,以便为scale 留出空间。将顶点位置乘以想要的比例。以下是之前示例中对着色器的更改。需要注意的一件事是按负值缩放会翻转几何体。原创 2023-06-19 09:48:50 · 78 阅读 · 0 评论 -
12. WebGPU 矩阵数学
到目前为止,每当我们提到画布的尺寸时,我们都会使用 canvas.width 和 canvas.height ,但在上面调用 mat3.projection 时,我们会使用 canvas.clientWidth 和 canvas.clientHeight。为什么?投影矩阵关注如何获取剪辑空间(每个维度中的 -1 到 +1)并将其转换回像素。但是,在浏览器中,我们正在处理两种类型的像素。一个是画布本身的像素数。因此,例如像这样定义的画布。或者像这样定义的。原创 2023-06-20 09:35:57 · 1216 阅读 · 0 评论 -
WebGPU入门教程:您的第一个 WebGPU 应用
从顶点着色器开始,因为 GPU 也将从这里开始!顶点着色器被定义为函数,GPU 会针对中的每个顶点调用一次该函数。由于包含六个位置(顶点),因此您定义的函数会被调用六次。每次调用该方法时,都会将中的其他位置作为参数传递给该函数,顶点着色器函数的作用是在裁剪空间中返回对应的位置。也务必要理解,系统不一定会按顺序调用它们。相反,GPU 擅长并行运行上述着色器,这可能会同时处理数百(甚至数千!)顶点!GPU 拥有不可思议的速度,但这存在很大限制,存在一定限制。为了确保极端并行化,顶点着色器不能相互通信。翻译 2023-05-18 09:34:24 · 2749 阅读 · 0 评论 -
1. WebGPU 基础知识
本文将尝试向您介绍 WebGPU 的基础知识。在阅读本文之前,希望您应该已经对 mapping arrays, destructuring assignment, spreading values, async/await, es6 modules 有基础的了解,因为这些内容将在下文被广泛使用。如果您已经了解 WebGL,。WebGPU 是一种 API,可让您执行 2 项基本操作。就这些!之后关于 WebGPU 的一切都由你决定。翻译 2023-05-23 14:57:11 · 1803 阅读 · 0 评论 -
2. WebGPU阶段间变量 (WebGPU Inter-stage Variables)
在上一篇文章中,我们介绍了一些关于 WebGPU 的非常基础的知识。在本文中,我们将回顾阶段间变量( inter-stage)的基础知识。。当顶点着色器输出 3 个位置时,三角形会被光栅化。顶点着色器可以在每个位置输出额外的值,默认情况下,这些值将在 3 个点之间进行插值。让我们举一个小例子。我们将从上一篇文章中的三角形着色器开始。我们要做的就是更改着色器。首先我们声明一个 struct。这是协调顶点着色器和片段着色器之间的阶段间变量的一种简单方法。然后声明顶点着色器返回这种类型的结构。翻译 2023-05-23 15:30:58 · 125 阅读 · 0 评论 -
3. WebGPU Uniforms
在我们上面的示例中,每次绘制时都会更新比例scale,然后我们 writeBuffer 将该对象的 uniformValues 上传到相应的统一缓冲区。到目前为止,我们在着色器中使用的所有数据都是硬编码的(顶点着色器中的三角形顶点位置,以及片段着色器中的颜色)。现在,在我们提交命令缓冲区之前的某个时间,我们需要设置 uniformValues 的其他值,然后将这些值复制到 GPU 上的缓冲区。我们还没有在我们的缓冲区中设置,因为我们希望它考虑画布的外观,并且在渲染时间之前我们不会知道画布的外观。翻译 2023-05-24 10:15:27 · 157 阅读 · 0 评论 -
4. WebGPU 存储缓冲区 (WebGPU Storage Buffers)
这篇文章是关于存储缓冲区的,我们从暂停的地方继续。存储缓冲区在许多方面类似于统一缓冲区。如果我们所做的只是将 JavaScript 中的 UNIFORM 更改为 STORAGE 并将 WGSL 中的 var 更改为 var ,那么上一页中的示例就可以正常工作。其实区别就在这里,不用重命名变量就可以有更合适的名字。${${在我们的 WSGL 中无需其他更改即可正常工作,就像以前一样。原创 2023-05-30 10:08:02 · 618 阅读 · 0 评论 -
5. WebGPU 顶点缓冲区 WebGPU Vertex Buffers
在中,我们将顶点数据放在存储缓冲区中,并使用内置的 vertex_index 对其进行索引。虽然该技术越来越受欢迎,但向顶点着色器提供顶点数据的传统方法是通过顶点缓冲区和属性。顶点缓冲区就像任何其他 WebGPU 缓冲区一样。也用来保存数据。不同之处在于不直接从顶点着色器访问它们。相反,我们告诉 WebGPU 缓冲区中有什么类型的数据以及它在哪里以及它是如何组织的。然后它将数据从缓冲区中拉出并提供给我们。让我们以中的最后一个示例为例,将其从使用存储缓冲区更改为使用顶点缓冲区。翻译 2023-05-30 11:40:37 · 175 阅读 · 0 评论 -
6. WebGPU 纹理(Textures )
纹理通常表示二维图像。二维图像只是颜色值的二维数组,因此您可能想知道,为什么需要二维数组的纹理?可以将存储缓冲区用作二维数组。纹理的特别之处在于它们可以通过称为。原创 2023-06-12 10:25:02 · 1468 阅读 · 0 评论 -
7. WebGPU 将图像导入纹理
我们在文章中介绍了有关使用纹理的一些基础知识。在本文中,我们将介绍从图像导入纹理。在上一篇文章中,通过调用 device.createTexture 创建了一个纹理,然后通过调用 device.queue.writeTexture 将放入纹理中。device.queue 上还有另一个名为 device.queue.copyExternalImageToTexture 的函数,可以将复制到纹理中。原创 2023-06-12 16:01:16 · 446 阅读 · 0 评论 -
8. WebGPU 是如何工作的
让我们通过JavaScript 来模拟WebGPU的实现, 来尝试解释 GPU如何使用顶点着色器和片段着色器。这样会对对真正发生的事情有一个直观的感受。如果你熟悉 Array.map,稍微认真思考一下,就可以了解这两种不同类型的着色器函数是如何工作的。使用 Array.map ,可以提供一个 shader 函数来转换一个值。传入 array.map 的参数 “shader”,只是一个,它给定一个数字,并将这个数字乘以2。这可能是 JavaScript 中与“着色器(shader )”含义最接近的类比。原创 2023-06-13 09:21:19 · 781 阅读 · 0 评论 -
9. WebGPU 平移变换
这给了一个在画布上从 0 到 1 的值。现在我们的值在裁剪空间中,但它被翻转了,因为裁剪空间向上 Y 正向,而画布 2d 向下 Y 正向。F 数据的顶点位置使 F 宽 100 像素,高 150 像素,与我们显示的相匹配。因为默认的 clearValue 是 0, 0, 0, 0 可以删除将它设置为其他内容。将设置它的比例,使方格纸的每个网格单元为 10x10 像素,且每 100x100 像素我们将绘制一条粗线。如果我们将平移设置为 200,300,则绘制 F 时其 0,0 左上角顶点位于 200,300。原创 2023-06-13 10:38:19 · 860 阅读 · 0 评论