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..688ca330 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({