Compatibility Mode, the easy part. (#488)

Enable WebGPU Compatibility Mode for all samples that can run unmodified in that mode. * Reformat. * Add comma after last item in dictionary.
webgpu · Jan 17, 2025 · 0ce1ef2 · 0ce1ef2
1 parent c6783d7
commit 0ce1ef2
Show file tree

Hide file tree

Showing 26 changed files with 78 additions and 26 deletions.
diff --git a/sample/animometer/main.ts b/sample/animometer/main.ts
@@ -3,7 +3,9 @@ import animometerWGSL from './animometer.wgsl';
 import { quitIfWebGPUNotAvailable } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 

diff --git a/sample/blending/main.ts b/sample/blending/main.ts
@@ -3,7 +3,9 @@ import { GUI } from 'dat.gui';
 import { quitIfWebGPUNotAvailable } from '../util';
 import texturedQuadWGSL from './texturedQuad.wgsl';
 
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 

diff --git a/sample/cameras/main.ts b/sample/cameras/main.ts
@@ -40,7 +40,9 @@ gui.add(params, 'type', ['arcball', 'WASD']).onChange(() => {
   oldCameraType = newCameraType;
 });
 
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 const context = canvas.getContext('webgpu') as GPUCanvasContext;

diff --git a/sample/computeBoids/main.ts b/sample/computeBoids/main.ts
@@ -4,7 +4,9 @@ import updateSpritesWGSL from './updateSprites.wgsl';
 import { GUI } from 'dat.gui';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 quitIfAdapterNotAvailable(adapter);
 
 const hasTimestampQuery = adapter.features.has('timestamp-query');

diff --git a/sample/fractalCube/main.ts b/sample/fractalCube/main.ts
@@ -13,7 +13,9 @@ import sampleSelfWGSL from './sampleSelf.frag.wgsl';
 import { quitIfWebGPUNotAvailable } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 

diff --git a/sample/gameOfLife/main.ts b/sample/gameOfLife/main.ts
@@ -5,7 +5,9 @@ import fragWGSL from './frag.wgsl';
 import { quitIfWebGPUNotAvailable } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 

diff --git a/sample/helloTriangle/main.ts b/sample/helloTriangle/main.ts
@@ -3,7 +3,9 @@ import redFragWGSL from '../../shaders/red.frag.wgsl';
 import { quitIfWebGPUNotAvailable } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 

diff --git a/sample/helloTriangleMSAA/main.ts b/sample/helloTriangleMSAA/main.ts
@@ -3,7 +3,9 @@ import redFragWGSL from '../../shaders/red.frag.wgsl';
 import { quitIfWebGPUNotAvailable } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 

diff --git a/sample/imageBlur/main.ts b/sample/imageBlur/main.ts
@@ -8,7 +8,9 @@ const tileDim = 128;
 const batch = [4, 4];
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 

diff --git a/sample/instancedCube/main.ts b/sample/instancedCube/main.ts
@@ -13,7 +13,9 @@ import vertexPositionColorWGSL from '../../shaders/vertexPositionColor.frag.wgsl
 import { quitIfWebGPUNotAvailable } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 

diff --git a/sample/multipleCanvases/main.ts b/sample/multipleCanvases/main.ts
@@ -46,7 +46,9 @@ function createVertexAndIndexBuffer(
   };
 }
 
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 

diff --git a/sample/normalMap/main.ts b/sample/normalMap/main.ts
@@ -18,7 +18,9 @@ enum TextureAtlas {
 }
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 const context = canvas.getContext('webgpu') as GPUCanvasContext;

diff --git a/sample/occlusionQuery/main.ts b/sample/occlusionQuery/main.ts
@@ -31,7 +31,9 @@ export type TypedArrayConstructor =
 
 const info = document.querySelector('#info');
 
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 

diff --git a/sample/points/main.ts b/sample/points/main.ts
@@ -29,7 +29,9 @@ function createFibonacciSphereVertices({
   return new Float32Array(vertices);
 }
 
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 

diff --git a/sample/renderBundles/main.ts b/sample/renderBundles/main.ts
@@ -14,7 +14,9 @@ interface Renderable {
 }
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 

diff --git a/sample/resizeCanvas/main.ts b/sample/resizeCanvas/main.ts
@@ -3,7 +3,9 @@ import redFragWGSL from '../../shaders/red.frag.wgsl';
 import { quitIfWebGPUNotAvailable } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 

diff --git a/sample/resizeObserverHDDPI/main.ts b/sample/resizeObserverHDDPI/main.ts
@@ -3,7 +3,9 @@ import checkerWGSL from './checker.wgsl';
 import { quitIfWebGPUNotAvailable } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 

diff --git a/sample/rotatingCube/main.ts b/sample/rotatingCube/main.ts
@@ -13,7 +13,9 @@ import vertexPositionColorWGSL from '../../shaders/vertexPositionColor.frag.wgsl
 import { quitIfWebGPUNotAvailable } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 

diff --git a/sample/shadowMapping/main.ts b/sample/shadowMapping/main.ts
@@ -9,7 +9,9 @@ import { quitIfWebGPUNotAvailable } from '../util';
 const shadowDepthTextureSize = 1024;
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 

diff --git a/sample/texturedCube/main.ts b/sample/texturedCube/main.ts
@@ -13,7 +13,9 @@ import sampleTextureMixColorWGSL from './sampleTextureMixColor.frag.wgsl';
 import { quitIfWebGPUNotAvailable } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 

diff --git a/sample/transparentCanvas/main.ts b/sample/transparentCanvas/main.ts
@@ -13,7 +13,9 @@ import vertexPositionColorWGSL from '../../shaders/vertexPositionColor.frag.wgsl
 import { quitIfWebGPUNotAvailable } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 

diff --git a/sample/twoCubes/main.ts b/sample/twoCubes/main.ts
@@ -13,7 +13,9 @@ import vertexPositionColorWGSL from '../../shaders/vertexPositionColor.frag.wgsl
 import { quitIfWebGPUNotAvailable } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 

diff --git a/sample/videoUploading/main.ts b/sample/videoUploading/main.ts
@@ -3,7 +3,9 @@ import fullscreenTexturedQuadWGSL from '../../shaders/fullscreenTexturedQuad.wgs
 import sampleExternalTextureWGSL from '../../shaders/sampleExternalTexture.frag.wgsl';
 import { quitIfWebGPUNotAvailable } from '../util';
 
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 

diff --git a/sample/volumeRenderingTexture3D/main.ts b/sample/volumeRenderingTexture3D/main.ts
@@ -18,7 +18,9 @@ gui.add(params, 'rotateCamera', true);
 gui.add(params, 'near', 2.0, 7.0);
 gui.add(params, 'far', 2.0, 7.0);
 
-const adapter = await navigator.gpu?.requestAdapter();
+const adapter = await navigator.gpu?.requestAdapter({
+  featureLevel: 'compatibility',
+});
 const device = await adapter?.requestDevice();
 quitIfWebGPUNotAvailable(adapter, device);
 const context = canvas.getContext('webgpu') as GPUCanvasContext;

diff --git a/sample/worker/worker.ts b/sample/worker/worker.ts
@@ -35,7 +35,9 @@ self.addEventListener('message', (ev) => {
 // to the init() method for all the other samples. The remainder of this file is largely identical
 // to the rotatingCube sample.
 async function init(canvas) {
-  const adapter = await navigator.gpu?.requestAdapter();
+  const adapter = await navigator.gpu?.requestAdapter({
+    featureLevel: 'compatibility',
+  });
   const device = await adapter?.requestDevice();
   quitIfWebGPUNotAvailable(adapter, device);
   const context = canvas.getContext('webgpu');

diff --git a/sample/workloadSimulator/index.html b/sample/workloadSimulator/index.html
@@ -586,7 +586,9 @@ <h2><center>Web graphics workload simulator</center></h2>
       try {
         if (deviceRequested) return;
         deviceRequested = true;
-        let adapter = await navigator.gpu.requestAdapter();
+        let adapter = await navigator.gpu.requestAdapter({
+          featureLevel: 'compatibility',
+        });
         featuresAndLimits.textContent = JSON.stringify(
           {
             name: adapter.name,