three.jsでMMDモデルの色が浅くなる原因はトーンマッピング｜7種類を実物で比べた

結論

• MMDモデルの色をそのまま見せたいなら、トーンマッピングは掛けない(three.js の既定の NoToneMapping のまま)。
• ACES・AgX・Cineon・Reinhardは、どれも彩度とコントラストを落とす。 白い衣装のモデルでは、ACESで彩度が47%下がった。
• 明るいところの白飛びだけを抑えたいなら、Neutral が使える。 彩度はほぼ保ったまま、真っ白に張り付く画素が無くなった。

測り方

白い衣装が多いアリシアと、暗い衣装が多い初音ミク系のモデルを、正面から同じ大きさで描きました。照明は環境光1.2・平行光1.4、露出(toneMappingExposure)は1.0で、変えたのは renderer.toneMapping だけです。描いた画面から背景以外の画素を取り出し、次の4つを数えました。

• 明るさ: 画素の輝度の平均(0〜255)
• コントラスト: 輝度の標準偏差。大きいほど明暗の差がはっきりしている
• 彩度: HSVの彩度(S)の平均。0は灰色
• 白飛び: R・G・Bがすべて250以上の画素の割合

白い衣装のモデル(アリシア)

ACESは明るさをほとんど変えずに、彩度を0.133から0.071へ47%落としました。水色のニーソックスや金髪が灰色寄りになり、全体が白っぽく霞んで見えます。AgX・Cineonも同じくらい彩度が落ち、Reinhardは全体が暗くなりました。

暗い衣装のモデル(初音ミク系)

こちらは白飛びがもともと無く(どの方式でも0%)、ACESの彩度の落ち方は14%でした。落ち方はモデルの色によって大きく違い、明るい色が多いモデルほど大きく落ちます。 暗いモデルだけで試すと、影響を小さく見積もってしまいます。

Neutral は、このモデルでは逆に彩度が0.191から0.248へ上がり、髪の青緑が濃く出ました。白飛びを抑えたいときの候補ですが、元の色と同じになるわけではありません。

なぜMMDモデルでは色が浅くなるのか

トーンマッピングは、写実的な照明で生まれる「1を大きく超える明るさ」を、画面に表示できる範囲へ滑らかに収めるためのものです。今回の測定でも、明るい色の多いアリシアのほうが、ACES・AgX・Cineonで彩度が大きく落ちました。

MMDのモデルは、材質の色とトゥーンのテクスチャで、画面に出したい色そのものを作っています。three.js の MMDLoader も、PMXの拡散色をsRGBの色としてそのまま材質へ入れます。そこへ「明るい色を白へ寄せる」処理を重ねると、作者が付けた色が浅くなります。とくに白や淡い色の衣装は、もともと明るさの上限近くにあるので、影響を大きく受けます。

一方、トーンマッピング無しでは、アリシアの画素の7.5%が真っ白に張り付きました。白い衣装の陰影が飛んでいるところがあるということです。この白飛びを抑えつつ彩度を保てたのは、7種類のうち Neutral だけでした。

このサイトで起きたこと

このサイトは2026年9月22日から10月8日まで、「高画質ライティング」として ACES・弱い環境光・暖色の平行光を既定にしていました。アリシアの正面で彩度が0.134から0.078に、コントラストが48.5から36.3に下がっていて、「以前よりぼんやりして彩度が低い」という指摘で気づきました。いまは既定をトーンマッピング無しに戻しています。

再生画面の「明るさ」を1.0以外にしたときだけ、明るさを調整するために ACES を使います。色をそのまま見たいときは、明るさを1.0のままにしてください。

この記事に関係するツール

• 手元のMMDを再生 — モデルを入れて、明るさや照明をその場で変えて見られる
• three.jsでMMDモデルの半透明はどう決まるか — 材質の描き方の別の違い
• MMDの輪郭線(エッジ)の太さと色 — 輪郭線の描き方の違い
• MMDをブラウザで動かす仕組み — three.js + MMDLoader の全体像