WebGPU[4] 紋理三角形

• 2021 年 4 月 5 日
• 筆記
• bindgroup, layout, texture, WebGPU, wgsl, 圖形

程式碼見：//github.com/onsummer/my-dev-notes/tree/master/webgpu-Notes/04-texture-triangle
原創，發布日 2021年4月5日，@秋意正寒。若程式碼失效請留言，或自行到官網根據最新 API 修改。

數據預覽

NDC 坐標和 紋理坐標（原點、朝向、值域）基礎不再補充。

0.1 VBO

const vbodata = new Float32Array([
  -1.0, -1.0, 0.0, 1.0,
  0.0, 1.0, 0.5, 0.0,
  1.0, -1.0, 1.0, 1.0
])

0.2 貼圖

一張 256 x 256 的 png 貼圖，jpg 和 webp 沒測試。

1 紋理與取樣器

使用取樣器在紋理貼圖上，通過紋理坐標取頂點的顏色值，這是一個很常規的操作。

1.1 創建取樣器、紋理

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

/* --- create img source --- */
const img = document.createElement('img')
img.src = 'texture.png'
// 用 await 代表這個操作必須在 async 函數中，或者在 html 中提前做好 img 標籤並載入紋理貼圖
await img.decode()
const imageBitmap = await createImageBitmap(img)

/* create texture */
const texture = device.createTexture({
  size: [img.width, img.height], // 256, 256 -> 2d的紋理
  format: "rgba8unorm",
  usage: GPUTextureUsage.SAMPLED | GPUTextureUsage.COPY_DST
})

1.2 將紋理貼圖數據 填入 紋理對象

我在文檔中看到有兩個方法，一個是 GPUQueue.prototype.writeToTexture()，另一個是下面這個 GPUQueue.prototype.copyImageBitmapToTexture()：

device.queue.copyImageBitmapToTexture(
  { imageBitmap: imageBitmap },
  { texture: texture },
  [img.width, img.height, 1]
)

至此，取樣器、紋理對象都準備好了，紋理數據也寫入紋理對象中了。

2 將紋理對象、取樣器對象傳進流水線（Pipeline）

要向渲染通道傳遞紋理和取樣器，必須創建一個 「Pipeline布局」 對象。
這個布局對象要對紋理對象、取樣器對象進行綁定。在 WebGPU 中，將諸如 uniform變數、取樣器、紋理對象 等資源統一打組，這個組叫 GPUBindGroup。
它們的關係圖大概是這樣的：

上程式碼：

/* 創建綁定組的布局對象 */
const bindGroupLayout = device.createBindGroupLayout({
  entries: [
    {
      /* use for sampler */
      binding: 0,
      visibility: GPUShaderStage.FRAGMENT,
      sampler: {
        type: 'filtering',
      },
    },
    {
      /* use for texture view */
      binding: 1,
      visibility: GPUShaderStage.FRAGMENT,
      texture: {
        sampleType: 'float'
      }
    }
  ]
})
/* 創建 Pipeline 的布局對象 */
const pipelineLayout = device.createPipelineLayout({
  bindGroupLayouts: [bindGroupLayout],
})

/* 創建 pipeline 時，傳遞 Pipeline 的布局對象 */
const pipeline = device.createRenderPipeline({
  layout: pipelineLayout, // <- 傳遞布局對象
  // ... 其他
})

/* 創建綁定組：GPUBindGroup，一組資源 */
const uniformBindGroup = device.createBindGroup({
  layout: pipeline.getBindGroupLayout(0), // <- 指定綁定組的布局對象
  entries: [
    {
      binding: 0,
      resource: sampler, // <- 傳入取樣器對象
    },
    {
      binding: 1,
      resource: texture.createView() // <- 傳入紋理對象的視圖
    }
  ]
})

3 修改著色器

光將取樣器、紋理對象傳入流水線還是不夠的，在頂點著色器階段、片元著色器階段，仍需要把顏色給弄到。

3.1 頂點著色器

[[builtin(position)]] var<out> out_position: vec4<f32>;
[[location(0)]] var<out> out_st: vec2<f32>; // <- 輸出紋理坐標到下一階段，即片元著色器

[[location(0)]] var<in> in_position_2d: vec2<f32>;
[[location(1)]] var<in> in_st: vec2<f32>; // <- 從 GPUBuffer 中獲取的紋理坐標

[[stage(vertex)]]
// 注意這個主函數被改為 vertex_main，在創建流水線時，要改 entryPoint 屬性為 'frag_main'
fn vertex_main() -> void {
  out_position = vec4<f32>(in_position_2d, 0.0, 1.0);
  out_uv = in_st;
  return;
}

3.2 片元著色器

// 從綁定組i里取綁定的資源j的語法是 [[binding(j), group(i)]]
[[binding(0), group(0)]] var mySampler: sampler; // <- 取樣器對象
[[binding(1), group(0)]] var myTexture: texture_2d<f32>; // <- 紋理對象

[[location(0)]] var<out> outColor: vec4<f32>;

[[location(0)]] var<in> in_st: vec2<f32>; // 從頂點著色器里傳遞進來的紋理坐標

[[stage(fragment)]]
// 注意這個主函數被改為 frag_main，在創建流水線時，要改 entryPoint 屬性為 'frag_main'
fn frag_main() -> void {
  outColor = textureSample(myTexture, mySampler, in_st); // 使用 textureSample 內置函數獲取對應紋理坐標的顏色
  return;
}

4 渲染通道編碼器傳入資源

即把綁定組傳入對象傳入即可。

passEncoder.setBindGroup(0, uniformBindGroup)

踩坑點

不要設置流水線中 primitive 屬性的 cullMode 屬性值為 "back"，否則會背面剔除。

const pipeline = device.createRenderPipeline({
  // ...
  primitive: {
    topology: 'triangle-list',
    cullMode: 'back', // <- 如果設為 back 三角形就不見了
  }
  // ...
})