区块链技术博客
www.b2bchain.cn

WebGPU 之 Uniform求职学习资料

本文介绍了WebGPU 之 Uniform求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

参考自

WebGPU 8. Resource Binding(资源绑定)
WGSL 5.1. Module Scope Variables(全局对象)
WGSL 9.3.2. Resource interface(资源接口)

目录

  • 目录
  • WebGPU 中的 Uniform
  • 1 如何创建 Uniform 资源
    • ① 普通常量数字/类型数组
    • ② 纹理对象 GPUTexture
    • ③ 采样器 GPUSampler
  • 2 绑定组的作用和创建
    • 绑定组的资源入口:entries 数组
  • 3 绑定组的布局对象

WebGPU 中的 Uniform

接口预览:

  • GPUBindGroup
  • GPUBindGroupLayout
  • GPUBuffer
  • GPUBufferUsage
  • GPUSampler
  • GPUTexture

WebGPU 中,uniform 资源的传递是通过 UBO 完成的,会用到 GPUBindGroupGPUBindGroupLaayout 来管理一组绑在一块的资源,正如 GPUBindGroup 的描述一样所说:

A GPUBindGroup defines a set of resources to be bound together in a group and how the resources are used in shader stages.

GPUBindGroup 管理了一组绑在一块的资源,并决定了在着色器阶段如何使用。

这里所谓的资源,有如下几种:

  • 普通常量数字、类型数组
  • 纹理
  • 采样器

1 如何创建 Uniform 资源

① 普通常量数字/类型数组

const uniformBuffer = device.createBuffer({   size: 16,   usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST })  // ---- 写入 const color = new Float32Array([0, .5, 0, 1]) device.queue.writeBuffer(   uniformBuffer, // 传给谁   0,    color.buffer, // 传递 ArrayBuffer   color.byteOffset, // 从哪里开始   color.byteLength // 取多长 )

② 纹理对象 GPUTexture

const texture = device.createTexture({   size: [256, 256],   format: "rgba8unorm", // 8 bit RGBA, un normal   usage: GPUTextureUsage.SAMPLED | GPUTextureUsage.COPY_DST })

将图片数据写入纹理另开一坑写,在这里提一下,是 GPUQueue.prototype.copyImageBitmapToTexture 方法

③ 采样器 GPUSampler

const sampler = device.createSampler({   minFilter: "linear",   magFilter: "linear" })

2 绑定组的作用和创建

const uniformBindGroup = device.createBindGroup({   layout: bindGroupLayout, // 需要绑定组对应的 layout 对象   entries: [     /* ... */   ] })

绑定组的资源入口:entries 数组

类型是 GPUBindGroupEntry[]

它的 WebIDL 定义如下:

typedef (GPUSampler or GPUTextureView or GPUBufferBinding or GPUExternalTexture) GPUBindingResource;  dictionary GPUBindGroupEntry {   required GPUIndex32 binding;   required GPUBindingResource resource; };  dictionary GPUBufferBinding {   required GPUBuffer buffer;   GPUSize64 offset = 0;   GPUSize64 size; };

一个 GPUBindGroupEntry 表示了绑定组中的单个被绑定的资源,允许是 GPUSamplerGPUTextureViewGPUBufferBindingGPUExternalTexture,前三个即采样器、纹理对象、UBO(常量数字/类型数组)。

例如:

const uniformBindGroup = device.createBindGroup({   layout: pipeline.getBindGroupLayout(0), // <- 指定绑定组的布局对象,以后开文章说   entries: [     {       binding: 0,       resource: sampler, // <- 传入采样器对象     },     {       binding: 1,       resource: texture.createView() // <- 传入纹理对象的视图     },     {       binding: 2,       resource: {         buffer: uniformBuffer // <- 传入 UBO       }     }   ] })

通过打组,可以很方便地将某种条件下的一组 uniform 资源分别传入着色器进行 WebGPU 渲染编程。

GPUBindGroup 的最大作用,就是隔离不相关的 uniform,把相关的资源摆在一块。

3 绑定组的布局对象

绑定组只是描述 JavaScript 环境中数据如何打组,WebGPU 渲染管线、WGSL 并不知道布局对象如何使用它。这个时候就需要布局对象 GPUBindGroupLayout 出马了。

A GPUBindGroupLayout defines the interface between a set of resources bound in a GPUBindGroup and their accessibility in shader stages.

仍然是靠设备对象创建:

const bindGroupLayout = device.createBindGroupLayout({   entries: [     /* ... */   ] })

它与 GPUBindGroup 类似,也需要一个 entries 数组,类型是 GPUBindGroupLayoutEntry[]

“` web-idl
dictionary GPUBindGroupLayoutEntry {
required GPUIndex32 binding;
required GPUShaderStageFlags visibility;

GPUBufferBindingLayout buffer;

参考自

WebGPU 8. Resource Binding(资源绑定)
WGSL 5.1. Module Scope Variables(全局对象)
WGSL 9.3.2. Resource interface(资源接口)

目录

  • 目录
  • WebGPU 中的 Uniform
  • 1 如何创建 Uniform 资源
    • ① 普通常量数字/类型数组
    • ② 纹理对象 GPUTexture
    • ③ 采样器 GPUSampler
  • 2 绑定组的作用和创建
    • 绑定组的资源入口:entries 数组
  • 3 绑定组的布局对象

WebGPU 中的 Uniform

接口预览:

  • GPUBindGroup
  • GPUBindGroupLayout
  • GPUBuffer
  • GPUBufferUsage
  • GPUSampler
  • GPUTexture

WebGPU 中,uniform 资源的传递是通过 UBO 完成的,会用到 GPUBindGroupGPUBindGroupLaayout 来管理一组绑在一块的资源,正如 GPUBindGroup 的描述一样所说:

A GPUBindGroup defines a set of resources to be bound together in a group and how the resources are used in shader stages.

GPUBindGroup 管理了一组绑在一块的资源,并决定了在着色器阶段如何使用。

这里所谓的资源,有如下几种:

  • 普通常量数字、类型数组
  • 纹理
  • 采样器

1 如何创建 Uniform 资源

① 普通常量数字/类型数组

const uniformBuffer = device.createBuffer({   size: 16,   usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST })  // ---- 写入 const color = new Float32Array([0, .5, 0, 1]) device.queue.writeBuffer(   uniformBuffer, // 传给谁   0,    color.buffer, // 传递 ArrayBuffer   color.byteOffset, // 从哪里开始   color.byteLength // 取多长 )

② 纹理对象 GPUTexture

const texture = device.createTexture({   size: [256, 256],   format: "rgba8unorm", // 8 bit RGBA, un normal   usage: GPUTextureUsage.SAMPLED | GPUTextureUsage.COPY_DST })

将图片数据写入纹理另开一坑写,在这里提一下,是 GPUQueue.prototype.copyImageBitmapToTexture 方法

③ 采样器 GPUSampler

const sampler = device.createSampler({   minFilter: "linear",   magFilter: "linear" })

2 绑定组的作用和创建

const uniformBindGroup = device.createBindGroup({   layout: bindGroupLayout, // 需要绑定组对应的 layout 对象   entries: [     /* ... */   ] })

绑定组的资源入口:entries 数组

类型是 GPUBindGroupEntry[]

它的 WebIDL 定义如下:

typedef (GPUSampler or GPUTextureView or GPUBufferBinding or GPUExternalTexture) GPUBindingResource;  dictionary GPUBindGroupEntry {   required GPUIndex32 binding;   required GPUBindingResource resource; };  dictionary GPUBufferBinding {   required GPUBuffer buffer;   GPUSize64 offset = 0;   GPUSize64 size; };

一个 GPUBindGroupEntry 表示了绑定组中的单个被绑定的资源,允许是 GPUSamplerGPUTextureViewGPUBufferBindingGPUExternalTexture,前三个即采样器、纹理对象、UBO(常量数字/类型数组)。

例如:

const uniformBindGroup = device.createBindGroup({   layout: pipeline.getBindGroupLayout(0), // <- 指定绑定组的布局对象,以后开文章说   entries: [     {       binding: 0,       resource: sampler, // <- 传入采样器对象     },     {       binding: 1,       resource: texture.createView() // <- 传入纹理对象的视图     },     {       binding: 2,       resource: {         buffer: uniformBuffer // <- 传入 UBO       }     }   ] })

通过打组,可以很方便地将某种条件下的一组 uniform 资源分别传入着色器进行 WebGPU 渲染编程。

GPUBindGroup 的最大作用,就是隔离不相关的 uniform,把相关的资源摆在一块。

3 绑定组的布局对象

绑定组只是描述 JavaScript 环境中数据如何打组,WebGPU 渲染管线、WGSL 并不知道布局对象如何使用它。这个时候就需要布局对象 GPUBindGroupLayout 出马了。

A GPUBindGroupLayout defines the interface between a set of resources bound in a GPUBindGroup and their accessibility in shader stages.

仍然是靠设备对象创建:

const bindGroupLayout = device.createBindGroupLayout({   entries: [     /* ... */   ] })

它与 GPUBindGroup 类似,也需要一个 entries 数组,类型是 GPUBindGroupLayoutEntry[]

“` web-idl
dictionary GPUBindGroupLayoutEntry {
required GPUIndex32 binding;
required GPUShaderStageFlags visibility;

GPUBufferBindingLayout buffer;

参考自

WebGPU 8. Resource Binding(资源绑定)
WGSL 5.1. Module Scope Variables(全局对象)
WGSL 9.3.2. Resource interface(资源接口)

目录

  • 目录
  • WebGPU 中的 Uniform
  • 1 如何创建 Uniform 资源
    • ① 普通常量数字/类型数组
    • ② 纹理对象 GPUTexture
    • ③ 采样器 GPUSampler
  • 2 绑定组的作用和创建
    • 绑定组的资源入口:entries 数组
  • 3 绑定组的布局对象

WebGPU 中的 Uniform

接口预览:

  • GPUBindGroup
  • GPUBindGroupLayout
  • GPUBuffer
  • GPUBufferUsage
  • GPUSampler
  • GPUTexture

WebGPU 中,uniform 资源的传递是通过 UBO 完成的,会用到 GPUBindGroupGPUBindGroupLaayout 来管理一组绑在一块的资源,正如 GPUBindGroup 的描述一样所说:

A GPUBindGroup defines a set of resources to be bound together in a group and how the resources are used in shader stages.

GPUBindGroup 管理了一组绑在一块的资源,并决定了在着色器阶段如何使用。

这里所谓的资源,有如下几种:

  • 普通常量数字、类型数组
  • 纹理
  • 采样器

1 如何创建 Uniform 资源

① 普通常量数字/类型数组

const uniformBuffer = device.createBuffer({   size: 16,   usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST })  // ---- 写入 const color = new Float32Array([0, .5, 0, 1]) device.queue.writeBuffer(   uniformBuffer, // 传给谁   0,    color.buffer, // 传递 ArrayBuffer   color.byteOffset, // 从哪里开始   color.byteLength // 取多长 )

② 纹理对象 GPUTexture

const texture = device.createTexture({   size: [256, 256],   format: "rgba8unorm", // 8 bit RGBA, un normal   usage: GPUTextureUsage.SAMPLED | GPUTextureUsage.COPY_DST })

将图片数据写入纹理另开一坑写,在这里提一下,是 GPUQueue.prototype.copyImageBitmapToTexture 方法

③ 采样器 GPUSampler

const sampler = device.createSampler({   minFilter: "linear",   magFilter: "linear" })

2 绑定组的作用和创建

const uniformBindGroup = device.createBindGroup({   layout: bindGroupLayout, // 需要绑定组对应的 layout 对象   entries: [     /* ... */   ] })

绑定组的资源入口:entries 数组

类型是 GPUBindGroupEntry[]

它的 WebIDL 定义如下:

typedef (GPUSampler or GPUTextureView or GPUBufferBinding or GPUExternalTexture) GPUBindingResource;  dictionary GPUBindGroupEntry {   required GPUIndex32 binding;   required GPUBindingResource resource; };  dictionary GPUBufferBinding {   required GPUBuffer buffer;   GPUSize64 offset = 0;   GPUSize64 size; };

一个 GPUBindGroupEntry 表示了绑定组中的单个被绑定的资源,允许是 GPUSamplerGPUTextureViewGPUBufferBindingGPUExternalTexture,前三个即采样器、纹理对象、UBO(常量数字/类型数组)。

例如:

const uniformBindGroup = device.createBindGroup({   layout: pipeline.getBindGroupLayout(0), // <- 指定绑定组的布局对象,以后开文章说   entries: [     {       binding: 0,       resource: sampler, // <- 传入采样器对象     },     {       binding: 1,       resource: texture.createView() // <- 传入纹理对象的视图     },     {       binding: 2,       resource: {         buffer: uniformBuffer // <- 传入 UBO       }     }   ] })

通过打组,可以很方便地将某种条件下的一组 uniform 资源分别传入着色器进行 WebGPU 渲染编程。

GPUBindGroup 的最大作用,就是隔离不相关的 uniform,把相关的资源摆在一块。

3 绑定组的布局对象

绑定组只是描述 JavaScript 环境中数据如何打组,WebGPU 渲染管线、WGSL 并不知道布局对象如何使用它。这个时候就需要布局对象 GPUBindGroupLayout 出马了。

A GPUBindGroupLayout defines the interface between a set of resources bound in a GPUBindGroup and their accessibility in shader stages.

仍然是靠设备对象创建:

const bindGroupLayout = device.createBindGroupLayout({   entries: [     /* ... */   ] })

它与 GPUBindGroup 类似,也需要一个 entries 数组,类型是 GPUBindGroupLayoutEntry[]

“` web-idl
dictionary GPUBindGroupLayoutEntry {
required GPUIndex32 binding;
required GPUShaderStageFlags visibility;

GPUBufferBindingLayout buffer;

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » WebGPU 之 Uniform求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们