Add generate mipmap sample (#497)

We've got hello triangle. Generating mipmaps seems
like a pretty common feature. Maybe a sample for it
is good?

Author: greggman

sample/generateMipmap/generateMipmap.ts

@@ -0,0 +1,164 @@
+import generateMipmapWGSL from './generateMipmap.wgsl';
+
+export function numMipLevels(...sizes: number[]) {
+  const maxSize = Math.max(...sizes);
+  return (1 + Math.log2(maxSize)) | 0;
+}
+
+/**
+ * Get the default viewDimension
+ * Note: It's only a guess. The user needs to tell us to be
+ * correct in all cases because we can't distinguish between
+ * a 2d texture and a 2d-array texture with 1 layer, nor can
+ * we distinguish between a 2d-array texture with 6 layers and
+ * a cubemap.
+ */
+export function getDefaultViewDimensionForTexture(
+  dimension: GPUTextureDimension,
+  depthOrArrayLayers: number
+) {
+  switch (dimension) {
+    case '1d':
+      return '1d';
+    default:
+    case '2d':
+      return depthOrArrayLayers > 1 ? '2d-array' : '2d';
+    case '3d':
+      return '3d';
+  }
+}
+
+type DeviceSpecificInfo = {
+  sampler: GPUSampler;
+  module: GPUShaderModule;
+  pipelineByFormatAndView: Map<string, GPURenderPipeline>;
+};
+
+function createDeviceSpecificInfo(device: GPUDevice): DeviceSpecificInfo {
+  const module = device.createShaderModule({
+    label: 'textured quad shaders for mip level generation',
+    code: generateMipmapWGSL,
+  });
+
+  const sampler = device.createSampler({
+    minFilter: 'linear',
+    magFilter: 'linear',
+  });
+
+  return {
+    module,
+    sampler,
+    pipelineByFormatAndView: new Map(),
+  };
+}
+
+const s_deviceToDeviceSpecificInfo = new WeakMap<
+  GPUDevice,
+  DeviceSpecificInfo
+>();
+
+/**
+ * Generates mip levels 1 to texture.mipLevelCount - 1 using
+ * mip level 0 as the source.
+ * @param device The device
+ * @param texture The texture to generate mips for
+ * @param textureBindingViewDimension The view dimension, needed for
+ *   compatibility mode if the texture is a cube map OR if the texture
+ *   is a 1 layer 2d-array.
+ */
+export function generateMips(
+  device: GPUDevice,
+  texture: GPUTexture,
+  textureBindingViewDimension?: GPUTextureViewDimension
+) {
+  textureBindingViewDimension =
+    textureBindingViewDimension ??
+    getDefaultViewDimensionForTexture(
+      texture.dimension,
+      texture.depthOrArrayLayers
+    );
+  const deviceSpecificInfo =
+    s_deviceToDeviceSpecificInfo.get(device) ??
+    createDeviceSpecificInfo(device);
+  s_deviceToDeviceSpecificInfo.set(device, deviceSpecificInfo);
+  const { sampler, module, pipelineByFormatAndView } = deviceSpecificInfo;
+
+  const id = `${texture.format}.${textureBindingViewDimension}`;
+
+  if (!pipelineByFormatAndView.get(id)) {
+    // Choose an fragment shader based on the viewDimension (removes the '-' from 2d-array and cube-array)
+    const entryPoint = `fs${textureBindingViewDimension.replace('-', '')}`;
+    pipelineByFormatAndView.set(
+      id,
+      device.createRenderPipeline({
+        label: `mip level generator pipeline for ${textureBindingViewDimension}, format: ${texture.format}`,
+        layout: 'auto',
+        vertex: {
+          module,
+        },
+        fragment: {
+          module,
+          entryPoint,
+          targets: [{ format: texture.format }],
+        },
+      })
+    );
+  }
+
+  const pipeline = pipelineByFormatAndView.get(id);
+  const encoder = device.createCommandEncoder({
+    label: 'mip gen encoder',
+  });
+
+  // For each mip level > 0, sample the previous mip level
+  // while rendering into this one.
+  for (
+    let baseMipLevel = 1;
+    baseMipLevel < texture.mipLevelCount;
+    ++baseMipLevel
+  ) {
+    for (let layer = 0; layer < texture.depthOrArrayLayers; ++layer) {
+      const bindGroup = device.createBindGroup({
+        layout: pipeline.getBindGroupLayout(0),
+        entries: [
+          { binding: 0, resource: sampler },
+          {
+            binding: 1,
+            resource: texture.createView({
+              dimension: textureBindingViewDimension,
+              baseMipLevel: baseMipLevel - 1,
+              mipLevelCount: 1,
+            }),
+          },
+        ],
+      });
+
+      const renderPassDescriptor: GPURenderPassDescriptor = {
+        label: 'our basic canvas renderPass',
+        colorAttachments: [
+          {
+            view: texture.createView({
+              dimension: '2d',
+              baseMipLevel,
+              mipLevelCount: 1,
+              baseArrayLayer: layer,
+              arrayLayerCount: 1,
+            }),
+            loadOp: 'clear',
+            storeOp: 'store',
+          },
+        ],
+      };
+
+      const pass = encoder.beginRenderPass(renderPassDescriptor);
+      pass.setPipeline(pipeline);
+      pass.setBindGroup(0, bindGroup);
+      // draw 3 vertices, 1 instance, first instance (instance_index) = layer
+      pass.draw(3, 1, 0, layer);
+      pass.end();
+    }
+  }
+
+  const commandBuffer = encoder.finish();
+  device.queue.submit([commandBuffer]);
+}

sample/generateMipmap/generateMipmap.wgsl

@@ -0,0 +1,63 @@
+const faceMat = array(
+  mat3x3f( 0,  0,  -2,  0, -2,   0,  1,  1,   1),   // pos-x
+  mat3x3f( 0,  0,   2,  0, -2,   0, -1,  1,  -1),   // neg-x
+  mat3x3f( 2,  0,   0,  0,  0,   2, -1,  1,  -1),   // pos-y
+  mat3x3f( 2,  0,   0,  0,  0,  -2, -1, -1,   1),   // neg-y
+  mat3x3f( 2,  0,   0,  0, -2,   0, -1,  1,   1),   // pos-z
+  mat3x3f(-2,  0,   0,  0, -2,   0,  1,  1,  -1));  // neg-z
+
+struct VSOutput {
+  @builtin(position) position: vec4f,
+  @location(0) texcoord: vec2f,
+  @location(1) @interpolate(flat, either) baseArrayLayer: u32,
+};
+
+@vertex fn vs(
+  @builtin(vertex_index) vertexIndex : u32,
+  @builtin(instance_index) baseArrayLayer: u32,
+) -> VSOutput {
+  var pos = array<vec2f, 3>(
+    vec2f(-1.0, -1.0),
+    vec2f(-1.0,  3.0),
+    vec2f( 3.0, -1.0),
+  );
+
+  var vsOutput: VSOutput;
+  let xy = pos[vertexIndex];
+  vsOutput.position = vec4f(xy, 0.0, 1.0);
+  vsOutput.texcoord = xy * vec2f(0.5, -0.5) + vec2f(0.5);
+  vsOutput.baseArrayLayer = baseArrayLayer;
+  return vsOutput;
+}
+
+@group(0) @binding(0) var ourSampler: sampler;
+
+@group(0) @binding(1) var ourTexture2d: texture_2d<f32>;
+@fragment fn fs2d(fsInput: VSOutput) -> @location(0) vec4f {
+  return textureSample(ourTexture2d, ourSampler, fsInput.texcoord);
+}
+
+@group(0) @binding(1) var ourTexture2dArray: texture_2d_array<f32>;
+@fragment fn fs2darray(fsInput: VSOutput) -> @location(0) vec4f {
+  return textureSample(
+    ourTexture2dArray,
+    ourSampler,
+    fsInput.texcoord,
+    fsInput.baseArrayLayer);
+}
+
+@group(0) @binding(1) var ourTextureCube: texture_cube<f32>;
+@fragment fn fscube(fsInput: VSOutput) -> @location(0) vec4f {
+  return textureSample(
+    ourTextureCube,
+    ourSampler,
+    faceMat[fsInput.baseArrayLayer] * vec3f(fract(fsInput.texcoord), 1));
+}
+
+@group(0) @binding(1) var ourTextureCubeArray: texture_cube_array<f32>;
+@fragment fn fscubearray(fsInput: VSOutput) -> @location(0) vec4f {
+  return textureSample(
+    ourTextureCubeArray,
+    ourSampler,
+    faceMat[fsInput.baseArrayLayer] * vec3f(fract(fsInput.texcoord), 1), fsInput.baseArrayLayer);
+}

sample/generateMipmap/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>webgpu-samples: generateMipmap</title>
+    <style>
+      :root {
+        color-scheme: light dark;
+      }
+      html, body {
+        margin: 0;      /* remove default margin */
+        height: 100%;   /* make body fill the browser window */
+        display: flex;
+        place-content: center center;
+      }
+      canvas {
+        width: 600px;
+        height: 600px;
+        max-width: 100%;
+        display: block;
+      }
+    </style>
+    <script defer src="main.js" type="module"></script>
+    <script defer type="module" src="../../js/iframe-helper.js"></script>
+  </head>
+  <body>
+    <canvas></canvas>
+  </body>
+</html>