Skip to content
tomixy's sketchbook

うねる円周上に並ぶテクスチャ（アニメーション）

import { createSphereInstanceBuffer, createSquareBuffer } from "./buffer"
import { createWebGPUTextureFromImageUrl } from "./image"


import shaderCode from "./shader.wgsl?raw"
import imageUrl from "../assets/sakura.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, 0.1)


const instanceCount = 70
const instanceBuffer = createSphereInstanceBuffer(device, instanceCount)


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


const uTime = 0.0
const frameUniform = new Float32Array([uTime])
const frameUniformBuffer = device.createBuffer({
  size: frameUniform.byteLength,
  usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
})
device.queue.writeBuffer(frameUniformBuffer, 0, frameUniform)


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"
          }
        ],
        stepMode: "vertex"
      },
      {
        arrayStride: 2 * Float32Array.BYTES_PER_ELEMENT,
        attributes: [
          {
            shaderLocation: 2,
            offset: 0,
            format: "float32x2"
          }
        ],
        stepMode: "instance"
      }
    ]
  },
  fragment: {
    module: shaderModule,
    entryPoint: "fs_main",
    targets: [
      {
        format: canvasFormat,
        blend: {
          color: {
            srcFactor: "one", // RGBはそのまま
            dstFactor: "one-minus-src-alpha", // 背景に1-αを掛ける
            operation: "add"
          },
          alpha: {
            srcFactor: "src-alpha",
            dstFactor: "one-minus-src-alpha",
            operation: "add"
          }
        }
      }
    ]
  }
})


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


const frameUniformBindGroup = device.createBindGroup({
  layout: renderPipeline.getBindGroupLayout(1),
  entries: [
    {
      binding: 0,
      resource: {
        buffer: frameUniformBuffer,
        offset: 0,
        size: frameUniform.byteLength
      }
    }
  ]
})


const startTime = new Date().getTime()


const frame = () => {
  const elapsed = new Date().getTime() - startTime


  const uTime = elapsed * 0.001 // 秒に変換
  const frameUniform = new Float32Array([uTime])
  device.queue.writeBuffer(frameUniformBuffer, 0, frameUniform)


  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.setBindGroup(1, frameUniformBindGroup)
  renderPass.setVertexBuffer(0, vertexBuffer)
  renderPass.setVertexBuffer(1, instanceBuffer)
  renderPass.setIndexBuffer(indexBuffer, "uint16")
  renderPass.drawIndexed(indexCount, instanceCount)
  renderPass.end()


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


  requestAnimationFrame(frame)
}


frame()