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

 (paveldogreat.github.io)
2 ポイント 投稿者 GN⁺ 2024-12-30 | 1件のコメント | WhatsAppで共有
  • ブラウザ上でそのまま動作する流体シミュレーションアプリで、レンダリング品質や物理計算に関する値をユーザーが調整できる
  • qualityとsim resolutionを中心に、density diffusion、velocity diffusion、pressure、vorticity、splat radius などのシミュレーションパラメータを変更できる
  • 視覚効果は shading、colorful、Bloom、Sunrays に分かれており、Bloom と Sunrays には個別の詳細値がある
  • 実行フローは paused と Random splats で制御し、Capture 領域で背景色・透明背景・スクリーンショットを扱う
  • Github、Twitter、Discord、モバイルアプリの確認項目も配置されており、シミュレーション外部のリソースへ移動できる

シミュレーション調整項目

  • WebGL Fluid Simulation ページは「Try Fluid Simulation app!」という案内とともに、流体シミュレーションの実行画面を提供する
  • ユーザーが調整できる基本項目:
    • quality
    • sim resolution
  • シミュレーション値は次の項目で構成される:
    • density diffusion
    • velocity diffusion
    • pressure
    • vorticity
    • splat radius

実行と画面効果

  • 実行関連オプション:
    • shading チェックボックス
    • colorful チェックボックス
    • paused チェックボックス
    • Random splats
  • Bloom 設定:
    • enabled チェックボックス
    • intensity
    • threshold
  • Sunrays 設定:
    • enabled チェックボックス
    • weight

キャプチャと外部項目

  • Capture 設定:

    • background color

      • transparent チェックボックス
      • take screenshot
      • 下部には Github、Twitter、Discord、mobile app の確認項目がある

関連記事

1件のコメント

 
GN⁺ 2024-12-30
Hacker Newsのコメント

  • これをフォークして光のモデルを加算合成から減算合成へ反転させてみたら、突然水中のインクみたいに見え始めた
    https://observablehq.com/@tomlarkworthy/ink

    • 流体シミュレーションを作ったとき、自分も最初にやったのがこれだった。デジタルな成果物で減算色彩効果、つまり顔料の豊かさや光によって変わる感じを得る方法を長く掘り下げてきたけれど、ほとんど成果はなく、それでも機会があるたびに試してしまう
    • インクが消えないようにするのはどれくらい難しいだろう？ お絵描きアプリに統合してみたくて、コツがあれば本当に助かる
    • インクをCMYKカラーに変えるのも検討に値する: mutable ink = [255, 0, 255]

  • なぜかはわからないけれど、こういう高解像度の物理シミュレーションや視覚効果を見るたびに、CPU/GPUの中でどれほど多くの処理が起きているのかをいちばん実感する
    今日これより前に、飛行機のコックピット視点で緊急事態を宣言して空港の滑走路に入っていく2分間の映像を見たのだけれど、最後のほうになってようやく実写ではなくシミュレータかビデオゲームだと気づいた。それでも、画面の中で渦巻く色を見るほうがまだ強く迫ってくる。変な感じだ

  • 以前の実装の中では、このバージョンにはいつも愛着がある。低解像度ではサイバーパンク・ネットランナーみたいな美学があって、高解像度ではほとんど霊的な幽霊のような感じが残る: https://haxiomic.github.io/projects/webgl-fluid-and-particle...

    • 2020年のコメントでそのプロジェクトの作者がこのプロジェクトについて語っているものもある、興味深い。両者がどうつながっているのか、あるいは同じ前提を独立に適用したのか、ずっと気になっていた: https://news.ycombinator.com/item?id=24065857
    • UltraHigh品質でソルバー反復を1にして遊ぶのが好きだ。料理である材料を別の材料にゆっくり混ぜ込む感じ、たとえばパスタを作るときに卵へ小麦粉を混ぜていく感じを思い出す

  • WebGLで作られた水シミュレーションの例をほかに知っている人はいる？ 泡のある波を実装する方法を探している
    EvanのPoolデモが好き
    https://madebyevan.com/webgl-water/

    • どこかで読んだのだけれど、あれはシミュレーションではなく、水やプールやその中の物体のように見せる巧妙なトリックに近いらしい

  • 流体レンダリングに興味があるなら、Sebastian Lagueが最近関連動画を作っていた: https://www.youtube.com/watch?v=kOkfC5fLfgE

    • Lagueの動画はいつも驚きがあって刺激をくれる。この分野に興味がある人には強くおすすめする

  • oimo.ioにもこのスレッドに出てきたWebGL流体シミュレーションがいくつかある
    https://news.ycombinator.com/item?id=37026592 - Water (2023-08-06, 133 comments)
    https://oimo.io/works/water/
    https://oimo.io/works/water3d/
    https://oimo.io/works/fluid/

  • これ、実際に自分のiPhone 15 ProでHDR表示になっている気がする。そういうことはあまりないので、画面がずっと生き生きして見える
    本当にすごい

    • 見た目は良いしとても滑らかだけど、流体力学アプリのサブスクって、本当に？

  • ノートPCのタッチスクリーンに初めて心から感謝した

  • Plasma Pongを思い出す
    無料オンライン版を実装したら、とても気の毒なことになりそうだ ;)

  • https://news.ycombinator.com/item?id=19963640
    https://news.ycombinator.com/item?id=23955527