Why MMD models look washed out in three.js: tone mapping, 7 modes compared

Conclusion

• If you want MMD models to keep their colors, do not use tone mapping (keep three.js's default NoToneMapping).
• ACES, AgX, Cineon and Reinhard all reduce saturation and contrast. On the model in a white outfit, ACES cut saturation by 47%.
• If you only want to avoid clipped highlights, Neutral is an option. It kept saturation and removed the pixels stuck at pure white.

How we measured

We rendered Alicia, who wears mostly white, and a Hatsune Miku-style model with mostly dark clothes, from the front at the same size. Lights were ambient 1.2 and directional 1.4, exposure (toneMappingExposure) was 1.0, and only renderer.toneMapping was changed. From the rendered image we took the non-background pixels and counted four things:

• Brightness: mean pixel luminance (0–255)
• Contrast: standard deviation of luminance; larger means stronger light and dark
• Saturation: mean HSV saturation (S); 0 is gray
• Clipped white: share of pixels with R, G and B all at 250 or more

Model in a white outfit (Alicia)

ACES barely changed brightness but dropped saturation from 0.133 to 0.071, a 47% cut. The light blue stockings and blond hair turn grayish and the whole image looks hazy. AgX and Cineon lost about as much saturation, and Reinhard made everything darker.

Model in dark clothes (Miku-style)

This model had no clipped whites to begin with (0% in every mode), and ACES lowered saturation by 14%. How much color is lost depends heavily on the model; the more bright colors, the bigger the loss. Testing only with a dark model underestimates the effect.

On this model Neutral actually raised saturation from 0.191 to 0.248, making the teal hair deeper. It is a candidate for taming highlights, but it does not reproduce the original colors exactly.

Why MMD models lose color

Tone mapping exists to squeeze the "far above 1.0" brightness of realistic lighting smoothly into what a screen can show. In our measurements, too, Alicia, who has more bright colors, lost much more saturation with ACES, AgX and Cineon.

MMD models produce the colors meant for the screen directly, from material colors and toon textures. three.js MMDLoader also puts the PMX diffuse colors into the materials as sRGB colors as they are. Applying a curve on top that pulls bright colors toward white makes the author's colors look faded. White and pale outfits sit near the top of the range already, so they are hit hardest.

On the other hand, without tone mapping 7.5% of Alicia's pixels were stuck at pure white, which means some shading on the white outfit is blown out. Among the 7 modes, Neutral was the only one that removed this clipping while keeping saturation.

What happened on this site

From 2026-09-22 to 10-08 this site used ACES, weak ambient light and a warm directional light by default as a "high quality lighting" mode. On Alicia from the front, saturation dropped from 0.134 to 0.078 and contrast from 48.5 to 36.3, and we only noticed after feedback that it looked hazier than before. The default is now back to no tone mapping.

The player uses ACES only when you set the brightness slider to something other than 1.0, to adjust brightness. To see the colors as they are, leave it at 1.0.

Related tools and articles

• Local player — Load a model and try the brightness and lighting on the spot
• How to read the 64 interpolation bytes in VMD — Another place where three.js differs from MMD
• Play MMD in your browser — No install, no upload