今回は、ゲーム制作でよく出てくる「PNGとHDRの違い」について解説していきます。
「HDR画像って普通の画像と何が違うの？」
「スカイボックスをPNGにしたら、なんか安っぽい…」
「ブルーム（光のにじみ）がうまく出ない…」
こんな疑問はありませんか？
PNGとHDRは用途がまったく違う画像形式です。ここを取り違えると「なぜかライティングが安っぽい」「空の色が汚い」といった、原因の分かりにくい見た目の問題につながります。
この記事を読み終えると、あなたはPNGとHDRの違い・それぞれのメリットデメリット・使い分け・初心者がハマりやすいミスをしっかり理解できると思いますので、ぜひ最後まで読んでいただけると嬉しいです。
一番の違いは「1.0より明るい色を持てるか」
結論から言うと、両者の決定的な違いはここです。
- PNG（LDR）… 明るさの上限が決まっている。真っ白が限界
- HDR… 明るさに上限がない。「真っ白の100倍まぶしい太陽」を表現できる
PNGは各色8bit、つまり0〜255の256段階しか持てません。プログラム上では0.0〜1.0に正規化され、1.0（真っ白）を超える値は存在できないのです。
対してHDRは32bitの浮動小数点数で色を持ちます。10.0 でも 1000.0 でも入ります。現実の太陽と紙の白は明るさが桁違いですが、その差をそのまま数値で持てるということです。
PNGとHDRの比較表
| PNG | HDR（.hdr / .exr） | |
|---|---|---|
| ビット深度 | 8bit（16bitも可） | 32bit 浮動小数点 |
| 明るさの上限 | 1.0まで | 上限なし |
| ファイルサイズ | 小さい | 大きい（数倍〜十数倍） |
| 圧縮 | 可逆（劣化なし） | 形式による |
| 透明度 | あり（アルファ） | 基本なし |
| 主な用途 | UI・アイコン・アルベド | 環境マップ・ライティング |
なぜHDRが必要なのか
「見た目が良くなる」だけではありません。計算の元データとして必要だからです。
①ブルームが正しく出る
ブルーム（強い光がにじむ表現）は、「明るすぎる部分」を抜き出してぼかす処理です。
// 1.0を超える部分だけを抽出してぼかす
float3 bright = max(color - 1.0, 0.0);ここで元データがPNGだと、1.0を超える値が最初から存在しないので、この式の結果は常に0。つまりブルームが一切出ません。「実装したのに光らない」の正体はこれです。
②環境光（IBL）が自然になる
スカイボックスを光源として使うIBLでは、空の明るさの分布がそのままライティングになります。HDRなら「太陽の方向だけ極端に明るい」という情報が保たれるので、影の出方が自然になります。
PNGだと太陽も空も「ほぼ白」で潰れてしまい、のっぺりした均一な光になります。これが「安っぽく見える」原因です。
③露出調整に耐えられる
HDRは明るさの情報を余分に持っているので、後から露出を下げても白飛びした部分に絵が残っています。PNGは潰れた時点で情報が消えているため、暗くしても灰色になるだけです。
使い分けの基準
迷ったら、「光そのものを表すか、色を表すか」で考えると外しません。
- PNGでよいもの… UI、アイコン、フォント、アルベド（基本色）、法線マップ
- HDRを使うもの… スカイボックス、環境マップ、IBL用ライトプローブ
キャラクターのテクスチャを全部HDRにする必要はありません。「光源として使う画像だけHDR」で十分です。容量的にもそれが現実的です。
【重要】私が実際にPNGとHDRで困った体験談
自作エンジンでブルームを実装したとき、コードは合っているはずなのに、光が一切にじまないという状態で半日溶かしました。
シェーダを何度見直しても間違いが見つからない。原因はスカイボックスにPNGを使っていたことでした。1.0を超える画素が存在しないので、抽出処理の結果が毎回まっさら。実装ではなく素材の問題だったわけです。HDRに差し替えた瞬間、狙いどおり太陽がにじみました。
もう一つ。夕焼けのグラデーションをPNGのスカイボックスにしたとき、空に縞模様（バンディング）が出たことがあります。8bitでは滑らかなグラデーションを表現しきれず、色の段差が見えてしまうんです。これもHDRにしたら消えました。
PNG・HDR使用時のよくある失敗例と対処法
①スカイボックスにPNGを使う
体験談のとおり、ブルームが出ない・バンディングが出る原因になります。光源として使う画像はHDRにしましょう。
②トーンマッピングを忘れる
HDRのまま画面に出すと真っ白に飛びます。ディスプレイは0〜1しか表示できないため、最後にトーンマッピングで1.0の範囲へ圧縮する工程が必要です。
③何でもHDRにして容量を圧迫する
HDRはPNGの数倍〜十数倍のサイズです。UIやアイコンまでHDRにすると、ロード時間もVRAMも無駄に食います。必要な場所だけに使いましょう。
注意点
- HDRは光源として使う画像に限定するのが現実的
- HDRを使うならトーンマッピングまでセットで実装する
- PNGは透明度が使えるのが強み。UIはPNG一択
まとめ
- PNGは1.0（真っ白）が上限、HDRは上限なし
- ブルームやIBLは1.0超えの情報がないと成立しない
- UI・アルベドはPNG、スカイボックス・環境マップはHDR
- HDRは容量が大きいので使いどころを絞る
「光らない」「安っぽい」の原因が実装ではなく素材側だった、というのはよくある話です。ライティング周りで詰まったら、まず使っている画像形式を疑ってみてください。
