2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

概要

Life is Tech Advent Calendar Day7 の記事です!
メンターのゆるゆるです!

SwiftとMetalを使って流体シミュレーションで簡単にアートが作れるFluidSignageというmacOSアプリを作ってみました。
このアプリに実装した機能、そして内部実装についても軽く紹介していこうと思います。
流体を使ったアート表現や映像を作りたい、という方はぜひ見てみてください!

とりあえずデモ

FluidSignageアプリの使い方

アプリを起動するとこんな画面が出てきます。
image.png

ここで、「セルの画像」と「セルの色画像」というボタンがあるので、それらをクリックしが流体アートにしたい画像を設定します。

「セルの画像」には下のような画像を設定します。

image.png

「セルの色画像」には下のような画像を設定します。

treeColor.png

これらの画像を設定すると、自動的に流体シミュレーションが始まり、先程の動画のような綺麗なアニメーションが再生されます。

入力画像の作り方

Parameter Inspectorの画面でこのようにセルの種類を選択することができます。
image.png

セルの種類

  • 流体:流体が流れるセル
  • Out:流体が出ていくセル
  • In:流体が入ってくるセル
  • Spawn:流体が発生するセル
  • 壁:壁

例えばInのセルを作りたければ、このようにInを選択した上で流入方向と流入速度を設定します。

image.png

すると、画面上部にカラーコードが生成されます。
このカラーコードの色を使ってこのように色を塗っていくことでセルの画像が完成します。

image.png

色画像に関しては、パーティクルが発生したときにそのパーティクルの色が、発生した座標の色画像のピクセルの色になります。

内部実装

流体シミュレーションには「格子ボルツマン法」という手法を用いています。
実装が簡単な上に並列計算に適していてとても高速なアルゴリズムです。
また、他の流体シミュレーションのアルゴリズムよりも渦ができやすく映えやすい気がしています。

今回のクリスマスツリーの映像では40万個のパーティクルをリアルタイム(60fps)でシミュレーションしています。
CPUのみで40万個のパーティクルをリアルタイムで計算するのは現実的ではないので、シェーダーというツールを使って高速化しています。
今回の場合は、シェーダーにはMetalを用いており、アプリ全体はSwiftで書いています。

シェーダーを使った物理シミュレーションや並列計算に興味がある方は、GPGPUと検索してみると面白いと思います。

さいごに

メタラー(Metalでシェーダーを書く人)増えるといいな

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?