Screenshots
Overview
概要
「光の観測室」をコンセプトに、観測カタログ風のトップ画面から各3D作品へ入っていく実験集です。銀河・群れ・ノイズ球などの生成系から、ブロック積みや迷路・エンドレスランナーなどの操作系まで、計10作品をすべて外部アセットなしのブラウザ内リアルタイム描画で収録しています。
How to use
遊び方・使い方
トップの観測カタログから気になる作品を選んで開きます。各ページではマウス／タップで世界に干渉でき、銀河ではポインタで渦を乱し、群れではカーソルが捕食者として振る舞います。ノイズ球はクリックで波紋が走り、地形はマウスで上空飛行を操舵。「共振」はマイク入力をFFTして周波数リングに反映します（許可しない場合は合成デモ）。ミニゲーム群（尖塔／迷路／疾走／掃天）はクリックやキー操作で遊べます。
Tech stack
技術スタック
Next.jsReactThree.jsTypeScriptTailwind CSSGLSLWeb Audio
Three.js／WebGLによるリアルタイム3D作品を10点収録。GLSLシェーダやPointsを多用しつつ、共通インターフェースでの資源解放やreduced-motion対応など、実験を量産するための土台を整えています。
Highlights
工夫した点
- メタデータと3D実装を分離し、トップのバンドルにthreeを含めず軽量化
- 各体験を共通インターフェース（Mount／Handle／HUD）で統一し、dispose()でgeometry/material/rendererとイベントを必ず解放
- prefers-reduced-motionを尊重し、カテゴリごとに可視光スペクトルの1色をテーマhueとして割り当てる演出設計
To improve
改善したい点
- 多数のGLSL／Pointsを使うため、低スペック端末でのフレームレート最適化
- マイクや破砕など機能差のある作品間で、操作説明（HUD）の一貫性向上
What's next
今後の展望
- 作品数の拡充と、スコア保存を活かしたランキング等のソーシャル要素
- WebGPU対応や、より大規模なパーティクル表現への発展