webgpu
文章平均质量分 78
搞GIS图形的sky.
三维GIS、图形相关。
展开
-
WebGPU学习(10)---如何利用 WebGPU 实现高性能
使用WebGPU,我们需要自己优化绘图命令,类似于驱动层对WebGL所做的事情。因此,如果编码没有适当优化,结果可能会比WebGL慢。确定每个 WebGPU 函数调用的性能特征并优化渲染代码非常重要。为了做到这一点,在某些情况下可能需要检查我们正在创建的库或应用程序的设计。在许多情况下,需要将着色器可以访问的大部分数据预先部署到 GPU 上的缓冲区中。原创 2023-09-17 09:54:25 · 294 阅读 · 0 评论 -
webgl与webgpu比较
WebGPU 虽然也有一个总管家一样的对象 —— device,类型是 GPUDevice,表示可以操作 GPU 设备的一个高层级抽象,它负责创建操作图形运算的各个对象,最后装配成一个叫 “CommandBuffer(指令缓冲,GPUCommandBuffer)”的对象并提交给队列,这才完成 CPU 这边的劳动。在 WebGL 中,始终会调用着色器的入口main函数,但在 WebGPU 中,当使用着色器时,可以指定要调用的函数。当然,仍然可以自己检查错误,但即使什么都不做,仍然可以获得一些有用的信息。原创 2023-09-10 17:48:35 · 902 阅读 · 2 评论 -
WebGPU学习(9)---使用Pipeline Overridable Constants
首先,在着色器中定义一个常量。稍后可以从 JavaScript 端覆盖该常量。这次我们在片段着色器中定义它。@fragment} else {通过在常量名称之前添加override,该常量就成为可以从 JavaScript 端覆盖的常量。是否指定默认值并不重要,但如果不指定,则必须始终从 JavaScript 端覆盖它。如果不覆盖,将使用着色器端定义的默认值。原创 2023-09-02 17:32:06 · 740 阅读 · 0 评论 -
WebGPU学习(8)---使用RenderBundle
此时用作参数的描述符是一个名为 GPURenderBundleDescriptor 的类型, 注意创建RenderPassEncoder时与GPURenderPassDescriptor不同。由于注册的绘图命令在内部被转换为GPU可以理解的命令格式, 比绘制时每次都用RenderPassEncoder进行转换效率更高。命令可以重复使用,这减少了为每个绘制调用注册命令的成本。创建 RenderBundleEncoder 后,像注册 RenderPassEncoder 一样注册绘图命令。原创 2023-09-02 17:18:55 · 588 阅读 · 0 评论 -
WebGPU学习(7)---渲染到纹理
我们可以从屏幕上看到三角形被绘制到纹理上。在WebGL中,需要生成一个FBO(Framebuffer对象)来设置渲染目标,并且FBO中的绑定操作也很复杂。WebGPU 上的纹理渲染给人的印象是编码变得更加直观。原创 2023-08-05 16:38:22 · 344 阅读 · 0 评论 -
WebGPU学习(5)---使用深度测试和纹理
我们现在采用了一些设置来开启深度测试,也将纹理应用于立方体。原创 2023-02-26 10:15:57 · 1041 阅读 · 4 评论 -
WebGPU学习(4)---使用 UniformBuffer
以上,使用UniformBuffer的绘制就完成了。虽然这个立方体看起来很奇怪。。。这是因为我们还没有在绘图时启用深度测试。下次我们将启用深度测试以确保正确绘制立方体。原创 2023-02-26 10:14:57 · 574 阅读 · 6 评论 -
WebGPU学习(3)---使用IndexBuffer(索引缓冲区)
绘制结果没有明显变化,但对 IndexBuffer 的支持已完成,而且我们还不需要更改着色器代码。原创 2023-02-21 21:56:25 · 507 阅读 · 3 评论 -
WebGPU学习(2)---使用VertexBuffer(顶点缓冲区)
通过上面的编码修改,现在我们可以使用 VertexBuffer 绘制矩形了。原创 2023-02-20 21:21:05 · 581 阅读 · 0 评论 -
WebGPU学习(1)---在WebGPU上绘制三角形
在本文中,我们将使用 WebGPU 绘制一个简单的三角形。原创 2023-02-18 21:35:47 · 1079 阅读 · 0 评论