Add HDR warning

webgpu · Jul 12, 2024 · ba387d7 · ba387d7
1 parent 086b333
commit ba387d7
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/sample/particles/main.ts b/sample/particles/main.ts
@@ -337,12 +337,20 @@ const gui = new GUI();
 gui.width = 325;
 gui.add(simulationParams, 'simulate');
 gui.add(simulationParams, 'deltaTime');
-const hdrFolder = gui.addFolder('HDR settings');
+const hdrFolder = gui.addFolder('');
 hdrFolder
   .add(simulationParams, 'toneMappingMode', ['standard', 'extended'])
   .onChange(configureContext);
 hdrFolder.add(simulationParams, 'brightnessFactor', 0, 4, 0.1);
 hdrFolder.open();
+const hdrMediaQuery = window.matchMedia('(dynamic-range: high)');
+function updateHdrFolderName() {
+  hdrFolder.name = `HDR settings ${
+    hdrMediaQuery.matches ? '' : '⚠️ Your display is not compatible'
+  }`;
+}
+updateHdrFolderName();
+hdrMediaQuery.onchange = updateHdrFolderName;
 
 const computePipeline = device.createComputePipeline({
   layout: 'auto',