From 7606281cae7188f6fd56d16cc600ab3e6c047bad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Beaufort?= Date: Tue, 1 Oct 2024 12:33:23 +0200 Subject: [PATCH 1/3] Warn when HDR canvas is not supported --- package-lock.json | 11 ++++++----- package.json | 2 +- sample/particles/main.ts | 15 +++++++++++++-- 3 files changed, 20 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index f57911f7..dd489e24 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,7 +31,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", @@ -1059,10 +1059,11 @@ "dev": true }, "node_modules/@webgpu/types": { - "version": "0.1.44", - "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.44.tgz", - "integrity": "sha512-JDpYJN5E/asw84LTYhKyvPpxGnD+bAKPtpW9Ilurf7cZpxaTbxkQcGwOd7jgB9BPBrTYQ+32ufo4HiuomTjHNQ==", - "dev": true + "version": "0.1.47", + "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.47.tgz", + "integrity": "sha512-vOUHDxj0azl7BSj4YAy6cc6q5s7F1KfF5GI1er/w6togN0MqzS/d8U+H0LH1XpLbFup+UaA7aMtia/aSx3DE0w==", + "dev": true, + "license": "BSD-3-Clause" }, "node_modules/accepts": { "version": "1.3.8", diff --git a/package.json b/package.json index bb1b77b3..4d7add01 100644 --- 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 index 5deeaa7b..3b84b955 100644 --- 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({ From b3e571ac66bdee7e1f5dac640c40983a7f3d935a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Beaufort?= Date: Tue, 1 Oct 2024 13:04:27 +0200 Subject: [PATCH 2/3] Use more specific condition --- sample/particles/main.ts | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/sample/particles/main.ts b/sample/particles/main.ts index 3b84b955..1ac2726a 100644 --- a/sample/particles/main.ts +++ b/sample/particles/main.ts @@ -35,7 +35,7 @@ function configureContext() { toneMapping: { mode: simulationParams.toneMappingMode }, alphaMode: 'premultiplied', }); - updateHdrFolderName(); + hdrFolder.name = getHdrFolderName(); } const particlesBuffer = device.createBuffer({ @@ -347,23 +347,24 @@ hdrFolder hdrFolder.add(simulationParams, 'brightnessFactor', 0, 4, 0.1); hdrFolder.open(); const hdrMediaQuery = window.matchMedia('(dynamic-range: high)'); -function updateHdrFolderName() { +function getHdrFolderName() { if (!hdrMediaQuery.matches) { - hdrFolder.name = 'HDR settings ⚠️ Your display is not compatible'; - return; + return "HDR settings ⚠️ Display isn't compatible"; } if (!('getConfiguration' in GPUCanvasContext.prototype)) { - hdrFolder.name = 'HDR settings'; - return; + return 'HDR settings'; } - const configuration = context.getConfiguration(); - const toneMappingModeMatches = - configuration.toneMapping.mode === simulationParams.toneMappingMode; - hdrFolder.name = `HDR settings ${ - toneMappingModeMatches ? '' : "⚠️ Your browser doesn't support HDR canvas" - }`; + if ( + simulationParams.toneMappingMode === 'extended' && + context.getConfiguration().toneMapping.mode !== 'extended' + ) { + return "HDR settings ⚠️ Browser doesn't support HDR canvas"; + } + return 'HDR settings'; } -hdrMediaQuery.onchange = updateHdrFolderName; +hdrMediaQuery.onchange = () => { + hdrFolder.name = getHdrFolderName(); +}; const computePipeline = device.createComputePipeline({ layout: 'auto', From e2c7e551d8f1dadb41c50c9f50f6cce405f41cdb Mon Sep 17 00:00:00 2001 From: Kai Ninomiya Date: Tue, 1 Oct 2024 12:19:34 -0700 Subject: [PATCH 3/3] apply suggestion --- sample/particles/main.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sample/particles/main.ts b/sample/particles/main.ts index 1ac2726a..190bcf7a 100644 --- a/sample/particles/main.ts +++ b/sample/particles/main.ts @@ -356,7 +356,7 @@ function getHdrFolderName() { } if ( simulationParams.toneMappingMode === 'extended' && - context.getConfiguration().toneMapping.mode !== 'extended' + context.getConfiguration().toneMapping?.mode !== 'extended' ) { return "HDR settings ⚠️ Browser doesn't support HDR canvas"; }