富山湾に、ブリを落とす。
65,536個のパーティクルが、青銀の衝撃波となって一気に広がる。勢いが収まると、パーティクルは渦を巻きながらゆっくり回遊を始める。
次に、ホタルイカを落とす。シアンの粒子が一粒ずつ明滅しながら、ふわりと漂う。ブリの青とホタルイカのシアンが混ざり合い、二度と同じにならない色が生まれる。
Three.jsとGPGPUによるリアルタイム3Dパーティクルシミュレーション。タップで落とし、ドラッグで描き、カメラを回して、あなただけの富山湾を作ろう。
📱 使い方
- ページを開くと富山湾をイメージした鉢型キャンバスが表示される
- 画面下のパレットから「ブリ」(青系)または「ホタルイカ」(シアン系)の素材を選択
- マウスでクリック・ドラッグして湾面に流体の軌跡を描く(スマホはタッチ操作)
- 右ボタンドラッグまたは2本指操作でカメラアングルを回転・ズーム
- ゴミ箱ボタンでリセット、カメラボタンでスクリーンショットをPNG保存
💡 ポイント: WebGL(Three.js)のGPGPU技術で65,000個以上のパーティクルをリアルタイム演算し、ブリ・ホタルイカをモチーフにした本物の流体物理シミュレーションを体験できます。
🎯 こんな人におすすめ
- 氷見や富山湾の魅力をアート体験として楽しみたい観光客
- 子どもから大人まで直感操作で楽しめるインタラクティブアートを求める方
- WebGL・3Dグラフィクスに興味のある技術系ユーザー
開発メモ
目的: 富山湾の海の幸を3Dパーティクルアートで表現するインタラクティブ作品技術: Three.js (r128), GPGPU パーティクルシミュレーション, WebGL シェーダー
工夫: ブリは低粘度で勢いよく広がり、curl noiseで渦を巻く。ホタルイカは一粒ずつ独立した位相で明滅し、群れのように漂う。2つの素材は物理特性が全く異なり、混ぜると予想外の動きが生まれる


コメント