Three.jsの物理演算をAIで実装！草が水に浮くデモを制作

Three.jsの物理演算をAIで実装し、剣で薙ぎ払った草が川に浮かんで流れるブラウザデモを作りました。きっかけは、『ゼルダの伝説 時のオカリナ』リメイクで、斬った草や葉が水面に浮く表現がSNSで話題になっていたことです。実際に触れるデモとともに、仕組みとAIによる制作の手応えを紹介します。

時のオカリナの「草が水に浮く」表現を試したくなった

下のKirklandさんの投稿では、水辺で斬った植物の葉が水面に残り、流れに運ばれる様子が紹介されています。草を斬った瞬間だけで終わらず、その後も世界の中に存在し続ける。こうした小さな反応が、ゲームの空間に説得力を与えるのだと思います。

Can we talk about how cool this one is??? Even BOTW and TOTK don’t have something this detailed! When you cut the grass or a plant near water, the cut leaves and blades of grass float with the flow of the water! 😮❤️ This remake is really just so amazing!!!… pic.twitter.com/4vzajL7E0I

— Kirkland 🌐 📶 💯 🔋 ⏰ 🗓 (@Kirklandus87) 2026年11月6日

そこで、この気持ちよさをブラウザで試せないかと制作したのが「風を斬る」です。任天堂の実装を解析・移植したものではなく、自作の草・剣・川で組み立てた独立した実験です。ゲームと同じ品質や仕組みを再現した、という意味ではありません。

ブラウザで遊べる草刈り・水面デモ

草が水面に浮いて流れるThree.jsデモを開く

草のある場所をクリック、またはドラッグすると剣を振れます。右ドラッグで視点を回し、ホイールで拡大。風速・風向・斬撃の強さを変更でき、スロー表示では着水の動きも観察できます。重く感じる場合は、ほかの重いタブを閉じて試してください。

現在のデモは、草を細かく分解せず、根元から一本丸ごと飛ばす仕様です。空中では重力で落下し、川に入れば浮かんで漂流。川の外へ飛んだ草は岸に着地して止まります。細葉・幅広葉・弓なりの葉など、5タイプの形や色を混ぜています。

Three.jsで草と水面をどう動かしているのか

同じ草の形を保ったまま、重力と水流を適用

描画にはJavaScriptの3DライブラリThree.jsを使用しています。生えている草を消して別の破片に交換するのではなく、元の頂点と三角形のつながりを維持したまま、草一本をひとつの物体として移動・回転させています。

草は3,600本。軽量化のため、長さ方向の分割を8区間から4区間に減らし、草全体の三角形数を115,200から57,600へ半減させました。本数とバリエーションを保ちながら、形を更新する負荷を抑えています。

波の高さと傾きを、描画と浮遊処理で共有

水面は、方向や速さの異なる3つの波を重ねて表現しています。GPUで水面を変形させる一方、草の処理でも同じ式から水の高さと傾きを計算。草が波と無関係に浮くのを防ぎ、上下や傾きが水面に沿うようにしました。

川の流れは水平方向の速度として与え、浮いた草が少しずつその速度に近づくようにしています。白い泡筋にも同じ流れを適用することで、草がなくても下流の向きが分かります。空中の風は48×48の格子で計算し、剣を振った周辺には渦を加えています。

ただし、これはリアルタイム表示向けの近似です。水の体積や圧力を厳密に解く3D流体解析ではなく、浮遊も水面への追従で表現しています。専用の物理エンジンは使わず、速度・重力・接触判定などをJavaScriptで実装しました。

着水では、草をいきなり水面の向きに揃えると「瞬間的に回った」ように見えます。そこで接触した瞬間の姿勢を基準にし、その後の波の変化だけを緩やかに伝えています。位置も一度に持ち上げず、少し水に沈む余地を残しました。複雑な式を増やすだけでなく、変化の速さを抑えることも自然な見た目につながります。

こうした物理演算の試作は、AIでかなり身近になった

今回の制作で実感したのは、こうした物理表現のデモなら、AIに具体的な動きを伝えることで比較的簡単に形にできる、ということです。「草を飛ばす」「水面を波打たせる」「着水したら流す」と段階を分け、コードの作成から修正までAIと進めました。

もちろん、一度の指示ですべて完成したわけではありません。最初は草の節が目立ち、ポリゴン数も多めでした。着水した草が急に向きを変える問題もあり、着水直前の姿勢を保存して、波による回転を穏やかにする調整が必要でした。AIは試すまでの手間を大きく減らしますが、不自然さを見つける目は欠かせません。

また、この小さなデモを作れることと、市販ゲームの完成度は別の話です。広い世界のあらゆる場所で破綻せず、映像・操作・処理速度を揃えるには、多くの検証と調整が必要です。時のオカリナの表現を見て感じる面白さも、個々の技術だけでなく、それが自然に遊びへ組み込まれている点にあります。

それでも、「面白そう」と思った挙動を、自分で動かして確かめられるようになった変化は大きいと感じます。まずは草と川の物理演算デモで、風や斬撃の強さを変えて遊んでみてください。AIを使った制作の入口として、こうした小さな実験はおすすめです。