四角形に画像を貼り付け

main.ts

import { createSquareBuffer } from "./square"
import { createWebGPUTextureFromImageUrl } from "./image"

import shaderCode from "./shader.wgsl?raw"
import imageUrl from "../assets/twinkle.png?url"

const adapter = await navigator.gpu.requestAdapter()
if (!adapter) {
  throw new Error("WebGPU cannot be initialized - Adapter not found")
}

const device = await adapter.requestDevice()
device.lost.then(() => {
  throw new Error("WebGPU cannot be initialized - Device has been lost")
})

const canvas = document.querySelector("canvas")
const context = canvas!.getContext("webgpu")
if (!context) {
  throw new Error("WebGPU cannot be initialized - Canvas does not support WebGPU")
}

const canvasFormat = navigator.gpu.getPreferredCanvasFormat()
context.configure({ device, format: canvasFormat })

const { vertexBuffer, indexBuffer, indexCount } = createSquareBuffer(device, 1.0)

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

const shaderModule = device.createShaderModule({ code: shaderCode })

const renderPipeline = device.createRenderPipeline({
  layout: "auto",
  vertex: {
    module: shaderModule,
    entryPoint: "vs_main",
    buffers: [
      {
        arrayStride: 4 * Float32Array.BYTES_PER_ELEMENT,
        attributes: [
          {
            shaderLocation: 0,
            offset: 0,
            format: "float32x2"
          },
          {
            shaderLocation: 1,
            offset: 2 * Float32Array.BYTES_PER_ELEMENT,
            format: "float32x2"
          }
        ]
      }
    ]
  },
  fragment: {
    module: shaderModule,
    entryPoint: "fs_main",
    targets: [
      {
        format: canvasFormat
      }
    ]
  }
})

const uniformBindGroup = device.createBindGroup({
  layout: renderPipeline.getBindGroupLayout(0),
  entries: [
    {
      binding: 0,
      resource: texture.createView()
    },
    {
      binding: 1,
      resource: sampler
    }
  ]
})

const commandEncoder = device.createCommandEncoder()

const renderPass = commandEncoder.beginRenderPass({
  colorAttachments: [
    {
      view: context.getCurrentTexture().createView(),
      loadOp: "clear",
      clearValue: { r: 0.824, g: 0.878, b: 0.984, a: 1 },
      storeOp: "store"
    }
  ]
})
renderPass.setPipeline(renderPipeline)
renderPass.setBindGroup(0, uniformBindGroup)
renderPass.setVertexBuffer(0, vertexBuffer)
renderPass.setIndexBuffer(indexBuffer, "uint16")
renderPass.drawIndexed(indexCount)
renderPass.end()

device.queue.submit([commandEncoder.finish()])

image.ts

export const createWebGPUTextureFromImageUrl = async (device: GPUDevice, url: string) => {
  const response = await fetch(url)
  const blob = await response.blob()
  const imgBitmap = await createImageBitmap(blob)

  const textureDescriptor: GPUTextureDescriptor = {
    size: { width: imgBitmap.width, height: imgBitmap.height },
    format: "rgba8unorm",
    usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
  }
  const texture = device.createTexture(textureDescriptor)
  device.queue.copyExternalImageToTexture({ source: imgBitmap }, { texture }, textureDescriptor.size)

  return texture
}

square.ts

export const createSquareBuffer = (device: GPUDevice, size: number) => {
  const half = size * 0.5

  // prettier-ignore
  const vertices = new Float32Array([
    // x,    y,     u,   v
    -half,  half,  0.0, 1.0, // 0: 左上
     half,  half,  1.0, 1.0, // 1: 右上
     half, -half,  1.0, 0.0, // 2: 右下
    -half, -half,  0.0, 0.0  // 3: 左下
  ])

  const vertexBuffer = device.createBuffer({
    size: vertices.byteLength,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
  })
  device.queue.writeBuffer(vertexBuffer, 0, vertices)

  // prettier-ignore
  const indices = new Uint16Array([
    0, 3, 2, // 第1三角形（左上 → 左下 → 右下）
    0, 2, 1  // 第2三角形（左上 → 右下 → 右上）
  ]);

  const indexBuffer = device.createBuffer({
    size: indices.byteLength,
    usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST
  })
  device.queue.writeBuffer(indexBuffer, 0, indices)

  return {
    vertexBuffer,
    indexBuffer,
    indexCount: indices.length
  }
}

shader.wgsl

@group(0) @binding(0) var image_texture: texture_2d<f32>;
@group(0) @binding(1) var image_sampler: sampler;

struct VertexInput {
  @location(0) position: vec3f,
  @location(1) uv: vec2f,
};

struct VertexOutput {
  @builtin(position) Position: vec4f,
  @location(0) uv: vec2f,
};

@vertex
fn vs_main(in: VertexInput) -> VertexOutput {
  var out: VertexOutput;
  out.Position = vec4f(in.position.xy, 0.0, 1.0);
  out.uv = in.uv;
  return out;
}

@fragment
fn fs_main(in: VertexOutput) -> @location(0) vec4f {
  return textureSample(image_texture, image_sampler, in.uv);
}