Warn when HDR canvas is not supported

webgpu · Oct 1, 2024 · a5be0dc · a5be0dc
1 parent 268c290
commit a5be0dc
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     "@types/showdown": "^2.0.6",
     "@types/stats.js": "^0.17.3",
     "@typescript-eslint/eslint-plugin": "^7.13.0",
-    "@webgpu/types": "^0.1.44",
+    "@webgpu/types": "^0.1.47",
     "chokidar": "^3.6.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^8.10.0",

diff --git a/sample/particles/main.ts b/sample/particles/main.ts
@@ -35,6 +35,7 @@ function configureContext() {
     toneMapping: { mode: simulationParams.toneMappingMode },
     alphaMode: 'premultiplied',
   });
+  updateHdrFolderName();
 }
 
 const particlesBuffer = device.createBuffer({
@@ -347,11 +348,21 @@ hdrFolder.add(simulationParams, 'brightnessFactor', 0, 4, 0.1);
 hdrFolder.open();
 const hdrMediaQuery = window.matchMedia('(dynamic-range: high)');
 function updateHdrFolderName() {
+  if (!hdrMediaQuery.matches) {
+    hdrFolder.name = 'HDR settings ⚠️ Your display is not compatible';
+    return;
+  }
+  if (!('getConfiguration' in GPUCanvasContext.prototype)) {
+    hdrFolder.name = 'HDR settings';
+    return;
+  }
+  const configuration = context.getConfiguration();
+  const toneMappingModeMatches =
+    configuration.toneMapping.mode === simulationParams.toneMappingMode;
   hdrFolder.name = `HDR settings ${
-    hdrMediaQuery.matches ? '' : '⚠️ Your display is not compatible'
+    toneMappingModeMatches ? '' : '⚠️ Your browser doesn\'t support HDR canvas'
   }`;
 }
-updateHdrFolderName();
 hdrMediaQuery.onchange = updateHdrFolderName;
 
 const computePipeline = device.createComputePipeline({