Show a dialog if WebGPU isn't available or there's an error

This won't catch JS exceptions in the middle of the actual sample, but
it at least shows a nice message when WebGPU is not available for some
reason, or there's an error (the browser doesn't support the sample).

sample/a-buffer/main.ts

@@ -1,6 +1,7 @@
 import { mat4, vec3 } from 'wgpu-matrix';
 import { GUI } from 'dat.gui';
 
+import { initDeviceAndErrorDialog } from '../util';
 import { mesh } from '../../meshes/teapot';
 
 import opaqueWGSL from './opaque.wgsl';
@@ -12,8 +13,7 @@ function roundUp(n: number, k: number): number {
 }
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const device = await initDeviceAndErrorDialog();
 
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 const presentationFormat = navigator.gpu.getPreferredCanvasFormat();

sample/animometer/main.ts

@@ -1,9 +1,9 @@
 import { GUI } from 'dat.gui';
 import animometerWGSL from './animometer.wgsl';
+import { initDeviceAndErrorDialog } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const device = await initDeviceAndErrorDialog();
 
 const perfDisplayContainer = document.createElement('div');
 perfDisplayContainer.style.color = 'white';

sample/bitonicSort/utils.ts

@@ -1,5 +1,6 @@
 import type { GUI } from 'dat.gui';
 import fullscreenTexturedQuad from '../../shaders/fullscreenTexturedQuad.wgsl';
+import { initDeviceAndErrorDialog } from '../util';
 
 type BindGroupBindingLayout =
   | GPUBufferBindingLayout
@@ -111,16 +112,13 @@ export const SampleInitFactoryWebGPU = async (
   callback: SampleInitCallback3D
 ): Promise<SampleInit> => {
   const init = async ({ canvas, gui, stats }) => {
-    const adapter = await navigator.gpu.requestAdapter();
-    const timestampQueryAvailable = adapter.features.has('timestamp-query');
-    let device: GPUDevice;
-    if (timestampQueryAvailable) {
-      device = await adapter.requestDevice({
-        requiredFeatures: ['timestamp-query'],
-      });
-    } else {
-      device = await adapter.requestDevice();
-    }
+    let timestampQueryAvailable;
+    const device = await initDeviceAndErrorDialog({}, (adapter) => {
+      timestampQueryAvailable = adapter.features.has('timestamp-query');
+      return {
+        requiredFeatures: timestampQueryAvailable ? ['timestamp-query'] : [],
+      };
+    });
     const context = canvas.getContext('webgpu') as GPUCanvasContext;
     const devicePixelRatio = window.devicePixelRatio;
     canvas.width = canvas.clientWidth * devicePixelRatio;

sample/cameras/main.ts

@@ -10,6 +10,7 @@ import {
 import cubeWGSL from './cube.wgsl';
 import { ArcballCamera, WASDCamera } from './camera';
 import { createInputHandler } from './input';
+import { initDeviceAndErrorDialog } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 
@@ -39,8 +40,7 @@ gui.add(params, 'type', ['arcball', 'WASD']).onChange(() => {
   oldCameraType = newCameraType;
 });
 
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const device = await initDeviceAndErrorDialog();
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 
 const devicePixelRatio = window.devicePixelRatio;

sample/computeBoids/main.ts

@@ -1,13 +1,16 @@
+import { initDeviceAndErrorDialog } from '../util';
 import spriteWGSL from './sprite.wgsl';
 import updateSpritesWGSL from './updateSprites.wgsl';
 import { GUI } from 'dat.gui';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu.requestAdapter();
 
-const hasTimestampQuery = adapter.features.has('timestamp-query');
-const device = await adapter.requestDevice({
-  requiredFeatures: hasTimestampQuery ? ['timestamp-query'] : [],
+let hasTimestampQuery;
+const device = await initDeviceAndErrorDialog({}, (adapter) => {
+  hasTimestampQuery = adapter.features.has('timestamp-query');
+  return {
+    requiredFeatures: hasTimestampQuery ? ['timestamp-query'] : [],
+  };
 });
 
 const perfDisplayContainer = document.createElement('div');

sample/cornell/main.ts

@@ -5,21 +5,24 @@ import Radiosity from './radiosity';
 import Rasterizer from './rasterizer';
 import Tonemapper from './tonemapper';
 import Raytracer from './raytracer';
+import { initDeviceAndErrorDialog } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 
-const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-const requiredFeatures: GPUFeatureName[] =
-  presentationFormat === 'bgra8unorm' ? ['bgra8unorm-storage'] : [];
-const adapter = await navigator.gpu.requestAdapter();
-for (const feature of requiredFeatures) {
-  if (!adapter.features.has(feature)) {
-    throw new Error(
-      `sample requires ${feature}, but is not supported by the adapter`
-    );
+let presentationFormat;
+const device = await initDeviceAndErrorDialog({}, (adapter) => {
+  presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+  const requiredFeatures: GPUFeatureName[] =
+    presentationFormat === 'bgra8unorm' ? ['bgra8unorm-storage'] : [];
+  for (const feature of requiredFeatures) {
+    if (!adapter.features.has(feature)) {
+      throw new Error(
+        `sample requires ${feature}, but is not supported by the adapter`
+      );
+    }
   }
-}
-const device = await adapter.requestDevice({ requiredFeatures });
+  return { requiredFeatures };
+});
 
 const params: {
   renderer: 'rasterizer' | 'raytracer';

sample/cubemap/main.ts

@@ -10,10 +10,10 @@ import {
 
 import basicVertWGSL from '../../shaders/basic.vert.wgsl';
 import sampleCubemapWGSL from './sampleCubemap.frag.wgsl';
+import { initDeviceAndErrorDialog } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const device = await initDeviceAndErrorDialog();
 
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 

sample/deferredRendering/main.ts

@@ -8,14 +8,14 @@ import fragmentWriteGBuffers from './fragmentWriteGBuffers.wgsl';
 import vertexTextureQuad from './vertexTextureQuad.wgsl';
 import fragmentGBuffersDebugView from './fragmentGBuffersDebugView.wgsl';
 import fragmentDeferredRendering from './fragmentDeferredRendering.wgsl';
+import { initDeviceAndErrorDialog } from '../util';
 
 const kMaxNumLights = 1024;
 const lightExtentMin = vec3.fromValues(-50, -30, -50);
 const lightExtentMax = vec3.fromValues(50, 50, 50);
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const device = await initDeviceAndErrorDialog();
 
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 

sample/fractalCube/main.ts

@@ -10,10 +10,10 @@ import {
 
 import basicVertWGSL from '../../shaders/basic.vert.wgsl';
 import sampleSelfWGSL from './sampleSelf.frag.wgsl';
+import { initDeviceAndErrorDialog } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const device = await initDeviceAndErrorDialog();
 
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 

sample/gameOfLife/main.ts

@@ -2,10 +2,10 @@ import { GUI } from 'dat.gui';
 import computeWGSL from './compute.wgsl';
 import vertWGSL from './vert.wgsl';
 import fragWGSL from './frag.wgsl';
+import { initDeviceAndErrorDialog } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const device = await initDeviceAndErrorDialog();
 
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 const devicePixelRatio = window.devicePixelRatio;

sample/helloTriangle/main.ts

@@ -1,9 +1,9 @@
 import triangleVertWGSL from '../../shaders/triangle.vert.wgsl';
 import redFragWGSL from '../../shaders/red.frag.wgsl';
+import { initDeviceAndErrorDialog } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const device = await initDeviceAndErrorDialog();
 
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 

sample/helloTriangleMSAA/main.ts

@@ -1,9 +1,9 @@
 import triangleVertWGSL from '../../shaders/triangle.vert.wgsl';
 import redFragWGSL from '../../shaders/red.frag.wgsl';
+import { initDeviceAndErrorDialog } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const device = await initDeviceAndErrorDialog();
 
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 

sample/imageBlur/main.ts

@@ -1,14 +1,14 @@
 import { GUI } from 'dat.gui';
 import blurWGSL from './blur.wgsl';
 import fullscreenTexturedQuadWGSL from '../../shaders/fullscreenTexturedQuad.wgsl';
+import { initDeviceAndErrorDialog } from '../util';
 
 // Contants from the blur.wgsl shader.
 const tileDim = 128;
 const batch = [4, 4];
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const device = await initDeviceAndErrorDialog();
 
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 

sample/instancedCube/main.ts

@@ -10,10 +10,10 @@ import {
 
 import instancedVertWGSL from './instanced.vert.wgsl';
 import vertexPositionColorWGSL from '../../shaders/vertexPositionColor.frag.wgsl';
+import { initDeviceAndErrorDialog } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const device = await initDeviceAndErrorDialog();
 
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 

sample/multipleCanvases/main.ts

@@ -1,6 +1,7 @@
 /* eslint-disable prettier/prettier */
 import { mat4, mat3 } from 'wgpu-matrix';
 import { modelData } from './models';
+import { initDeviceAndErrorDialog } from '../util';
 
 type TypedArrayView = Float32Array | Uint32Array;
 
@@ -46,8 +47,7 @@ function createVertexAndIndexBuffer(
   };
 }
 
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const device = await initDeviceAndErrorDialog();
 
 const models = Object.values(modelData).map(data => createVertexAndIndexBuffer(device, data));
 

sample/normalMap/main.ts

@@ -8,6 +8,7 @@ import {
   create3DRenderPipeline,
   createTextureFromImage,
 } from './utils';
+import { initDeviceAndErrorDialog } from '../util';
 
 const MAT4X4_BYTES = 64;
 enum TextureAtlas {
@@ -17,8 +18,7 @@ enum TextureAtlas {
 }
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const device = await initDeviceAndErrorDialog();
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 const devicePixelRatio = window.devicePixelRatio;
 canvas.width = canvas.clientWidth * devicePixelRatio;

sample/particles/main.ts

@@ -3,6 +3,7 @@ import { GUI } from 'dat.gui';
 
 import particleWGSL from './particle.wgsl';
 import probabilityMapWGSL from './probabilityMap.wgsl';
+import { initDeviceAndErrorDialog } from '../util';
 
 const numParticles = 50000;
 const particlePositionOffset = 0;
@@ -16,8 +17,7 @@ const particleInstanceByteSize =
   0;
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const device = await initDeviceAndErrorDialog();
 
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 

sample/points/main.ts

@@ -5,6 +5,7 @@ import distanceSizedPointsVertWGSL from './distance-sized-points.vert.wgsl';
 import fixedSizePointsVertWGSL from './fixed-size-points.vert.wgsl';
 import orangeFragWGSL from './orange.frag.wgsl';
 import texturedFragWGSL from './textured.frag.wgsl';
+import { initDeviceAndErrorDialog } from '../util';
 
 // See: https://www.google.com/search?q=fibonacci+sphere
 function createFibonacciSphereVertices({
@@ -28,8 +29,7 @@ function createFibonacciSphereVertices({
   return new Float32Array(vertices);
 }
 
-const adapter = await navigator.gpu?.requestAdapter();
-const device = await adapter?.requestDevice();
+const device = await initDeviceAndErrorDialog();
 
 // Get a WebGPU context from the canvas and configure it
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;

sample/renderBundles/main.ts

@@ -4,6 +4,7 @@ import { createSphereMesh, SphereLayout } from '../../meshes/sphere';
 import Stats from 'stats.js';
 
 import meshWGSL from './mesh.wgsl';
+import { initDeviceAndErrorDialog } from '../util';
 
 interface Renderable {
   vertices: GPUBuffer;
@@ -13,8 +14,7 @@ interface Renderable {
 }
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const device = await initDeviceAndErrorDialog();
 
 const settings = {
   useRenderBundles: true,

sample/resizeCanvas/main.ts

@@ -1,9 +1,9 @@
 import triangleVertWGSL from '../../shaders/triangle.vert.wgsl';
 import redFragWGSL from '../../shaders/red.frag.wgsl';
+import { initDeviceAndErrorDialog } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const device = await initDeviceAndErrorDialog();
 
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 

sample/resizeObserverHDDPI/main.ts

@@ -1,9 +1,9 @@
 import { GUI } from 'dat.gui';
 import checkerWGSL from './checker.wgsl';
+import { initDeviceAndErrorDialog } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const device = await initDeviceAndErrorDialog();
 
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 

sample/reversedZ/main.ts

@@ -8,6 +8,7 @@ import vertexTextureQuadWGSL from './vertexTextureQuad.wgsl';
 import fragmentTextureQuadWGSL from './fragmentTextureQuad.wgsl';
 import vertexPrecisionErrorPassWGSL from './vertexPrecisionErrorPass.wgsl';
 import fragmentPrecisionErrorPassWGSL from './fragmentPrecisionErrorPass.wgsl';
+import { initDeviceAndErrorDialog } from '../util';
 
 // Two planes close to each other for depth precision test
 const geometryVertexSize = 4 * 8; // Byte size of one geometry vertex.
@@ -65,8 +66,7 @@ const depthClearValues = {
 };
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const device = await initDeviceAndErrorDialog();
 
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 

sample/rotatingCube/main.ts

@@ -10,10 +10,10 @@ import {
 
 import basicVertWGSL from '../../shaders/basic.vert.wgsl';
 import vertexPositionColorWGSL from '../../shaders/vertexPositionColor.frag.wgsl';
+import { initDeviceAndErrorDialog } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const device = await initDeviceAndErrorDialog();
 
 const context = canvas.getContext('webgpu') as GPUCanvasContext;