跳转到内容
WebGPU 学习网站

纹理映射

64×64 的 "rgba8unorm" 棋盘格用 writeTexture() 上传。每行 256 字节，刚好满足 bytesPerRow 必须是 256 的倍数。采样器使用 "nearest"，格子放大后仍然清楚。讲解见纹理与采样器。

实时演示

Section titled “实时演示”

棋盘格

核心代码

Section titled “核心代码”
const size = 64;
const bytesPerRow = 256;
const pixels = new Uint8Array(bytesPerRow * size);
// 按 8×8 像素填两种颜色，偏移是 y * bytesPerRow + x * 4


const texture = device.createTexture({
  size: [size, size],
  format: "rgba8unorm",
  usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
});
device.queue.writeTexture(
  { texture },
  pixels,
  { bytesPerRow },
  { width: size, height: size },
);


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


const bindGroup = device.createBindGroup({
  layout: pipeline.getBindGroupLayout(0),
  entries: [
    { binding: 0, resource: texture.createView() },
    { binding: 1, resource: sampler },
  ],
});
@group(0) @binding(0) var gradientTex: texture_2d<f32>;
@group(0) @binding(1) var gradientSampler: sampler;


@fragment
fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {
  return textureSample(gradientTex, gradientSampler, uv);
}

下一步

Section titled “下一步”