google / model-viewer

Easily display interactive 3D models on the web and in AR!
https://modelviewer.dev
Apache License 2.0
6.68k stars 799 forks source link

"Neutral" tonemapping darkens the image considerably #4825

Closed hybridherbst closed 2 days ago

hybridherbst commented 6 days ago

Description

For one of our viewers, I was using an earlier version of Neutral / Khronos PBR Tonemapper as it was in use by model-viewer. In that version, there was no/almost no darkening on surfaces compared to Linear/None, and only a curve in the highlights to prevent clipping, to the best of my understanding.

To my surprise, switching to the current version of "Neutral" now darkens the image considerably – which doesn't feel intended, and is different to before. Darker areas are now so dark that it loses detail entirely compared to the Linear look (see for example the exhaust area in the pictures below, or the rubber pipes in the back).

I see the same behavior in both three.js and model-viewer, so I think raising the issue here as the "source" of the tonemapper is appropriate.

Long story short – is this intended? Does the shipped version of the Khronos PBR Tonemapper now resemble ACES so much more than previous in-progress versions? To me, that feels like a step back – previously my understanding was that Neutral is designed to keep albedo data as much as possible, but now it feels the goal is to be as close as possible to ACES without having the same hue shifts?

Live Demo – Damaged Helmet

Alternative reproduction: Neutral also darkens "Damaged Helmet" considerably on https://tone-mapping.glitch.me/.

Tone Mapping model-viewer three.js
Linear Screenshot 2024-06-27 at 14 42 01 Screenshot 2024-06-27 at 14 44 42
Neutral Screenshot 2024-06-27 at 14 42 14 Screenshot 2024-06-27 at 14 44 52
ACES Screenshot 2024-06-27 at 14 42 22 Screenshot 2024-06-27 at 14 45 02

Since the model-viewer editor doesn't support switching to None/Linear for comparison (#4541), you can paste and run this code snippet in the chrome console to switch to Linear:

const mv = document.querySelector("model-viewer-preview").shadowRoot.querySelector("model-viewer");
const sc = mv[Object.getOwnPropertySymbols(mv).find((x) => x.description === "scene")];
sc.toneMapping = 1;
sc.queueRender();

Live Demo – Caterpillar Work Boot

Here's another real-world scanned PBR model that fares even worse with Neutral tonemapping – I'd say Neutral looks the worst of all tonemapping options, heavily deviating from the intended look of the model:

Tone Mapping Rendering
Linear Screenshot 2024-06-27 at 15 47 27
Neutral Screenshot 2024-06-27 at 15 47 53
AgX Screenshot 2024-06-27 at 15 47 38
ACES Screenshot 2024-06-27 at 15 48 55

The asset: https://cloud.needle.tools/api/v1/public/8ab475a/8ab475a/caterpillar_work_boot.metal.glb (from https://sketchfab.com/3d-models/caterpillar-work-boot-d551ce74dcd24528a05cbb0f4b7434d7 with converted pbrSpecularGlossiness in gltf-transform)

Version

latest