WebGPU
文章平均质量分 96
碳学长
这个作者很懒,什么都没留下…
展开
-
五、WebGPU Vertex Buffers 顶点缓冲区
在上一篇文章中,我们将顶点数据放入存储缓冲区中,并使用内置的vertex_index对其进行索引。虽然这种技术越来越受欢迎,但向顶点着色器提供顶点数据的传统方式是通过顶点缓冲和属性。顶点缓冲区就像任何其他WebGPU缓冲区一样。它们保存着数据。不同之处在于我们不直接从顶点着色器访问它们。相反,我们告诉WebGPU缓冲区中有什么类型的数据,以及它在哪里以及它是如何组织的。然后它将数据从缓冲区中取出并提供给我们。让我们以上一篇文章中的最后一个示例为例,将其从使用存储缓冲区更改为使用顶点缓冲区。首先要做的是改变着原创 2023-10-18 00:08:14 · 254 阅读 · 0 评论 -
四、WebGPU Storage Buffers 存储缓冲区
存储缓冲区 storage buffers 在许多方面 uniform buffers 缓冲区相似。如果我们所做的只是在JavaScript中将UNIFORM改为STORAGE,WGSL 中的 var 改为 var,上一节的示例代码同样可以运行并达到同样的效果。实际上,还是有不同之处,不需要将变量重命名为更合适的名称。${${仅需要以上少量的修改,就可以达到同样的效果。代码及效果如下:原创 2023-10-09 22:10:29 · 130 阅读 · 0 评论 -
三、WebGPU Uniforms
接下来,正如第一篇文章中的图表所示,为了告诉着色器我们的缓冲区,我们需要创建一个绑定组,并将缓冲区绑定到我们在着色器中设置的@binding(?到目前为止,我们在着色器中使用的所有数据要么是硬编码的(顶点着色器中的三角形顶点位置,以及片段着色器中的颜色)。现在,在我们提交我们的命令缓冲区之前,我们需要设置uniformValues的剩余值,然后将这些值复制到GPU上的缓冲区。另外,我们的着色器可能会引用另一个统一的缓冲区,它只包含特定于这个对象的东西,比如它的世界/模型矩阵和它的正常矩阵。原创 2023-10-08 22:56:43 · 64 阅读 · 0 评论 -
二、WebGPU阶段间变量(inter-stage variables)
在上一篇文章中,我们介绍了一些关于WebGPU的基础知识。在本文中,我们将介绍阶段变量(inter-stage variables)的基础知识。阶段变量在顶点着色器和片段着色器之间起作用。当顶点着色器输出3个位置时,三角形将栅格化。顶点着色器可以在每个位置输出额外的值,默认情况下,这些值将在3个点之间进行插值。让我们举个小例子。我们将从上一篇文章中的三角形着色器开始。我们要做的就是改变着色器。首先,我们声明一个结构体。这是一个在顶点着色器和片段着色器之间协调阶段间变量的简单方法。原创 2023-10-08 22:21:02 · 95 阅读 · 0 评论 -
一、WebGPU 基础理论开始篇
在某种程度上,WebGPU是一个非常简单的系统。它所做的只是在 GPU 上运行 3 种类型的函数:顶点着色器, 片段着色器、计算着色器。顶点着色器计算顶点。着色器返回顶点位置。对于每组 3 个顶点,它返回在这 3 个位置之间绘制的三角形。片段着色器计算颜色。绘制三角形时,对于每个像素要绘制,GPU 会调用您的片段着色器。然后,片段着色器返回颜色。计算着色器更通用。它实际上只是您调用的函数和说“执行此函数 N 次”。原创 2023-09-19 21:52:08 · 167 阅读 · 0 评论 -
WebGPU 编码与原理(3):一次完整代码的详细讲解
WebGPU 一次完整代码的详细讲解原创 2023-05-30 22:59:02 · 487 阅读 · 0 评论 -
WebGPU 编码与原理(2):绘制立方体
2023年4月6日,谷歌宣布在 Chrome 用户可在 113 Beta 版本中,启用全新的 WebGPU 图形 API,支持硬件图形加速。本系列是学习记录,尚不能称之为教程(因此可能在代码的实现上、原理的阐述上等都可能存在不合适、不严谨或错误)。该系列希望通过代码撰写以及解读代码的含义,尝试阐述 WebGPU 中相关的图形学效果的实现方法、原理。如有遗漏、错误,还请指正与赐教。原创 2023-04-11 22:14:48 · 491 阅读 · 1 评论 -
WebGPU 编码与原理(1):绘制三角形
2023年4月7日,谷歌宣布在 Chrome 用户可在 113 Beta 版本中,启用全新的 WebGPU 图形 API,支持硬件图形加速。本系列是学习记录,尚不能称之为教程(因此可能在代码的实现上、原理的阐述上等都可能存在不合适、不严谨或错误)。该系列希望通过代码撰写以及解读代码的含义,尝试阐述 WebGPU 中相关的图形学效果的实现方法、原理。如有遗漏、错误,还请指正与赐教。原创 2023-04-09 17:23:35 · 412 阅读 · 0 评论