作者: 希彼赫
ライブで試す このプロジェクトについて
Bloomはブラウザで動くリアルタイムの花畑です。マウスを走らせるか、カメラをオンにして両手でピンチすると、軌跡に沿って花の波が咲き広がります。
花は、リモートから読み込んだ3D花モデルをもとにリアルタイムでレンダリングされ、影響半径・開花速度・輝き・花の大きさ・密度・波の速さを調整できます。遊べるインタラクティブ作品であると同時に、3Dアセットのリアルタイム性能を検証する実験場でもあります。
体験ポイント
- マウスを走らせると、軌跡に沿って花の波が咲き広がる
- ドラッグで視点を回転、ホイールでズーム。好きなアングルから花畑を眺められる
- カメラをオンにして2回ピンチすると、花畑全体が一斉に開花する
- 輝き・密度・花の波の速さに加え、花ごとの大きさと彩度も調整可能。Hキーを押せばUIを隠してきれいな画面を録画できる
技術解説
3D アセット · Tripo テキストから 3D
野原に咲く 6 種類の花 — 白い花、黄色い花、デイジー、紫の花、青い花、赤い花 — はすべて Tripo のテキストから 3D 生成で作ったもの。プロンプトを一文書けば、PBR マテリアル付きの GLB が返ってきます。各花のポリゴン数は 2,000〜8,000 三角形に抑えていますが、これは見た目へのこだわりではなく、画面に 5,000 本近くを同時に植えるため。モデルが軽いほどフレームレートは安定します。
すべての花モデルは同じ約束事で出力しています：正面は +Z、底面は原点、高さは約 1 ユニット。おかげでコードはどの花にも特別扱いが要らず、新しい花に差し替えてもそのまま動きます。
数千本を同時に · InstancedMesh
ブラウザで数千本の花を同時に咲かせられるのは、Three.js の InstancedMesh のおかげ。花の種類ごとにジオメトリとマテリアルを 1 つだけ持ち、複製はインスタンシングに任せます — デフォルトで全体約 4,900 本、1 種類につき draw call は 1 回だけ。負荷は想像よりずっと軽いのです。
開花アニメーションもモデル自体には手を入れません。instanceMatrix のスケール値をインスタンスごとに更新するだけで、どの花も地面すれすれの芽から満開まで育っていきます。
開花の波 · レイキャスト + 放射状の波面
マウスが通ると、Raycaster がカーソル位置を草地に投影し、その着地点が開花の波の起点になります。各花は起点からの距離を見て、いつ咲くかを決めるだけ — 近い花から先に、遠い花は後から、輪を描いて外へ広がっていきます。複雑そうに聞こえますが、核心はシンプルな距離計算 1 回だけです。
ジェスチャー操作 · MediaPipe Hands
カメラをオンにすると、MediaPipe Hands が手の 21 個のランドマークをリアルタイムに追跡します。コードが見ているのはたった 1 つ、親指と人差し指がつまむように触れ合ったかどうか — 2 回ピンチすれば、指先の位置から野原全体がいっせいに咲き出します。誤検出を防ぐため、認識するのは右手だけです。
光のにじみ · Bloom ポストプロセス
画面を包む夢のような光のにじみは UnrealBloomPass のポストプロセスによるもの。全体のグローはデフォルト 0.46 で、光っているのに白飛びしない絶妙なライン。さらに花の種類ごとにグローと彩度のつまみを別に持たせているので、雰囲気を最大まで上げても、それぞれの花本来の色はつぶれません。
