WebGL流体シミュレーション技術

• 品質設定

  • 高品質、中品質、低品質、最低品質から選択可能

• シミュレーション解像度

  • 3264、128、256 から選択可能

• 密度拡散

  • 密度の拡散度合いを調整

• 速度拡散

  • 速度の拡散度合いを調整

• 圧力

  • 圧力を設定可能

• 渦度

  • 渦の強さを調整

• スプラット半径

  • スプラットの半径を調整

• シェーディング

  • シェーディング効果を設定可能

• カラフル

  • 色設定が可能

• 一時停止

  • シミュレーションを一時停止

• ランダムスプラット

  • ランダムスプラットを生成可能

• ブルーム効果

  • ブルーム効果を設定可能

• 太陽光線

  • ゴッドレイ効果を設定可能

• キャプチャ

  • 画面キャプチャ機能を提供

• ソーシャルメディアリンク

  • Github、Twitter、Discord のリンクを提供

• モバイルアプリの確認

  • モバイルアプリを確認可能

• コントロールを閉じる

  • コントロールパネルを閉じることが可能

[GN⁺]

Hacker Newsの意見

• 初期実装は低解像度ではサイバーパンクのネットランナーのような雰囲気があり、高解像度では幽霊のような質感を持つ
• このプロジェクトのフォークで光モデルを加算から減算に変えると、水中のインクのような効果が得られる
• 高解像度の物理シミュレーションはCPU/GPUの処理能力に感嘆させられる。飛行機のコックピットで緊急事態を扱った2分間の映像を見て、それが現実ではなくシミュレーターやビデオゲームだと気づいた
• WebGLでの水シミュレーションの例を探しており、EvanのPoolデモが気に入っている
• シミュレーションがどの種類の流体を実装しているのか気になっている。Navier-Stokes流体方程式を実装しているが、実際の水とは違って見える
  • スケールの問題なのか、それとも3Dではなく2Dだからなのかと疑問に思っている
• Sebastian Lagueが流体レンダリングに関する関連動画を制作している
• oimo.ioでWebGL流体シミュレーションを提供している
• iPhone 15 ProでHDRを実装しており、さらに映える
• Plasma Pongを思い出させ、オンラインの無料版実装を望んでいる
• ノートPCのタッチスクリーンに初めて感謝した