D'zGAL WarpGate

WarpGate Player Specification

Document Version: 0.1.05 | Engine: Three.js + SparkJS

1. Core Integration Architecture

本プロジェクトの最も重要なアーキテクチャは、SparkJSを独自の描画コンテキストではなく、Three.jsのカスタムメッシュ（SplatMesh）として統合している点です。これにより、3DGS（背景）とGLB（人物）を1つのキャンバス・1つのシーン・1つのカメラで同時にレンダリングでき、Zバッファ（深度）の破綻やカメラ同期の複雑な計算を完全に回避しています。

Three.js (Core)

キャンバスの管理、カメラ制御 (OrbitControls)、環境光・平行光源、GLBモデルの読み込みとループアニメーション制御を統括します。

SparkJS (3DGS)

独立したエンジンとしてではなく、Three.js内の「1つのメッシュオブジェクト」として機能し、カメラワークに100%同調して描画されます。

// SplatMesh Integration Example
import { SplatMesh } from '@sparkjsdev/spark';

const splatMesh = new SplatMesh({ url: config.spzUrl });
splatMesh.rotation.y = config.envRotation;
scene.add(splatMesh); // Added directly to Three.js scene

2. Asset Management & Loading

柔軟な運用とUX向上のため、サーバーリクエストからローカルテストまでシームレスに対応する3段階のアセットロード機構を採用しています。JSON取得時はタイムスタンプによる強力なキャッシュバスターが働きます。

1. Default Load

HTMLロード時、同階層の default.spz, .glb, .json を自動取得。

2. Dynamic URL

?scene=xxx により、指定されたアセットセットへ動的に切り替え。

3. Local Interactive

画面のダブルタップやD&Dによるローカルファイルの即座ロード。

Server Directory Structure
player.html // Player Application
--- Query: ?scene=[Name] ---
[Name].spz // 3DGS Background
[Name].glb // Avatar (Draco)
[Name].json // Camera & Light Config

3. UI/UX & Controls

スマートフォンのタッチ操作にも最適化された OrbitControls と、洗練されたグラスモーフィズムUIを実装。ユーザーの作品鑑賞を妨げない設計となっています。

Immersive Mode

UIを半透明化（ウォーターマーク化）し、3D空間への没入感を最大化します。

Scene Saving

現在のアングルやパラメータをJSONとして保存。ファイル名はタイムスタンプ付きで自動生成されます。

OrbitControls & Camera Restoration

慣性（damping）による滑らかなスワイプ操作。さらに、camera.positionとcontrols.targetをJSONに保存し、ロード時にアングルを完全復元します。

4. Pro Mode Configuration

URLの末尾に ?dev=1 を付与してアクセスした時のみ、lil-gui を使用した開発者用のリアルタイム設定パネルが出現し、ローカルファイルのD&D読込が有効化されます。

Pro Mode Settings
Model Y Offset0.00
Model Scale1.00
Env Rotation Y0.00
Light Intensity0.80