Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Warn when HDR canvas is not supported #451

Merged
merged 3 commits into from
Oct 1, 2024
Merged

Warn when HDR canvas is not supported #451

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7606281
Warn when HDR canvas is not supported
beaufortfrancois Oct 1, 2024
b3e571a
Use more specific condition
beaufortfrancois Oct 1, 2024
e2c7e55
apply suggestion
kainino0x Oct 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
24 changes: 18 additions & 6 deletions sample/particles/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ function configureContext() {
toneMapping: { mode: simulationParams.toneMappingMode },
alphaMode: 'premultiplied',
});
hdrFolder.name = getHdrFolderName();
}

const particlesBuffer = device.createBuffer({
Expand Down Expand Up @@ -346,13 +347,24 @@ hdrFolder
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'
}`;
function getHdrFolderName() {
if (!hdrMediaQuery.matches) {
return "HDR settings ⚠️ Display isn't compatible";
}
if (!('getConfiguration' in GPUCanvasContext.prototype)) {
return 'HDR settings';
}
if (
simulationParams.toneMappingMode === 'extended' &&
context.getConfiguration().toneMapping.mode !== 'extended'
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe this is necessary for this to work on browsers that don't expose toneMapping (though unfortunately the rest of the sample doesn't work right now in Firefox so I can't check)

Suggested change
context.getConfiguration().toneMapping.mode !== 'extended'
context.getConfiguration().toneMapping?.mode !== 'extended'

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(actually now that I think about it that wouldn't trigger it either because firefox probably doesn't have getConfiguration or toneMapping.)

This logic will be triggered if WebKit chooses to remove this temporarily until they implement HDR canvas. (The sample doesn't display as HDR right now in Safari TP even though the option exists so I'm assuming it's not implemented.) @mwyrzykowski

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's right, the WebKit PR just added the options to the idl file.

HDR Canvas is tracked by https://bugs.webkit.org/show_bug.cgi?id=276502

) {
return "HDR settings ⚠️ Browser doesn't support HDR canvas";
}
return 'HDR settings';
}
updateHdrFolderName();
hdrMediaQuery.onchange = updateHdrFolderName;
hdrMediaQuery.onchange = () => {
hdrFolder.name = getHdrFolderName();
};

const computePipeline = device.createComputePipeline({
layout: 'auto',
Expand Down
Loading