threejs-world-generation について
持続性のある Three.js ワールドを計画・構築するスキルです。インタラクティブなブロックアウトや映像向けシーンを制作するチームを対象に、全体仕様と段階的なレビュー手順を定め、品質段階と本番アセットの条件を明示します。
主な機能
- 01ワールド全体の仕様
- 02ブロックアウトと本番品質の段階
- 03地域ごとの地形調整
- 04カメラパスの計画
- 05回数を限定したレンダリングレビュー
活用シーン
- 01異なる意味領域を持つワールドの計画
- 02全景から歩行者視点までの地形確認
- 03アニメーション用 Three.js ワールドの構築
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ calesthio/ openmontage --skill threejs-world-generationインストール後、Claude Code で/threejs-world-generationを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
agents/openai.yamlreferences/world-spec.mdworldclaw-principles.md詳細
Three.js ワールド生成
本番品質のメッシュや Blender のアセンブリについては、3d-asset-generation もお読みください。
Three.js は引き続き、意味的なインタラクティブ表示とブロックアウト用のレンダラーです。ブリーフで高密度かつリファレンス品質の景観が求められる場合は、Blender を本番用レンダラーとして使用します。
本番環境への引き継ぎには、インポートするアセットの目標寸法、意味的な散布除外ゾーン、地形に沿う水路・経路のジオメトリ、ランドマークの表示ポリシー、カメラのクリアランス、グローバル/リージョナル/徒歩視点の確認用フレームを含める必要があります。これらはワールド仕様の契約事項であり、手作業による Blender の後処理メモではありません。
無関係な 2D ショットの連続ではなく、永続的なシーングラフを作成してください。ユーザーが明示した制約を維持し、不足している構築の詳細は別途推定し、まず全体の地形を確立してから、ワールド全体の空間仕様を崩さずに選択した領域を洗練させてください。
品質ティアを明示的に選択する
blockout:プロシージャルなプリミティブ、頂点カラー、意味・レイアウトの検証、高速な反復。これを本番品質、リファレンス品質、または WorldClaw と視覚的に同等なものと決して呼ばないでください。production:ライセンス済みのローカル GLTF/GLB カタログ、4 つの意味カテゴリにわたる最低 8 種類のモデルのパレット、3 つの PBR 地形レイヤー、アセットの出所情報、徒歩視点での反復確認、プリミティブによるランドマークの代替なし。
ヒーロー動画や、テクスチャ付きの環境にオブジェクトが配置された参考画像を示す場合は、production を使用してください。カタログ/マテリアル/プロバイダーの要件を満たせない場合は、事前確認またはアセットゲートで停止してください。ブロックアウトを最終成果物としてレンダリングしないでください。
まず読む
- 粗密の手法を計画または説明する際は、references/worldclaw-principles.md をお読みください。
world_specを作成する前、またはthreejs_worldを呼び出す前に、references/world-spec.md をお読みください。- 出力されたワークスペースを編集する前に、
hyperframes-core、hyperframes-animation、hyperframes-animation/adapters/three.mdをお読みください。 - 本番ティアの作業では、
threejs-loaders、threejs-materials、threejs-textures、threejs-lighting、threejs-postprocessingをお読みください。
リクエストを振り分ける
- デザイン主導、解説的、抽象的、または音楽主導のワールド映像には、
animationパイプラインを使用してください。 - 予告編のようなムード、ドラマチックな見せ場、または素材とワールドを組み合わせた編集には、
cinematicパイプラインを使用してください。 - 成果物がコードネイティブな Three.js ワールドの場合は HyperFrames を選択してください。リファレンス品質のヒーローレンダリングには Blender を選択し、FFmpeg は Blender の連番フレームと承認済み音声のパッケージ化にのみ使用してください。提案時にその選択を記録し、承認後にひそかに切り替えないでください。
- これは既存のパイプライン内の機能として扱ってください。シーンが 3D だからといって、新しいパイプラインを作成しないでください。
ワークフロー
1. 意図と補完内容を分ける
計画の前に、次の 2 つのリストを記録してください。
explicit_constraints:ユーザーが提示した事実のみ。inferred_details:ワールドを実行可能にするために追加したスケール、領域の範囲、地形オペレーター、密度、パレットの調整、カメラの詳細。
推定したランドマーク、バイオーム、ストーリー上の展開を、明示された制約のリストに紛れ込ませないでください。
2. グローバルに計画する
次の内容を含む、共通の world_spec を 1 つ作成してください。
- ワールドのスケール、地形の解像度、標高範囲、シード。
- 中心、半径、地形オペレーター、パレット、散布レシピを正規化して指定した意味的な領域。
- すべての領域に共通する大気とライティング。
- 安定した ID とワールド空間での配置を持つ、明示的なランドマーク。
- 時刻、位置、ターゲット、視野角を含む、完全なカメラパス。
領域は 3~7 個を目安にしてください。各領域は、明確に異なるシルエット、表面の見え方、または機能的な役割を持つ必要があります。
3. 地形の基盤を構築する
本番環境では、まず threejs_asset_catalog を呼び出して、権利上安全なカタログを projects/<id>/assets/3d/catalogs/<catalog-id>/ にインストールします。アセットマニフェストに、ソース、ライセンス、アーカイブのハッシュ、モデルの一覧、および選択したすべてのモデルを記録します。次に threejs_world を quality_tier: "production" と、インストールしたカタログのパスを指定して呼び出します。
from tools.graphics.threejs_world import ThreeJSWorld
result = ThreeJSWorld().execute({
"operation": "build",
"world_spec": world_spec,
"output_path": "projects/<id>/hyperframes",
"duration_seconds": 60,
"render_mode": "cinematic",
"quality_tier": "production",
"asset_catalog_paths": ["projects/<id>/assets/3d/catalogs/kenney-nature-kit"],
})
world.json、world-spec.js、world-runtime.js、world-report.json は編集可能なアセットとして扱います。アセットのゲートで承認されるまで、これらを動画にフラット化しないでください。
4. 領域ごとに検査する
シネマティックなマテリアルパスでは空間的な問題を見つけにくい場合は、render_mode: "semantic" または "wireframe" を指定して第2パスを構築します。全体、領域、歩行者の各視点からスナップショットを確認します。
安定した項目名を使って、課題のキューを管理します。
- 地形の遷移またはシルエット
- ランドマークのスケール、ポーズ、または接地
- 散布密度、傾斜による除外、または反復
- マテリアルのコントラストと雰囲気
- カメラのクリアランス、クリッピング、または弱いフレーミング
可能な場合は、影響を受ける領域またはオブジェクトだけを修正します。シード、領域 ID、カメラの時刻、および無関係なパラメーターは維持します。
5. 上限を設けた反復で調整する
レンダー結果に基づく調整は、最大3ラウンドまで実行します。
- ワークスペースを構築します。
- 統合された HyperFrames の
checkゲートを実行し、代表的な時刻のスナップショットを取得します。 - フレームを確認し、課題のキューを更新します。
- 関連する仕様フィールドのうち、最小限の範囲を変更します。
- 同じシードで再構築して比較します。
重大な課題がなくなった場合、または反復回数の上限に達した場合は終了します。オーバーレイで隠さず、残る制限事項を報告します。
6. 上書きせずに合成する
ブラウザー上でネイティブに配信する場合は、render_runtime: "hyperframes" と composition_mode: "atelier" を設定します。video_compose は作成済みのワークスペースを保持する必要があります。参照品質の動画を作成する場合は、resume: true を指定して Blender の PNG シーケンスをレンダリングし、その後、パッケージ化のために render_runtime: "ffmpeg" を設定します。編集可能な信頼できるソースとして、ワールド仕様と .blend を保持します。
品質ゲート
- 地形は連続し、領域の境界は目立つ継ぎ目なく滑らかにつながっています。
- すべてのランドマークが支持面に接し、ワールドの境界内に収まっています。
- 散布は領域との適合性、傾斜の制限、およびシードによる決定性を尊重しています。
- 全体、領域、歩行者の各フレームで、同じ連続したワールドとして認識できます。
- カメラパスは地形より上を通り、クリッピングを避け、スケールを示すリビールを少なくとも1つ含んでいます。
- レンダリング後もワールドのソースは編集可能です。領域、ランドマーク、カメラキー、パレットには安定した ID またはフィールドがあります。
- 配信前に HyperFrames の
checkとレンダリング後のレビューに合格しています。旧ランタイムをサポートする場合に限り、従来のvalidateまたはinspect操作を使用します。 - 本番用のビューティーフレームには、前景、中景、背景の各奥行きにテクスチャ付きアセットがあります。主要なオブジェクトが、テクスチャのない箱、円錐、八面体、または十二面体に見えてはいけません。
- 本番環境では、4種類以上の意味的なアセットカテゴリ、8種類以上の異なるモデル、3層の PBR 地形レイヤー、カメラ上重要な領域ごとの領域構成レビュー、および反復と接地に関する明示的な確認結果が必要です。
制約事項
- 本番カタログのパスによりジオメトリと表面の豊かさは大きく向上しますが、WorldClaw の GPT-Image-2、SAM3、SAM3D、Hunyuan3D、BlenderMCP、または4台の H20 による実装を再現するものではありません。
- 別のツールが明示的に追加しない限り、関節付きアセット、ゲーム物理、ナビゲーションメッシュ、またはインタラクションロジックがあると主張しないでください。
- シードなしのランダム性、実時間に依存するアニメーション、リモートモデル、またはレンダリング時のアセット取得は使用しないでください。
- 下位レベルの
threejs-*スキルを削除しないでください。これらは、このランタイムを拡張する際に使用するサブシステムのリファレンスです。