スカイボックス形式の選び方:正距円筒・キューブマップ・HDRI

May 21, 2026

結論から先に

ターゲットが Unity URP/HDRP、Unreal 5、または最新の WebGL なら、正距円筒(Equirectangular、2:1 の PNG/EXR)を使いましょう。Unity 旧来のビルトインパイプライン、高精度なパノラマサンプリングに対応しないモバイル GPU、あるいはキューブ反射を使う Three.js シーンがターゲットなら、キューブマップ(Cubemap、6 面)に変換します。単なる背景ではなく IBL のライティング寄与が必要なときだけ HDRI(.hdr/.exr)を使います。3 つの形式はどれも同じシーンを表していて、違いはピクセルの展開方法だけです。

実用的な経験則を 1 つ。エンジンに「Panoramic」や「HDRI Backdrop」のスカイボックスシェーダーが標準で用意されていて、最新の GPU で動かしているなら、正距円筒のままにして変換ステップは丸ごと省きましょう。品質は何も失わず、パイプラインもシンプルに保てます。キューブマップを選ぶのは、エンジンやハードウェア側の要件で決まっているときであって、Unity 5 時代に書かれた古いチュートリアルをなぞっているからではありません。

パノラマを生成する →

キューブマップに変換する →

3 つの形式をひと目で比較

形式形状ビット深度最適な用途エンジン
正距円筒1 枚の画像、2:18-bit(LDR)または 32-bit(HDR)背景、最新エンジンURP, HDRP, UE5 HDRIBackdrop, WebGL panoramic sampling
キューブマップ6 枚の正方形の面通常 8-bit旧来のパイプライン、モバイル、反射Unity built-in, Unreal Cube Render Target, Three.js CubeTextureLoader
HDRIどちらでも可、ただし 32-bit32-bitIBL ライティング、正確な露出Blender Cycles, UE5 Sky and Atmosphere, Unity HDRP

3 つの形式はいずれも、同じ元データ、つまり環境を 360°×180° で見たビューを表しています。違いは、その球状データをどうやってファイルへ平面化するか、そして GPU やレンダラーが実行時にそれをどう展開するか、という点だけです。同じソースから作った正距円筒パノラマとキューブマップは数学的に等価で、同じ光子を違う幾何配置で並べたものにすぎません。HDRI はここに 3 つ目の次元を加えます。ガンマエンコードされた 8-bit の値ではなく、リニアでハイダイナミックレンジなピクセルです。この 3 つの次元(レイアウト、幾何、ビット深度)を押さえれば、全体像はつかめます。

正距円筒(2:1 パノラマ)

正距円筒は、完全な 360 度環境を 1 つのファイルに収めるための定番フォーマットです。名前は地図投影法の正距円筒図法に由来します。経度が水平軸に、緯度が垂直軸に対応し、結果として 2:1 のアスペクト比を持つ長方形になります。4096×2048 の画像は横 360°・縦 180° をカバーし、それが表す球面を過不足なく写し取ります。

この投影は、予測可能な歪みを生みます。赤道付近(画像の垂直方向の中心)では、ピクセルは密に詰まり、比率も均一です。極付近(上下の端)では、ピクセルが大きく引き伸ばされます。たとえば、画像上部の水平な 1 本のピクセル帯が、球面上ではわずか 1° の垂直方向の弧しか表していないのに、赤道付近で 10° をまたぐ帯と同じ数のピクセルを割り当てられている、といった具合です。これが、正距円筒で生成した空を平面のまま見ると上下がぼやけて見えるのに、球面にマッピングしたりスカイボックスシェーダー内で使ったりすると正しく見える理由です。

最新エンジンにとって、この極の歪みは問題になりません。スカイボックスシェーダーが UV の再マッピングを内部で処理してくれるからです。Unity の Panoramic skybox シェーダー、Unreal の HDRI Backdrop アクター、Babylon.js、そして Three.js の EquirectangularReflectionMapping は、いずれも 2:1 の正距円筒をそのまま受け取り、球面マッピングを GPU 上で行います。エンジンに画像を 1 枚渡せば、あとは全部やってくれます。

メリット: 単一ファイル。どんな画像ビューアでも中身を確認できます。最新のツールで広くサポートされています。継ぎ目を修正したいときは Photoshop や GIMP でそのまま編集できます。AI パノラマジェネレーター、360 度カメラ、そしてほとんどの環境ペイントツールの標準出力形式でもあります。どんな正距円筒ファイルもオンライン 360 度パノラマビューアでそのまま確認でき、インストールは不要です。

デメリット: 極の歪みのせいで手描きが難しくなります。旧来のパイプラインやモバイル GPU のネイティブ形式ではありません。一部の古いリフレクションプローブのワークフローはキューブマップを前提とします。非常に高解像度な正距円筒(たとえば 8192×4096)は、ピクセル予算の大半を過剰サンプリングされた極の領域に浪費してしまいます。

2026 年のほとんどのワークフローでは、正距円筒が正しい出発点です。ターゲットのシステムが本当にキューブマップ入力を必要とするときだけ変換しましょう。

フォーマット自体をさらに詳しく知りたい場合は、正距円筒(Equirectangular)画像とは?を参照してください。

キューブマップ(6 面)

キューブマップは、環境を 6 枚の正方形の面として表します。正 X、負 X、正 Y、負 Y、正 Z、負 Z——平たく言えば、右、左、上、下、前、後ろです。各面は 90° の視野角を持つ標準的な透視投影のレンダリングです。6 面すべてを貼り合わせると、極の歪みがなく、表面全体でピクセル密度が均一な完全な球体が得られます。

命名規則

6 つの面は、エンジンやツールによって異なる命名規則に従います。最もよく使われる 4 つを挙げます:

UnityUnrealThree.jsBlender
右(+X)_px_rightpxright
左(−X)_nx_leftnxleft
上(+Y)_py_toppytop
下(−Y)_ny_bottomnybottom
前(+Z)_pz_frontpzfront
後(−Z)_nz_backnzback

命名を間違えるのは、スカイボックスが上下逆さまになったり裏返しになったりする最も一般的な原因です。迷ったら、各面を個別に読み込んで向きを確認してから、まとめて処理しましょう。キューブマップ変換ツールは、エクスポート時にどの命名規則を使うか選べるので、手作業でリネームすることなく、エンジンが期待する形式にそのまま合わせられます。

キューブマップが輝く場面

Unity 旧来のビルトインパイプライン: Unity のビルトインパイプラインは、パノラマサンプリングシェーダーが広く普及するより前から存在します。デフォルトの 6-Sided スカイボックスマテリアルは、面ごとに 1 枚、計 6 枚の個別テクスチャを必要とします。ビルトインパイプラインでモバイルゲームを出す場合や、URP より前から続くプロジェクトを保守している場合、スカイボックスシステムを書き直さずに済ませるには キューブマップが現実的に唯一の選択肢です。

Unreal Cube Render Target: UE5 のリフレクションキャプチャアクターや Cube Render Target は、ネイティブにキューブマップベースです。反射を静的なレベルにベイクしたり、リフレクションプローブのワークフローを組んだりする場合、たとえ正距円筒のアセットをインポートしていても、エンジンレベルで扱っているのはキューブマップです。

Three.js CubeTextureLoader: Three.js の CubeTextureLoader は 6 つのファイルを必要とします。環境マップされたマテリアルのために THREE.CubeReflectionMapping を使う WebGL シーンを組むなら、個別の面ファイルが必要です。THREE.EquirectangularReflectionMapping は最新のセットアップ向けの代替手段ですが、多くのスターターテンプレートでは今も CubeTextureLoader がデフォルトです。

モバイル GPU のパフォーマンス: ローエンドの Android 端末では、単一の 2:1 テクスチャからパノラマサンプリングを行うほうが、キューブマップからサンプリングするよりコストが高くなることがあります。GPU がフラグメントごとに UV 投影を計算しなければならないからです。事前にベイクしたキューブマップは、その計算を読み込み時に移します。最新のミドルレンジ端末では実際の差はわずかですが、大規模に展開する低価格帯ハードウェアでは効いてきます。

メリット: ピクセル密度が均一で、極で解像度が無駄になりません。リフレクションプローブのネイティブ形式。旧来のパイプラインでは必須。面のレイアウトが分かりやすく、アーティストが手描きしやすい。

デメリット: 6 つのファイルを管理する必要がある。エンジンごとに命名規則がバラバラ。手描きする場合、面と面の継ぎ目に細心の注意が要る。ソースが正距円筒なら変換ステップが増える。

任意の 2:1 正距円筒は、私たちのキューブマップ変換ツールを使ってブラウザ内でキューブマップに変換できます。完全にフロントエンドで動作し、アップロード不要、無料です。

HDRI(ハイダイナミックレンジ画像)

HDRI は High Dynamic Range Image の略です。「ハイダイナミックレンジ」の部分こそが肝心な言葉です。標準的な 8-bit PNG は 1 チャンネルあたり 256 個の離散値を格納し、ダイナミックレンジは概ね 2〜3 段(stop)程度です。32-bit float の HDRI は、ほぼゼロから数万に及ぶ小数値を格納します——20 段を超えるダイナミックレンジです。実際的に言えば、屋外の本物の HDRI では太陽が車の下の深い影より 100,000 倍明るく、ファイルはその比率をそのまま保持します。実写ではなくテキストプロンプトから生成したい場合は、AI HDRI作成ツールが Radiance の .hdr を直接出力します。

この比率があるからこそ、HDRI は**イメージベースドライティング(IBL)**で真価を発揮します。レンダラーが拡散と鏡面の寄与を求めて HDRI 環境マップをサンプリングするとき、ファイル内の実際の輝度値を使って、リアルな光のバウンスと鏡面ハイライトを計算します。本物の HDRI にある明るい太陽は、磨かれた表面にシャープな鏡面ハイライトを作ります。同じシーンを 8-bit LDR で保存すると、ハイライトは白飛びして平坦になります。ファイルがその差を表現できないため、レンダラーは空全体をほぼ同じ明るさとして扱ってしまうのです。

ファイル形式

主流の HDRI コンテナは 2 つです:

  • Radiance .hdr(RGBE とも呼ばれます):1980 年代に Greg Ward が開発した古い形式。32-bit の値を、ピクセルごとに 8-bit の仮数 + 8-bit の共有指数として格納します(RGBE エンコーディング)。Blender、Substance Painter、Marmoset、そしてほとんどの DCC ツールで広くサポートされています。EXR よりファイルが小さくなります。AI HDRI作成ツールが出力するのはこの形式です。
  • OpenEXR .exr:ビジュアルエフェクトとハイエンドレンダリングの現代的な標準。チャンネルごとに真の 16-bit または 32-bit float を持ち、共有指数のような妥協がありません。マルチレイヤー、マルチパート、タイル形式に対応します。VFX パイプラインで好まれ、Blender Cycles や Unreal Engine の HDRI Backdrop(.exr 入力)でサポートされています。

HDRI と背景——正直な線引き

多くのゲーム開発コンテンツは、「HDRI スカイボックス」と「HDRI ライティング」の境界を曖昧にしています。この 2 つは別物です。レベルの背景として見た目の良い空がほしいだけで、環境マップにライティングの寄与を頼っていないなら、本物の HDRI は必要ありません。8-bit LDR の正距円筒パノラマでも見た目は同じで、ファイルサイズははるかに小さくて済みます。空は背景であって、32-bit の精度は要らないのです。

本物の HDRI が必要なのは、次のようなときです:

  • PBR マテリアルに、支配的な光源(太陽、エリアライト、ネオンサイン)からの正確な鏡面ハイライトが必要なとき。
  • 明示的にライトを置かずに、環境から柔らかく方向性のある環境光がほしいとき。
  • 露出の正確さが重要な、ルックデブや製品ビジュアライゼーションを行っているとき。
  • バーチャルプロダクションで、実際に撮影した環境に合わせているとき。

AI 生成 HDRI についての正直な注意

AI パノラマジェネレーター——私たち自身の AI HDRI作成ツールも含めて——が生成するのは 8-bit LDR のピクセルです。その出力は Radiance の .hdr コンテナに包まれ、技術的には「HDRI ファイル」になります。しかしピクセルデータは依然として 8-bit で、トーンマッピングされ、ガンマエンコードされています。AI が生成した空の太陽は、影より 100,000 倍明るいわけではありません——せいぜいニュートラルより 3〜4 段上で、これはどんな 8-bit 画像とも同じです。

これが実際に何を意味するか。AI HDRI は、柔らかい環境 IBL、ムードの方向づけ、架空の室内、背景のバリエーションには非常に優れています。明るい空の領域からのもっともらしい鏡面反射も得られます。しかし、Poly Haven のブラケット撮影による HDRI が与えるような、シャープで物理的に正確な太陽の鏡面反射は得られません。どちらも役に立ちます。始める前に、自分がどちらを必要としているのか見極めましょう。

本物の HDR がほしいなら、Poly Haven(CC0、実写、非常に高品質)か、スタジオ品質の HDRI には Lumiere を使いましょう。スピード、量、架空の環境には AI 生成を使いましょう。

変換の経路

形式どうしの変換経路を理解しておくと、不要な往復や劣化を伴う処理を避けられます。

正距円筒 → キューブマップ が最も一般的な方向です。選択肢:

  • キューブマップ変換ツール(ブラウザベース、無料、アップロード不要、4 つのエンジンの命名規則すべてに対応)
  • Blender コンポジター:正距円筒ノードを、キューブ投影のカメラ設定による 6 枚のレンダリングに送り込む
  • panorama-to-cubemap npm パッケージ:Node.js で動作し、各面の PNG を出力する JavaScript ライブラリ

キューブマップ → 正距円筒 はそれほど一般的ではありませんが、必要になることもあります(たとえばキューブマップのアセットしか手元になく、パノラマエディターで環境を編集したい場合など)。選択肢:Photoshop(Perspective Warp ツールと手作業での組み立て。面倒ですが可能)、Blender(カメラリグによるレンダリング)、カスタム変換行列を使った ImageMagick。この方向は現在、私たちのブラウザツールでは未対応です——需要があればロードマップに載せますが、WebGL コンピュートのないブラウザ環境では、その計算はかなり複雑になります。

8-bit LDR PNG → HDR コンテナ: 私たちの AI HDRI作成ツールは、LDR パノラマを Radiance の .hdr ファイルに包み、Blender、Unreal、Unity HDRP が変換ステップなしにそのまま取り込めるようにします。ピクセルの値は 8-bit LDR のままです。本物の HDR キャプチャ——真に 20 段を超えるダイナミックレンジを実現すること——には、ブラケット露出撮影(5〜7 枚の露出を Lightroom または PTGui で合成)か、適切なカメラモデルを備えた物理ベースレンダラーでのレンダリングが必要です。1 枚の 8-bit ソース画像から本物の HDR を復元するアルゴリズム的な方法はありません。

どの形式を使うべき?

URP / HDRP / UE5 / WebGL / 最新エンジンを使っている?
├─ はい → 正距円筒を使う。エンジンがネイティブに処理する。
└─ いいえ → Unity 旧来のビルトイン、またはモバイルを使っている?
    ├─ はい → キューブマップに変換する。
    └─ いいえ → IBL ライティングをしている(単なる背景ではない)?
        ├─ はい → HDRI(真の 32-bit、例:Poly Haven)を使う。
        └─ いいえ → 正距円筒のままにする。

エンジン別クイックリファレンス:

  • Unity URP: Panoramic skybox マテリアル。正距円筒(PNG または EXR)を使用。単一ファイルで変換不要。
  • Unity HDRP: HDRI Sky ボリュームコンポーネント。ライティング用途には正距円筒の EXR または HDR、背景のみなら正距円筒の PNG を使用。
  • Unity ビルトイン: 6-Sided skybox マテリアル。キューブマップ(6 面)を使用。キューブマップ変換ツールで変換。
  • Unreal Engine 5: HDRI Backdrop アクター。正距円筒の HDR/EXR を使用。Lumen では Unreal が環境マップを間接光の寄与に使うため、ここでは本物の HDRI を使うと最良の結果が得られます。
  • Blender Cycles: Equirectangular Environment Texture ノードを使った World シェーダー。正距円筒の HDR/EXR を使用。ビット深度は、反射マテリアル上の鏡面ハイライトの品質に直接影響します。
  • Blender Eevee: ノード構成は Cycles と同じ。Eevee は内部でリフレクション用のキューブマップを使いますが、入力は依然として正距円筒です——Eevee はシーン読み込み時に、そこから自前でキューブマップをベイクします。手作業でキューブマップを用意する必要はありません。
  • Three.js: 最新のセットアップには EquirectangularReflectionMapping(単一の正距円筒 PNG/HDR)、旧来のセットアップには CubeTextureLoader(6 枚の面ファイル)。新規プロジェクトなら正距円筒を使いましょう——アセットパイプラインが大幅にシンプルになります。
  • WebXR / A-Frame: a-sky コンポーネントは正距円筒を受け付けます。360 度画像ビューアも本格的な VR シーンも、同じ形式を使います。カスタムの反射シェーダーを実装するのでない限り、キューブマップは不要です。

よくある落とし穴

1. ラップ位置に見える継ぎ目。 正距円筒パノラマは、左右の端がつながります(ラップアラウンド)。左端のピクセル行が右端のピクセル行と一致しないと、スカイボックスに縦の縞が目に見えて現れます。これは、AI 生成が画像の境界でランダムなノイズやビネットを持ち込むときに最もよく起きます。AIスカイボックス生成には、継ぎ目のアーティファクトを最小化するために特別に調整されたプロンプトリライターと生成パイプラインが組み込まれており、モデルはシームレスにつながる空を生成するようチューニングされています。汎用の画像モデルで生成している場合は、Photoshop で水平方向の継ぎ目ブレンド処理を施しましょう(画像を 50% オフセットし、新しい中心をブレンドしてから、オフセットを戻す)。

2. キューブマップの面の向きが間違っている。 エンジンごとに、期待する座標系と左手系・右手系の別(handedness)が異なります。Unity は左手系の Y-up 座標系を、Unreal は左手系の Z-up 座標系を使います。同じキューブマップアセットでも、エンジンが違えば鏡像や回転した結果になることがあります。最も安全なワークフローは、エンジン固有の命名規則を使い、最終的なスカイボックスを組み立てる前に、各面をプレーンなテクスチャとして読み込んで向きを確認することです。私たちのキューブマップ変換ツールは、選択した規則を出力ファイルに明示的にラベル付けするので、Unity、Unreal、Three.js、Blender のエクスポートがそれぞれ正しい面の向きになります。

3. 8-bit のコンテンツを HDR として扱う。 8-bit PNG の正距円筒を Blender Cycles の World Environment Texture として読み込むこと自体は技術的には動きます——Blender は受け付けます——が、太陽から物理的にもっともらしい鏡面反射は得られません。ファイルに十分なダイナミックレンジが単純にないのです。Blender はすべてのピクセルを同じ狭い帯域に押し込めてしまい、鏡面ハイライトは柔らかく、のっぺりとしたものになります。シーンが IBL の品質に依存するなら、本物の HDR ソースデータが必要です。これは AI が生成した .hdr ファイルにも等しく当てはまります。コンテナ形式は HDR でも、中身は LDR かもしれません。HDRI ソースを決める前に、DCC ツールでヒストグラムを確認しましょう。

4. ソースとキューブマップの面サイズの解像度不一致。 2048×1024 の正距円筒から 1024×1024 のキューブマップの面を切り出す場合、各面に使える有効なソースデータは実質約 512×512 ピクセル分しかありません(残りは隣接する面に割り当てられます)。その結果、特に透視歪みが最も大きい面の角では、ブロックノイズが目立ちます。経験則:きれいな結果を得るには、ソースの正距円筒の幅を、目的のキューブマップの面サイズの少なくとも 4 倍にしましょう。1024×1024 の面なら、4096×2048 の正距円筒から始めます。2048×2048 の面(多くのゲーム用途での品質上限)なら、8192×4096 のソースを使います。

最初のスカイボックスを生成する

ゼロから始めるなら、最も速い経路は、環境を(英語の)平易な言葉で説明して正距円筒パノラマを直接生成することです。AIスカイボックス生成は、プロンプトの最適化、継ぎ目のラップ、2:1 出力を 1 ステップで処理します。生成された画像は、変換なしで Unity URP、HDRP、Unreal 5、あるいは任意の WebGL シーンにそのまま投入できます。

ターゲットが 6 枚のキューブマップの面を必要とする旧来のパイプラインやモバイルエンジンなら、出力をキューブマップ変換ツールに通しましょう。エンジンの命名規則(Unity、Unreal、Three.js、Blender)を選び、zip をダウンロードしてインポートします。パイプライン全体——生成からキューブマップまで——が、サーバーへのアップロードなしにブラウザ内で完結します。

IBL ライティングに特化するなら、Radiance の .hdr エクスポートができる AI HDRI作成ツールを確認してください。上で触れた LDR の注意点を忘れずに。柔らかい環境光やムードにはこれを使い、ハードな鏡面反射の精度は Poly Haven のアセットで補いましょう。

関連記事

Panorama AI

Panorama AI