Kage 運営中

KageはデザイナーのMeng Toがオープンソースで公開している没入型3Dインタラクティブ体験プロジェクトです。単一のHTMLファイルのみを使用し、Three.jsによるリアルタイムレンダリングにGPT Image 2で生成したシーン素材を重ね、架空の京都の山寺を夜に歩く体験を構築しています。ユーザーはマウスのスクロールだけでカメラの経路を操作し、山門、静かな庭など5つのチャプターを通り抜けながら、雨や霧、落ち葉、朱色の満月が織りなす映画のような雰囲気を味わえます。Kageは直接開いて実行でき、AI生成コンテンツとリアルタイムWebGLを融合したフロントエンドデザインの好例です。

WeChatでフォローし「オープンソース」と返信すると、AIオープンソースプロジェクト交流グループに参加できます
スクロールがナビゲーション：マウスホイールでカメラをあらかじめ設定された経路に沿って山寺の中を移動させます。ボタンもメニューもなく、スクロールだけが唯一の操作方法です。
リアルタイム3Dレンダリング：Three.jsを基盤に、寺院、山門、雨や霧、落ち葉、朱色の満月などの動的なシーンをブラウザ上でリアルタイムに構築します。
AI素材の融合：GPT Image 2で生成したシーンボードと透明WebPの前景要素をリアルタイム3D世界に重ね、映画のような表現を高めます。
5章構成のストーリー：「山門→静かな庭→匠の技→残照→宣言」の5章で構成され、スクロールするたびに新しい構図のショットが表示されます。
単一ファイル・ビルド不要：すべてのロジック、スタイル、レンダリングを1つのHTMLファイルに集約しており、npm、React、その他のビルドツールは不要です。
没入型のビジュアル演出：ほぼ黒、濃紺、暖かな琥珀色、骨白、朱色による抑制の効いた配色に、bloom、フィルムグレイン、ビネットのポストプロセスを組み合わせています。
アクセシビリティ対応：アニメーションを弱めるオプションを内蔵し、モバイル端末のレスポンシブレイアウトにも対応しています。

オンライン体験：ブラウザで https://mengto.github.io/kage/ にアクセスすると、京都の山寺を巡る夜の旅を体験できます。
ローカル展開：リポジトリをクローンした後、任意の静的サーバー（python3 -m http.serverなど）を起動します。ビルド手順は不要です。
操作方法：ページを開いたらマウスをスクロールするだけで、カメラがあらかじめ設定された経路に沿って5つのチャプターを自動的に移動します。
ブラウザ要件：WebGLに対応した最新のブラウザを使用してください。対応していない場合、画面をレンダリングできません。
二次創作：模倣する場合はPROMPT.mdに基づき、AIを使って素材を新たに生成してください。元プロジェクトのartworkを直接再利用することはできません。
アクセシビリティ設定：システム設定で「視差効果を減らす」が有効になっている場合、ページはめまいを防ぐためにアニメーションの強度を自動的に下げます。

単一ファイル構成：すべてのロジック、スタイル、3Dレンダリングを1つのHTMLファイルに集約し、ビルド不要、依存関係不要で、すぐに利用できます。
ミニマルな操作：スクロールだけでカメラの経路を操作でき、ボタンもメニューもないため、すぐに使い始められます。
AI融合レンダリング：GPT Image 2で生成したシーン素材とThree.jsによるリアルタイム3Dレンダリングをシームレスに重ね、実写の質感と動的な光影を両立しています。
映画のような没入感：5章のストーリー構成に抑制の効いた配色とポストプロセス効果を組み合わせ、インタラクティブな京都の山寺夜遊びの映画的な体験を生み出します。
デザイナー主導：プログラマー出身ではない作者がプロンプトを主軸に制作し、AI時代におけるデザイン優先のフロントエンド開発という新しいパラダイムを示しています。
軽量で移植性が高い：バックエンド、分析スクリプト、実行時のネットワークリクエストがなく、あらゆる静的サーバーに数秒でデプロイできます。

プロジェクト公式サイト：https://mengto.github.io/kage/
GitHubリポジトリ：https://github.com/MengTo/kage

個人ポートフォリオ／クリエイティブホームページ：デザイナーや開発者は、単一ファイルの3D没入型体験で従来のポートフォリオを置き換え、スクロールによるストーリーテリングでプロジェクトを紹介できます。一般的なWebページを大きく上回る視覚的な印象を残せます。
観光地のデジタルガイド：Kageの「夜の山寺巡り」モデルを実在の観光地へ応用し、スクロールで古建築群や自然景観を巡れるようにして、静的な画像と文章による紹介に置き換えます。
ブランド発表／製品ティザーサイト：新製品の発売前に、1ページの映画のような体験で雰囲気を演出します。自動車、腕時計、高級品などで、チャプター形式のスクロールにより製品の細部やブランドストーリーを段階的に見せられます。
博物館／歴史教育向けデジタル展示：古代都市や遺跡などの歴史的な場面を再現し、学生や来場者がスクロールで歴史の中へ「入っていく」体験を提供します。AI生成素材を活用して美術制作のコストも抑えられます。
フロントエンド教育とThree.js入門事例：単一ファイル・ビルド不要の典型例として、Kageはソースコードを直接分解して教えるのに適しています。学生はnpm環境を構築しなくても、3Dシーン、カメラ経路、スクロール駆動の中核ロジックを理解できます。