福野泰介の一日一創

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で遊べるようにししてみたい！