Metaballs

複数の円が融合して見える、2Dメタボールのアニメーション表示。

2Dのメタボール(複数の円が融合して見える表現)を、フラグメントシェーダで描画しています。

使い方

パーティクル操作

  • クリック / タップ — その位置にパーティクルを生成
  • 長押し — 0.3秒経過で連射開始(連射間隔はパネルで調整可)
  • スペースキー — 物理シミュレーションを一時停止/再開

背景画像操作

  • 画像をドラッグ&ドロップ — 背景画像として読み込み
  • ホイール — 背景画像の拡大/縮小(画像読み込み時のみ)
  • マウス中ボタン+ドラッグ — 背景画像の位置を移動(PC専用)

機能とパラメータ

各セクションをクリックすると展開します。

プリセット

パーティクルの色や物理設定など、今の見た目をまとめて「お気に入り」として保存し、あとからすぐに呼び出せる機能です。

ビルトイン
最初から用意されているサンプル設定です。クリックするだけでその見た目を試せます。
現在の設定を保存
名前を入力して保存ボタンを押すと、今の設定がこのブラウザに保存されます。次にこのページを開いたときも一覧に残っています。
保存済み
自分で保存した設定の一覧です。クリックすると適用され、横の「×」ボタンで削除できます。
保存(ファイル出力)
今の設定をファイルとしてパソコンに保存します。あとで読み込んだり、他の人に渡したりできます。
読み込み(ファイル入力)
保存しておいた設定ファイルを選んで、その見た目を呼び出します。
パーティクル設定

クリックやタップで生まれる粒(パーティクル)の見た目と、飛び出す勢いを決める設定です。

パーティクルの色
粒そのものの色です。「ライティング」を有効にしている場合は、光の当たり方によって明るさが変わって見えます。
生成済みにも色変更を適用
オンにすると、色を変更した瞬間に、既に画面に出ている粒の色も一緒に変わります。オフの場合は、これから新しく生まれる粒だけに新しい色が使われます。
一度に生成する数
1回クリック(タップ)したときに、いくつの粒を同時に出すかを決めます。
長押し生成間隔
長押ししている間、何ミリ秒おきに粒を出し続けるかという間隔です。数字が小さいほど短い間隔でどんどん出てきます。
パーティクルのサイズ
粒の大きさ(半径)です。数字が大きいほど粒が大きくなります。
サイズのばらつき
粒の大きさをどれくらいランダムに変えるかです。0にすると毎回同じ大きさになり、大きくするほど大小さまざまな粒が混ざります。
ブリッジの長さ
粒どうしがどれくらい離れていても融合して見えるかを決めます。短くすると粒同士が離れた途端に独立して見え、長くすると遠くの粒同士も滑らかにつながって見えます。
発射方向
円形のパッドをドラッグして、粒が飛び出す方向を指定できます。パッドの中心のままだとランダムな方向に飛び出し、外側にドラッグするとその方向に向かって飛び出します。
発射角度の範囲
飛び出す方向のばらつき具合です。0にすると指定した方向にぴったり飛び出し、180にすると全方位にランダムに飛び出します。
発射の速度
粒が生まれた瞬間の飛び出す速さです。数字が大きいほど勢いよく飛び出します。
物理挙動

粒が生まれたあとに、どのように動き、ぶつかり合うかを決める設定です。

重力の強さ
粒を下に落とす力の強さです。0にすると重力がなくなり、粒はその場に浮いたままになります。
ランダム移動の強さ
粒が自然にふわふわと揺れ動く強さです。それぞれの粒が個別に独立して揺れるので、群れ全体がゆらゆらと漂うような表現になります。
サイズで移動量を変える
粒の大きさによって動きやすさを変える設定です。値を大きくすると、小さい粒ほど機敏に動き、大きい粒ほどゆっくり鈍く動くようになります。
コリジョンサイズ
粒どうしがぶつかり合う判定の大きさです。0にすると粒は重なり合っても素通りし、大きくするほどしっかりとお互いを押し合うようになります。
ライティング

粒の塊に光と影をつけて、立体的に見せるための設定です。

影・ハイライトを有効化
このライティング効果全体のオン/オフを切り替えます。オフにするとのっぺりとした単色の見た目になります。
光源の位置
円形のパッドをドラッグして光が当たる方向を指定します。中心にすると正面(手前)から光が当たり、外側にドラッグするとその方向の真横から光が当たるようになります。
ライトの色
光の色味です。粒そのものの色は保たれたまま、光の色味だけがほんのり加わります。
影の色
暗い部分に混ざる色です。
ライトの強さ
光が当たっている部分の明るさの強さです。
ハイライトの強さ
光が反射してきらっと光る部分(光沢)の強さです。
ハイライトの鋭さ
その光沢の広がり方です。0にすると広くやわらかい光沢に、1にすると小さく鋭い点のような光沢になります。
影の強さ
暗い部分の濃さです。
一体感(深度)
粒どうしのつなぎ目をどれくらい滑らかにするかという設定です。値を大きくすると、複数の粒が一つの大きな塊のように一体感のある見た目になります。
重なりで不透明化
粒の重なり具合に応じた透け方の設定です。値を上げると、1つだけの粒は薄く透けて見え、たくさん重なっている部分ほどはっきりと濃く見えるようになります。
描画設定

画面の見え方や、動作の軽さに関わる設定です。

画面端のコリジョン
オンにすると、粒が画面の端に着いたときに跳ね返ってその場に留まります。オフにすると、粒は画面の外に完全に出た時点で消えていきます。
背景の色
画面の背景に敷く色です。画像出力時に「背景を透過する」をオフにしている場合は、この色がそのまま書き出されます。
合成方法
粒と背景をどのように混ぜ合わせて表示するかという設定です。通常表示のほか、光を重ねたように明るくする「加算」、色を重ねて暗くする「乗算」など、いろいろな見た目に変えられます。
描画の解像度スケール
画面を内部でどれくらい精細に描くかという設定です。下げるとやや粗くなりますが、動作が軽くなります。パソコンの動作が重いと感じたときに下げてみてください。
FPS上限
1秒間に何回まで画面を描き直すかという上限です。数字を上げるとより滑らかになりますが、パソコンへの負荷も上がります。
パーティクルの最大数
同時に表示できる粒の数の上限です。この数を超えると、それ以上は新しい粒が生成されなくなります。
画像として保存(PNG出力)

今の画面の様子を、画像ファイルとして手元に保存できる機能です。

出力サイズ
保存する画像の大きさを、128×128~2048×2048の中から正方形で選べます。
背景画像の範囲に合わせる
背景に画像を読み込んでいるときだけ使える設定です。オンにすると、後述の枠を使わずに、その背景画像の表示範囲とサイズに合わせて書き出します。
背景を透過する
オンにすると、背景の色や画像を含めずに、粒の部分だけを透明な背景の画像として保存します。他の画像に重ねて使いたいときに便利です。
枠の移動
保存される範囲を示す枠が画面に表示されます。枠の上にあるバーをドラッグすると、切り出す位置を自由に調整できます。
その他のヘッダーボタン
クリア
今までに生成した粒と、読み込んだ背景画像をすべて消して、最初の状態に戻します。
パフォーマンス
1秒あたりの描画回数(FPS)や、処理にかかっている時間を確認できる表示です。動作が重いと感じたときの目安になります。
全画面
画面いっぱいに表示を広げます。もう一度押すと元の大きさに戻ります。

動作には WebGL2 対応のブラウザが必要です。スマートフォン/タブレットの タッチ操作にも対応しています(中ボタン操作はマウス専用)。