1. はじめに
ゲーム開発やVRSNS用のワールド構築において、360度の背景（Skybox）やHDRIの調達は常にコストと品質のトレードオフです。
昨今の画像生成AIを使えば、高解像度な背景は数秒で手に入ります。しかし、それらを球体にマッピングした瞬間、ある致命的な問題に直面します。
「画像の左右の端が繋がらず、垂直に継ぎ目（シーム）が見える」
この問題に対し、本稿ではGemini APIのInpainting機能とCanvas APIによるピクセル操作を組み合わせることで、完全なシームレス化を自動で行う「360° AI Panorama Generator」の実装詳細を解説します。
- GitHub: https://github.com/FURUYAN1234/panoforge
- Live Demo: https://github.com/FURUYAN1234/panoforge
2. システム構成：フロントエンド完結のBYOKアーキテクチャ
「360° AI Panorama Generator」はバックエンドを一切持たないReact SPAです。ユーザー自身のAPIキーを利用するBYOK（Bring Your Own Key）方式を採用し、プライバシーと低コスト運営を両立しています。
技術スタック
- Framework: React 19 / Vite
- AI Engine: Google Gemini API (1.5 Pro/Flash, Imagen 3)
- 3D Rendering: Three.js (WebGL)
- Image Processor: HTML5 Canvas API
- State Management: React Hooks (UseState, UseEffect)
3. シームレス化のアルゴリズム：Shift & Inpaint パイプライン
AIに「端を繋げて」とお願いするだけでは、正確なピクセル一致は望めません。「360° AI Panorama Generator」では以下の4ステップでこの問題を「物理的に」解決します。
ステップ1：ベースとなるパノラマ画像の生成
まず、Imagen 3などのモデルに対し、正距円筒図法（Equirectangular projection）を強制するプロンプトを送信します。
const systemPrompt = "Equirectangular projection of a futuristic city, 360 degree, high detail, no seams, 2:1 aspect ratio --no central vanishing point";
この際、アスペクト比を厳密に2:1に固定し、パノラマ特有の歪みをAIに認識させます。
ステップ2：Canvas APIによる「境界線の中心移動」
生成された画像の「左右の端（繋がっていない部分）」を、画像の中央に移動させます。
Canvas APIを使用し、画像を垂直に二分割して左右を入れ替える描画処理を行います。
const splitAndSwap = (image) => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const mid = image.width / 2;
// 右半分を左側へ
ctx.drawImage(image, mid, 0, mid, image.height, 0, 0, mid, image.height);
// 左半分を右側へ
ctx.drawImage(image, 0, 0, mid, image.height, mid, 0, mid, image.height);
return canvas.toDataURL();
};
この処理により、本来「端」だった不連続なピクセル群が、画像の中央で一つの「境界線」として可視化されます。
ステップ3：Gemini Inpaintingによる境界線の消失
中央に移動した不自然な境界線を、Gemini APIのInpainting（部分再描画）機能で修正します。
境界線を含む中央部分のみをマスクしたデータを作成し、「周囲の風景と矛盾しないようにこの線を消せ」という指示とともにAPIへ送信します。
AIは画像の左側と右側の風景を論理的に理解し、その間を埋める新しいピクセルを生成するため、完璧な連続性が確保されます。
ステップ4：最終復元とThree.jsへのマッピング
Inpaintingから返却された画像を、ステップ2とは逆の手順でもう一度左右反転させます。これにより、元々の構図を維持したまま、左右の端が完全に一致するシームレスな360度画像が完成します。
完成した画像は、即座にThree.jsの SphereGeometry の内側にテクスチャとして貼り付けられます。
const geometry = new THREE.SphereGeometry(500, 60, 40);
geometry.scale(-1, 1, 1); // 内側にテクスチャを貼るために反転
const material = new THREE.MeshBasicMaterial({ map: texture });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
ブラウザ上で全天球パノラマとしてプレビュー可能になり、ユーザーはその場で見回すことができます。
4. 安定稼働を支える「Zenith Protocol」
LLM APIにはレートリミットやセーフティフィルターによるエラーが付き物です。「360° AI Panorama Generator」では、独自のエラー回避機構「Zenith Protocol」を搭載しています。
-
動的モデル切り替え:
gemini-1.5-proがエラーを返した場合、即座にgemini-1.5-flashへリクエストをリトライします。 - エンドポイントの正規化: Imagen系モデルとGemini系モデルで異なるAPIレスポンスのスキーマを、内部のラッパー関数で統一。UI側はAPIの違いを意識せずデータを扱えるように設計しています。
5. まとめ
「360° AI Panorama Generator」は、AIを単なるチャットボットとしてではなく、特定のワークフロー（3Dアセット制作）に最適化された「画像処理エンジン」として活用する試みです。
フロントエンドの既存技術（Canvas/WebGL）と、最新のAI APIを組み合わせることで、これまで専門的なプラグインが必要だった作業がブラウザ一つで完結するようになります。
ソースコードはすべて公開していますので、AIと画像処理の連携に興味がある方の参考になれば幸いです。