L@g*ǞQ@X K"Y^ҚTy"a"*z0uN(x`X@#?&q4iްWBCK҂:Hll7FѦ:dϫv",N\PYƧbidddates2024-11-05T23:55:00etitlexEブラウザで動く水面シミュレーションに雨粒を足すdtagsi#js #GLSLcurlxhttps://fukuno.jig.jp/4486dbodyy GPUを活用すると計算量が多いシミュレーションがサクサク動いてくれて気持ち良いですね。憧れの水面のシミュレーションもブラウザでサクサク！ThreeJS Waterを元に、ESモジュール化し、雨粒を足してみました。


「raindrop powered by ThreeJS Water」 src on GitHub
マウスでぐるぐるかき回すこともできます！メインのJavaScriptのコードは、すっきりシンプル、101行。雨粒コードはこれだけです setInterval(() => { const radius = 0.03; const strength = 0.02; const ndrops = 3; for (let i = 0; i < ndrops; i++) { watersim.addDrop( renderer, Math.random() * 2 - 1, Math.random() * 2 - 1, radius, strength ); } }, 100);


「threejs-water src on GitHub」
実装されているクラス毎に別ファイルとしました。
Caustics.js - 屈折
Pool.js - プール
Water.js - 水
WaterSimulation.js - 水シミュレーション（分解能256x256）
WaterSim.js - 全体をまとめたもの

Three.jsの使用バージョンがちょっと古い113。最新のESモジュール版にするといろいろと動かない点を直して、VRで遊べるようにししてみたい！
cimgxIhttps://img.sabae.cc/data/203506/ae157a93-cb74-4078-acd8-600d29048b4f.jpg