Show a dialog if WebGPU isn't available or there's an error (#423)

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 { quitIfWebGPUNotAvailable } from '../util';
 import { mesh } from '../../meshes/teapot';
 
 import opaqueWGSL from './opaque.wgsl';
@@ -12,8 +13,9 @@ 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 adapter = await navigator.gpu?.requestAdapter();
+const device = await adapter?.requestDevice();
+quitIfWebGPUNotAvailable(adapter, device);
 
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 const presentationFormat = navigator.gpu.getPreferredCanvasFormat();

sample/animometer/main.ts

@@ -1,9 +1,11 @@
 import { GUI } from 'dat.gui';
 import animometerWGSL from './animometer.wgsl';
+import { quitIfWebGPUNotAvailable } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const adapter = await navigator.gpu?.requestAdapter();
+const device = await adapter?.requestDevice();
+quitIfWebGPUNotAvailable(adapter, device);
 
 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 { quitIfAdapterNotAvailable, quitIfWebGPUNotAvailable } from '../util';
 
 type BindGroupBindingLayout =
   | GPUBufferBindingLayout
@@ -111,7 +112,9 @@ export const SampleInitFactoryWebGPU = async (
   callback: SampleInitCallback3D
 ): Promise<SampleInit> => {
   const init = async ({ canvas, gui, stats }) => {
-    const adapter = await navigator.gpu.requestAdapter();
+    const adapter = await navigator.gpu?.requestAdapter();
+    quitIfAdapterNotAvailable(adapter);
+
     const timestampQueryAvailable = adapter.features.has('timestamp-query');
     let device: GPUDevice;
     if (timestampQueryAvailable) {
@@ -121,6 +124,8 @@ export const SampleInitFactoryWebGPU = async (
     } else {
       device = await adapter.requestDevice();
     }
+    quitIfWebGPUNotAvailable(adapter, device);
+
     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 { quitIfWebGPUNotAvailable } from '../util';
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 
@@ -39,8 +40,9 @@ gui.add(params, 'type', ['arcball', 'WASD']).onChange(() => {
   oldCameraType = newCameraType;
 });
 
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const adapter = await navigator.gpu?.requestAdapter();
+const device = await adapter?.requestDevice();
+quitIfWebGPUNotAvailable(adapter, device);
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 
 const devicePixelRatio = window.devicePixelRatio;

sample/computeBoids/main.ts

@@ -1,14 +1,17 @@
+import { quitIfAdapterNotAvailable, quitIfWebGPUNotAvailable } 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 adapter = await navigator.gpu?.requestAdapter();
+quitIfAdapterNotAvailable(adapter);
 
 const hasTimestampQuery = adapter.features.has('timestamp-query');
 const device = await adapter.requestDevice({
   requiredFeatures: hasTimestampQuery ? ['timestamp-query'] : [],
 });
+quitIfWebGPUNotAvailable(adapter, device);
 
 const perfDisplayContainer = document.createElement('div');
 perfDisplayContainer.style.color = 'white';

sample/cornell/main.ts

@@ -5,21 +5,25 @@ import Radiosity from './radiosity';
 import Rasterizer from './rasterizer';
 import Tonemapper from './tonemapper';
 import Raytracer from './raytracer';
+import { quitIfAdapterNotAvailable, quitIfWebGPUNotAvailable } 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();
+const adapter = await navigator.gpu?.requestAdapter();
+quitIfAdapterNotAvailable(adapter);
+
 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 });
+const device = await adapter?.requestDevice({ requiredFeatures });
+quitIfWebGPUNotAvailable(adapter, device);
 
 const params: {
   renderer: 'rasterizer' | 'raytracer';

sample/cubemap/main.ts

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

sample/deferredRendering/main.ts

@@ -8,14 +8,16 @@ import fragmentWriteGBuffers from './fragmentWriteGBuffers.wgsl';
 import vertexTextureQuad from './vertexTextureQuad.wgsl';
 import fragmentGBuffersDebugView from './fragmentGBuffersDebugView.wgsl';
 import fragmentDeferredRendering from './fragmentDeferredRendering.wgsl';
+import { quitIfWebGPUNotAvailable } 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 adapter = await navigator.gpu?.requestAdapter();
+const device = await adapter?.requestDevice();
+quitIfWebGPUNotAvailable(adapter, device);
 
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 

sample/fractalCube/main.ts

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

sample/gameOfLife/main.ts

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

sample/helloTriangle/main.ts

@@ -1,9 +1,11 @@
 import triangleVertWGSL from '../../shaders/triangle.vert.wgsl';
 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 device = await adapter.requestDevice();
+const adapter = await navigator.gpu?.requestAdapter();
+const device = await adapter?.requestDevice();
+quitIfWebGPUNotAvailable(adapter, device);
 
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 

sample/helloTriangleMSAA/main.ts

@@ -1,9 +1,11 @@
 import triangleVertWGSL from '../../shaders/triangle.vert.wgsl';
 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 device = await adapter.requestDevice();
+const adapter = await navigator.gpu?.requestAdapter();
+const device = await adapter?.requestDevice();
+quitIfWebGPUNotAvailable(adapter, device);
 
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 

sample/imageBlur/main.ts

@@ -1,14 +1,16 @@
 import { GUI } from 'dat.gui';
 import blurWGSL from './blur.wgsl';
 import fullscreenTexturedQuadWGSL from '../../shaders/fullscreenTexturedQuad.wgsl';
+import { quitIfWebGPUNotAvailable } 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 adapter = await navigator.gpu?.requestAdapter();
+const device = await adapter?.requestDevice();
+quitIfWebGPUNotAvailable(adapter, device);
 
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 

sample/instancedCube/main.ts

@@ -10,10 +10,12 @@ import {
 
 import instancedVertWGSL from './instanced.vert.wgsl';
 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 device = await adapter.requestDevice();
+const adapter = await navigator.gpu?.requestAdapter();
+const device = await adapter?.requestDevice();
+quitIfWebGPUNotAvailable(adapter, device);
 
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 

sample/multipleCanvases/main.ts

@@ -1,5 +1,6 @@
 import { mat4, mat3 } from 'wgpu-matrix';
 import { modelData } from './models';
+import { quitIfWebGPUNotAvailable } from '../util';
 
 type TypedArrayView = Float32Array | Uint32Array;
 
@@ -45,8 +46,9 @@ function createVertexAndIndexBuffer(
   };
 }
 
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const adapter = await navigator.gpu?.requestAdapter();
+const device = await adapter?.requestDevice();
+quitIfWebGPUNotAvailable(adapter, device);
 
 const models = Object.values(modelData).map((data) =>
   createVertexAndIndexBuffer(device, data)

sample/normalMap/main.ts

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

sample/occlusionQuery/main.ts

@@ -1,6 +1,7 @@
 import { GUI } from 'dat.gui';
 import { mat4 } from 'wgpu-matrix';
 import solidColorLitWGSL from './solidColorLit.wgsl';
+import { quitIfWebGPUNotAvailable } from '../util';
 
 const settings = {
   animate: true,
@@ -30,8 +31,10 @@ export type TypedArrayConstructor =
 
 const info = document.querySelector('#info');
 
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const adapter = await navigator.gpu?.requestAdapter();
+const device = await adapter?.requestDevice();
+quitIfWebGPUNotAvailable(adapter, device);
+
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 const devicePixelRatio = window.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 { quitIfWebGPUNotAvailable } from '../util';
 
 const numParticles = 50000;
 const particlePositionOffset = 0;
@@ -16,8 +17,9 @@ const particleInstanceByteSize =
   0;
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const adapter = await navigator.gpu?.requestAdapter();
+const device = await adapter?.requestDevice();
+quitIfWebGPUNotAvailable(adapter, device);
 
 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 { quitIfWebGPUNotAvailable } from '../util';
 
 // See: https://www.google.com/search?q=fibonacci+sphere
 function createFibonacciSphereVertices({
@@ -30,6 +31,7 @@ function createFibonacciSphereVertices({
 
 const adapter = await navigator.gpu?.requestAdapter();
 const device = await adapter?.requestDevice();
+quitIfWebGPUNotAvailable(adapter, device);
 
 // 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 { quitIfWebGPUNotAvailable } from '../util';
 
 interface Renderable {
   vertices: GPUBuffer;
@@ -13,8 +14,9 @@ interface Renderable {
 }
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter.requestDevice();
+const adapter = await navigator.gpu?.requestAdapter();
+const device = await adapter?.requestDevice();
+quitIfWebGPUNotAvailable(adapter, device);
 
 const settings = {
   useRenderBundles: true,

sample/resizeCanvas/main.ts

@@ -1,9 +1,11 @@
 import triangleVertWGSL from '../../shaders/triangle.vert.wgsl';
 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 device = await adapter.requestDevice();
+const adapter = await navigator.gpu?.requestAdapter();
+const device = await adapter?.requestDevice();
+quitIfWebGPUNotAvailable(adapter, device);
 
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 

sample/resizeObserverHDDPI/main.ts

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