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

資料預覽

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

0.1 VBO

const vbodata = https://www.cnblogs.com/onsummer/archive/2021/04/05/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 = 'https://img.uj5u.com/2021/04/05/233411050620153.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 三角形就不見了
  }
  // ...
})

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/272454.html

標籤：其他

上一篇：java題目集總結

下一篇：Termux-Ubuntu手動安裝JDK

WebGPU[4] 紋理三角形