Implement better limit checking.

Implement a "quitIfLimitNotMet()" helper that tests for the existence
of a limit in adapter.limits, checks that it meets a certain value,
and errors if not. If successful, it will add the limit to a
GPURequiredLimits object.

Author: SenorBlanco

sample/a-buffer/main.ts

@@ -1,7 +1,7 @@
 import { mat4, vec3 } from 'wgpu-matrix';
 import { GUI } from 'dat.gui';
 
-import { quitIfWebGPUNotAvailable } from '../util';
+import { quitIfWebGPUNotAvailable, quitIfLimitLessThan } from '../util';
 import { mesh } from '../../meshes/teapot';
 
 import opaqueWGSL from './opaque.wgsl';
@@ -16,10 +16,8 @@ const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const adapter = await navigator.gpu?.requestAdapter({
   featureLevel: 'compatibility',
 });
-let limits: Record<string, GPUSize32>;
-if ('maxStorageBuffersInFragmentStage' in adapter.limits) {
-  limits = { maxStorageBuffersInFragmentStage: 2 };
-}
+const limits: Record<string, GPUSize32> = {};
+quitIfLimitLessThan(adapter, 'maxStorageBuffersInFragmentStage', 2, limits);
 const device = await adapter?.requestDevice({
   requiredLimits: limits,
 });

sample/bitonicSort/utils.ts

@@ -1,6 +1,10 @@
 import type { GUI } from 'dat.gui';
 import fullscreenTexturedQuad from '../../shaders/fullscreenTexturedQuad.wgsl';
-import { quitIfAdapterNotAvailable, quitIfWebGPUNotAvailable } from '../util';
+import {
+  quitIfAdapterNotAvailable,
+  quitIfWebGPUNotAvailable,
+  quitIfLimitLessThan,
+} from '../util';
 
 type BindGroupBindingLayout =
   | GPUBufferBindingLayout
@@ -119,13 +123,11 @@ export const SampleInitFactoryWebGPU = async (
 
     const timestampQueryAvailable = adapter.features.has('timestamp-query');
     let features = [];
-    let limits: Record<string, GPUSize32>;
+    const limits: Record<string, GPUSize32> = {};
     if (timestampQueryAvailable) {
       features = ['timestamp-query'];
     }
-    if ('maxStorageBuffersInFragmentStage' in adapter.limits) {
-      limits = { maxStorageBuffersInFragmentStage: 1 };
-    }
+    quitIfLimitLessThan(adapter, 'maxStorageBuffersInFragmentStage', 1, limits);
     const device = await adapter.requestDevice({
       requiredFeatures: features,
       requiredLimits: limits,

sample/cornell/main.ts

@@ -5,24 +5,36 @@ import Radiosity from './radiosity';
 import Rasterizer from './rasterizer';
 import Tonemapper from './tonemapper';
 import Raytracer from './raytracer';
-import { quitIfAdapterNotAvailable, quitIfWebGPUNotAvailable } from '../util';
+import {
+  quitIfAdapterNotAvailable,
+  quitIfWebGPUNotAvailable,
+  quitIfLimitLessThan,
+} from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 
 const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-const requiredFeatures: GPUFeatureName[] =
+const features: GPUFeatureName[] =
   presentationFormat === 'bgra8unorm' ? ['bgra8unorm-storage'] : [];
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 quitIfAdapterNotAvailable(adapter);
 
-for (const feature of requiredFeatures) {
+for (const feature of features) {
   if (!adapter.features.has(feature)) {
     throw new Error(
       `sample requires ${feature}, but is not supported by the adapter`
     );
   }
 }
-const device = await adapter?.requestDevice({ requiredFeatures });
+const limits: Record<string, GPUSize32> = {};
+quitIfLimitLessThan(adapter, 'maxComputeWorkgroupSizeX', 256, limits);
+quitIfLimitLessThan(adapter, 'maxComputeInvocationsPerWorkgroup', 256, limits);
+const device = await adapter?.requestDevice({
+  requiredFeatures: features,
+  requiredLimits: limits,
+});
 quitIfWebGPUNotAvailable(adapter, device);
 
 const params: {

sample/cornell/rasterizer.wgsl

@@ -16,7 +16,7 @@ struct VertexOut {
   @builtin(position) position : vec4f,
   @location(0) uv : vec2f,
   @location(1) emissive : vec3f,
-  @interpolate(flat)
+  @interpolate(flat, either)
   @location(2) quad : u32,
 }
 

sample/deferredRendering/main.ts

@@ -8,7 +8,7 @@ import fragmentWriteGBuffers from './fragmentWriteGBuffers.wgsl';
 import vertexTextureQuad from './vertexTextureQuad.wgsl';
 import fragmentGBuffersDebugView from './fragmentGBuffersDebugView.wgsl';
 import fragmentDeferredRendering from './fragmentDeferredRendering.wgsl';
-import { quitIfWebGPUNotAvailable } from '../util';
+import { quitIfWebGPUNotAvailable, quitIfLimitLessThan } from '../util';
 
 const kMaxNumLights = 1024;
 const lightExtentMin = vec3.fromValues(-50, -30, -50);
@@ -18,10 +18,8 @@ const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const adapter = await navigator.gpu?.requestAdapter({
   featureLevel: 'compatibility',
 });
-let limits: Record<string, GPUSize32>;
-if ('maxStorageBuffersInFragmentStage' in adapter.limits) {
-  limits = { maxStorageBuffersInFragmentStage: 1 };
-}
+const limits: Record<string, GPUSize32> = {};
+quitIfLimitLessThan(adapter, 'maxStorageBuffersInFragmentStage', 1, limits);
 const device = await adapter?.requestDevice({
   requiredLimits: limits,
 });

sample/samplerParameters/main.ts

@@ -3,7 +3,7 @@ import { GUI } from 'dat.gui';
 
 import texturedSquareWGSL from './texturedSquare.wgsl';
 import showTextureWGSL from './showTexture.wgsl';
-import { quitIfWebGPUNotAvailable } from '../util';
+import { quitIfWebGPUNotAvailable, quitIfLimitLessThan } from '../util';
 
 const kMatrices: Readonly<Float32Array> = new Float32Array([
   // Row 1: Scale by 2
@@ -31,10 +31,8 @@ const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const adapter = await navigator.gpu?.requestAdapter({
   featureLevel: 'compatibility',
 });
-let limits: Record<string, GPUSize32>;
-if ('maxStorageBuffersInVertexStage' in adapter.limits) {
-  limits = { maxStorageBuffersInVertexStage: 1 };
-}
+const limits: Record<string, GPUSize32> = {};
+quitIfLimitLessThan(adapter, 'maxStorageBuffersInVertexStage', 1, limits);
 const device = await adapter?.requestDevice({
   requiredLimits: limits,
 });

sample/skinnedMesh/main.ts

@@ -9,7 +9,7 @@ import {
   createSkinnedGridRenderPipeline,
 } from './gridUtils';
 import { gridIndices } from './gridData';
-import { quitIfWebGPUNotAvailable } from '../util';
+import { quitIfWebGPUNotAvailable, quitIfLimitLessThan } from '../util';
 
 const MAT4X4_BYTES = 64;
 
@@ -98,10 +98,8 @@ const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const adapter = await navigator.gpu?.requestAdapter({
   featureLevel: 'compatibility',
 });
-let limits: Record<string, GPUSize32>;
-if ('maxStorageBuffersInVertexStage' in adapter.limits) {
-  limits = { maxStorageBuffersInVertexStage: 2 };
-}
+const limits: Record<string, GPUSize32> = {};
+quitIfLimitLessThan(adapter, 'maxStorageBuffersInVertexStage', 2, limits);
 const device = await adapter?.requestDevice({
   requiredLimits: limits,
 });

sample/textRenderingMsdf/main.ts

@@ -11,22 +11,15 @@ import { MsdfTextRenderer } from './msdfText';
 
 import basicVertWGSL from '../../shaders/basic.vert.wgsl';
 import vertexPositionColorWGSL from '../../shaders/vertexPositionColor.frag.wgsl';
-import { quitIfWebGPUNotAvailable } from '../util';
+import { quitIfWebGPUNotAvailable, quitIfLimitLessThan } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const adapter = await navigator.gpu?.requestAdapter({
   featureLevel: 'compatibility',
 });
-let limits: Record<string, GPUSize32>;
-if (
-  'maxStorageBuffersInFragmentStage' in adapter.limits &&
-  'maxStorageBuffersInVertexStage' in adapter.limits
-) {
-  limits = {
-    maxStorageBuffersInFragmentStage: 1,
-    maxStorageBuffersInVertexStage: 2,
-  };
-}
+const limits: Record<string, GPUSize32> = {};
+quitIfLimitLessThan(adapter, 'maxStorageBuffersInFragmentStage', 1, limits);
+quitIfLimitLessThan(adapter, 'maxStorageBuffersInVertexStage', 2, limits);
 const device = await adapter?.requestDevice({
   requiredLimits: limits,
 });

sample/util.ts

@@ -11,6 +11,24 @@ export function quitIfAdapterNotAvailable(
   }
 }
 
+export function quitIfLimitLessThan(
+  adapter: GPUAdapter,
+  limit: string,
+  requiredValue: number,
+  limits: Record<string, GPUSize32>
+) {
+  if (limit in adapter.limits) {
+    const limitKey = limit as keyof GPUSupportedLimits;
+    const limitValue = adapter.limits[limitKey] as number;
+    if (limitValue < requiredValue) {
+      fail(
+        `This sample can't run on this system. ${limit} is ${limitValue}, and this sample requires at least ${requiredValue}.`
+      );
+    }
+    limits[limit] = requiredValue;
+  }
+}
+
 /**
  * Shows an error dialog if getting a adapter or device wasn't successful,
  * or if/when the device is lost or has an uncaptured error.

sample/wireframe/main.ts

@@ -4,7 +4,7 @@ import { modelData } from './models';
 import { randElement, randColor } from './utils';
 import solidColorLitWGSL from './solidColorLit.wgsl';
 import wireframeWGSL from './wireframe.wgsl';
-import { quitIfWebGPUNotAvailable } from '../util';
+import { quitIfWebGPUNotAvailable, quitIfLimitLessThan } from '../util';
 
 const settings = {
   barycentricCoordinatesBased: false,
@@ -64,10 +64,8 @@ function createVertexAndIndexBuffer(
 const adapter = await navigator.gpu?.requestAdapter({
   featureLevel: 'compatibility',
 });
-let limits: Record<string, GPUSize32>;
-if ('maxStorageBuffersInVertexStage' in adapter.limits) {
-  limits = { maxStorageBuffersInVertexStage: 2 };
-}
+const limits: Record<string, GPUSize32> = {};
+quitIfLimitLessThan(adapter, 'maxStorageBuffersInVertexStage', 2, limits);
 const device = await adapter?.requestDevice({
   requiredLimits: limits,
 });