HRuiCcc/RuiC-card-skill

解決する課題

Web向けの3Dホログラフィック「トレーディングカード」の作成を自動化します。アセットの手動デザインやシェーダーのコーディングに代わり、ユーザーは単一のテキストプロンプトや参照画像から、奥行き、ホログラフィックな輝き、3Dビューアを備えた完全なインタラクティブカードを生成できます。

仕組み

このプロジェクトは「Codex Skill」パイプラインとして動作し、プロンプトをいくつかのステップを経て完成品に変換します：

1. レイヤー生成: 共有座標系上で4つの異なる画像レイヤー（被写体、背景、線画、テキスト）を作成します。
2. 3Dシーン構築: Blenderのポータブル版を使用してこれらのレイヤーを3D空間に配置し、被写体が前に押し出し、背景が奥へ退く物理的な奥行き（パララックス）を作成します。
3. マテリアル適用: 視聴者の視点に反応するホログラフィックシェーダー（レーザーレインボー、金箔、銀箔、またはパール調）を適用します。
4. Web組み立て: Three.jsビューアを単一ファイルのHTMLページにパッケージ化し、ユーザーがブラウザ内でカードを回転、反転、奥行きや光沢を調整できるようにします。
5. 配信: システムはライブWebリンク、編集可能な.blendファイル、透過PNGレイヤー、設定JSONを出力します。

対象ユーザー

• クリエイターとゲーム開発者: キャラクターカードやインディーゲームアセットの迅速なプロトタイピングに。
• ペットオーナー: ペットの写真を「伝説級」のホログラフィックカードに変えるために。
• マーケター: プロダクトローンチのためのインタラクティブなデジタルコレクティブルやプロモーション用「イースターエッグ」の作成に。
• 3D趣味家: Blenderでのホログラフィックマテリアルやパララックス効果の実験に。

ハイライト

• 一文での生成: プロンプトからインタラクティブなWebページまでの完全自動化。
• 真の3Dパララックス: 平坦な画像ではなく、奥行き分離レイヤーを使用して現実的な3D効果を作成します。
• 視点ベースの輝き: タイムドループではなく、視聴角度に基づいてホログラフィック効果が変化します。
• インストール不要のBlender: システム環境を汚染しないよう、ポータブル版Blenderを自動的にダウンロードして検証します。
• 単一ファイルWebビューア: Three.jsとアセットを1つのファイルにパッケージ化し、アドブロックを回避して互換性を確保します。
• 自動検証: 操作（反転、スライド、スケーリング）を検証し、実際のフレームを比較するヘッドレスブラウザスクリプトを備えています。