🎯 概要
3D Depth Viewer は、ブラウザ上で動作するRGBD(2D+Depth)画像を3D変換する画像・動画ビューアです。 サイドバイサイド（SBS）、アナグリフ、パララックスバリア、インターレース方式など 多彩な3D表示フォーマットに対応しています。
さらに、ブラウザ内でAIデプス推定を実行し、通常の2D写真を自動的に3D立体視画像へ 変換する機能も搭載しています。インストール不要で、WebGL / WebGPU を使って すべてブラウザ内で完結します。 モバイル端末でのAI深度推定は難しいようです。
🔧 ツールバー
ツールバーは画面上部に表示されます。各メニューをホバー（またはタップ）するとサブメニューが開きます。
メインボタン
| ボタン | 機能 |
|---|---|
| ✕（閉じる） | 前のページへ戻る |
| ⏺ Rec | 現在の3D映像を動画ファイルとして録画 |
| ⛶ フルスクリーン | 全画面表示のオン／オフ |
| ⊡ Fit | 画像を画面に合わせてフィット表示 |
| ⇄ L/R | 左右の映像チャンネルを入れ替え |
| ↔ FR | 深度方向の反転（手前・奥を入れ替え） |
| ◀ / ▶ | 前の画像／次の画像へ移動 |
ドロップダウンメニュー
| メニュー | 機能 |
|---|---|
| Stereo ▾ | 3D表示フォーマットの選択（下記参照） |
| Slide ▾ | スライドショー間隔：オフ / 3 / 5 / 7 / 10 秒 |
| File ▾ | 画像・動画ファイルの読み込み |
| Help ▾ | ヘルプページを開く、バージョン情報、設定リセット |
👓 立体視モード
お使いのディスプレイやメガネに合わせてモードを選択してください。
📂 ファイルの読み込み
ファイルの読み込みは以下の方法で行えます。複数ファイルを読み込むこともできます。複数ファイルを読み込むと、ファイル送り/戻し、スライドショーができます。
File メニューから
| 項目 | 説明 |
|---|---|
| Full SBS | フル幅サイドバイサイド形式のRGBD画像・動画 |
| Half SBS | 半幅サイドバイサイド形式のRGBD画像・動画 |
| Full T/B | フル高さトップボトム形式のRGBD画像・動画 |
| Half T/B | 半高さトップボトム形式のRGBD画像・動画 |
| AI 2D→3D | 通常の2D写真をAIデプス推定で3D変換 |
ドラッグ & ドロップ
画像ファイルや動画ファイルをビューア画面に直接ドラッグ＆ドロップして開くことができます。 複数ファイルを一度にドロップするとファイル送り/戻しやスライドショーができます。 最後にFileメニューから選択した形式のファイルとして変換表示します。
🎛️ Depth・Focus スライダー
スライダーパネルは画面下部に表示されます。 スライダーを操作中は自動非表示になりません。
Depth（0～100）
立体視の奥行き量（視差）を調整します。値を大きくすると3D効果が強くなり、 小さくすると平面に近づきます。 キーボードの矢印キーで細かく調整できます。C または Home でリセット。
Focus（0～255）
左右の像が一致する点（ゼロ視差面)を制御します。
各スライダーには Reset ボタンがあり、デフォルト値に戻せます。
▶️ 動画コントロール
動画コントロールボタンは動画を読み込んだときのみツールバーに表示されます。 静止画表示時は自動的に非表示になります。
| ボタン | 機能 |
|---|---|
| ▶ 再生 / ⏸ 一時停止 | 動画の再生・一時停止を切り替え |
| ⏹ 停止 | 再生を停止して先頭に戻る |
| 🔊 音量+ | 音量を10%上げる |
| 🔉 音量− | 音量を10%下げる |
| 🔇 ミュート | ミュートのオン／オフ |
スライダーパネル上部のプログレスバーで再生位置を確認・シークできます。 静止画表示時はプログレスバーも非表示（クリア）になります。
⌨️ キーボードショートカット
| キー | 動作 |
|---|---|
| Space / ¥ | 次の画像・動画へ |
| Backspace / ; | 前の画像・動画へ |
| S | 立体視モードを順番に切り替え |
| P / − | 動画の再生・一時停止 |
| Enter | フルスクリーンのオン／オフ |
| F | 画像をフィット表示 |
| H | アスペクト比を切り替え（SBS / Top-Bottom / 通常） |
| W | 深度方向の反転（手前・奥を入れ替え） |
| X | 左右チャンネルを入れ替え |
| → / ↑ | 深度（Depth）を増やす |
| ← / ↓ | 深度（Depth）を減らす |
| K | 画像を時計回りに回転 |
| L | 画像を反時計回りに回転 |
| C / Home | 深度・回転をデフォルトにリセット |
| M | ツールバー・スライダーの表示／非表示 |
| Q | 終了（ブラウザの履歴を戻る） |
| Numpad 0〜9 | スライドショー間隔設定（0=オフ、1〜9=秒数） |
🖱️ タッチ・マウス操作
マウス操作
| 操作 | 効果 |
|---|---|
| 左ボタンドラッグ | 画像をパン（移動） |
| スクロールホイール | ズームイン／アウト |
| マウスを動かす | ツールバーを表示（自動非表示タイマーをリセット） |
タッチ操作（スマートフォン・タブレット）
| ジェスチャー | 効果 |
|---|---|
| 1本指でドラッグ | 画像をパン（移動） |
| ピンチイン／アウト | ズームイン／アウト |
| タップ | ツールバーを表示 |
🤖 AI 2D→3D 変換
AI 2D→3D 機能は、Depth Anything V2 Small モデル（Transformers.js経由）を 使って通常の写真から深度マップを推定し、ブラウザ内でリアルタイムに立体視画像として表示します。
使い方
- File ▾ → AI 2D→3D を選択し、2D写真ファイルを指定します。
- 初回のみ：確認ダイアログが表示されます。 AIモデルのデータ（合計約100GB）のダウンロードが必要であることを案内します。 内容を確認して「OK」を押してください。
- モデルデータはブラウザにキャッシュされます。2回目以降はダウンロード不要です。
- 深度マップが推定され、選択中の立体視モードで3D表示されます。
モデルファイルは大容量です。ダウンロード前に十分なディスク容量と 高速なインターネット接続をご確認ください。 確認ダイアログはキャッシュ済みの場合は表示されません。
処理速度について
対応ブラウザでは WebGPU（GPU高速処理）を自動的に使用します。 非対応の場合は WASM / CPU モードで動作します。 WebGPUが使用できる環境では処理が大幅に高速になります。
📦 使用オープンソースライブラリ・謝辞
3D Depth Viewer は以下の優れたオープンソースプロジェクトを利用しています。 各プロジェクトの開発者・コントリビューターの皆様に深く感謝いたします。
https://threejs.org/
https://huggingface.co/docs/transformers.js
https://depth-anything-v2.github.io/
モデル：
onnx-community/depth-anything-v2-small