情報処理学会 インタラクション 2024
IPSJ Interaction 2024

1B-572024/2/28

パーティクルエフェクトのための3 次元流れ場の VR スケッチデザインシステム
井上弦†1三武裕玄†2五十嵐悠紀†3

概要：パーティクルの動きをデザインする際，流れ場のような位置に応じて動きが決まる手法は，調整後の動きが想像しやすいという利点がある．流れ場を調整するには大域的な流れと細部の流れどちらも調整できる必要があるが，従来システムでは大域的な流れの調整に手間がかかったり，どのパラメータをどの程度変更すれば望む流れを得られるのかわからなかったりと課題がある．本研究では，パーティクルの動きを決定する 3 次元の流れ場を VR 空間中でスケッチするデザインシステムを提案する．ユーザは，大域的な流れを調整できる特異点の配置と，細部の流れの調整ができるブラシを併用することで，VR 空間中に存在するベクトル場を直観的に調整できる．

1. はじめに
近年の 3D ゲームや映像の制作において，パーティクルエフェクトによる演出は欠かせない存在となっている．作
品内で作りたい視覚的演出を実現するためには，パーティクルの動きを操作者が思い通りに調整できるようなシステムが必要である．
パーティクルの動きを調整する手法として，Unity のParticle System[1]のようにパーティクルが発生してからの

図 1 既存システムの実行画面．(a) Unity の Particle
System．左下のグラフは，横軸が寿命で縦軸は上方向にかかる力を表している．(b) VectorayGen．

経過時間に応じて速度が変動する手法と，VectorayGen[2]のように流れ場を定義し，パーティクルの位置に応じて速度が変動する手法に大別することができる(図 1)．以下では，前者を時間依存手法，後者を位置依存手法と呼称する．
位置依存手法では，特定の位置でのベクトルがそのままができる．VR 空間中でコントローラを用いて直接的に流れ場を編集するため，時間依存手法やパラメータ入力による流れ場の編集と比較して直観的である．

パーティクルの動く方向となるため，調整後の動きが想像しやすいという利点がある．
位置依存手法で使用される流れ場を編集するシステムには，大域的な流れと細部の流れの両方を調整できる機能が必要である．VectorayGen などの従来システムで主に使用されるパラメータ入力による流れ場の編集方法では，細部の流れの調整は難しい．さらに多種多様なパラメータが存在するため，所望の動きを得るための適切なパラメータ設定が困難である．Draco[3]のようなスケッチインタフェー
スで流れを直接的に書き込む手法であれば，細部の調整を行いやすく，想像した通りの流れを作ることが容易となる．
その一方で，大域的な流れの調整は手間がかかるという問題がある．
本研究では，パーティクルの動きを決定する 3 次元流れ場を VR 空間中で編集するシステムを提案する．特異点を空間中に配置することで大域的な流れを作り，流れを書き込むブラシを用いることで，細部の流れの調整も行うこと

2. 関連研究2.1 パーティクルの動きの制御手法とスケッチインタフ
ェース
時間依存手法が主に使われるパーティクルデザインシ
ステム[1][4][5]では，細かな速さの調整がしやすいという利点がある．例えば徐々に減速するような動きをつけたい
場合，減速させたいタイミングに応じて，速さを調整することができるため，望んだ減速運動を得やすい．
位置依存手法が主に使われるパーティクルデザインシステム[2][6]では，特定の位置でのベクトルがそのままパーティクルの速度となるため，調整後の動きが想像しやすいという利点がある．そのため，望んだ通りの方向にパーティクルを動かしやすい．例えば何度も曲がるような動きをつけたい場合，曲がってほしい位置のベクトルを任意の方向に変更すると，その通りにパーティクルを動かすことができる．

†1 明治大学大学院†2 明治大学†3 お茶の水女子大学© 2024 Information Processing Society of Japan428

情報処理学会 インタラクション 2024
IPSJ Interaction 2024

1B-57
2024/2/28

手法に限らず，これらの既存ソフトウェアでは，パーテれ場をスケッチする．さらに，特異点を配置することで大ィクルを制御するパラメータが非常に多く(図 1)どのパラ域的な流れを手軽に作ることができる．制御範囲が大きくメータをどの程度変更すれば望む動きを得られるのかわかなっても，特異点のサイズを変更するだけで対応が可能でりづらいという課題がある．さらに位置依存手法のシステある．

ムでは，方向の調整がし易いのが利点であるが，キーボードでの数値入力によるパラメータ調整では，作りたい流れが細かくなるほど手間が増え，難しくなるという課題がある．

2.3 ジェスチャーによる流れの制御
3 次元の流れを制御する手法として，ジェスチャーを採用した研究も存在する．早川らは Leap Motion を用いて手提案システムでは，3 次元の流れ場に対して「流れブラのモーションデータを取得し，特定のモーションと紐づいシ」という流れを書き込むブラシを使用することで，パーている流体シミュレーションのパラメータを調整することティクルの動きをデザインする．位置依存手法とスケッチで，直接的に 3D 流体シミュレーションの制御を行った[14]．

インタフェース[7]を採用することで，方向の調整がしやす

Arora らは VR 空間中で鑑賞する 3D アニメーションの制作

く，細かな流れ場であっても複雑なパラメータ設定をするツールを開発した．アニメーターに VR 空間中でのアニメことなく直観的にユーザが望む結果を得ることができる．

ーション制作に必要なジェスチャーを考案してもらい，それを元に開発したプロトタイプにはジェスチャーでパーテ

2.2 スケッチによる流れの制御

ィクルを制御する機能が存在する[15]．Xie らは深度センサ

スケッチすることで流れをデザインする研究システムから取得したユーザのジェスチャーを入力とし，ジェスチは他にも存在する．Kazi らはイラストにテクスチャ，エミャーと紐づいている花火のパラメータを調整することがでッター，モーションパスを描き，パーティクルによるアニきるシステムを開発した[16]．これらのシステムでは，大域メーション効果を与えるシステムを提案した[3]．Hu らは的な流れを簡単に作ることができるが，細部の流れの調整

ユーザのスケッチ入力から cGAN によって生成された速度は困難である．提案システムでは，流れブラシで細部の流場に基づいて流体シミュレーションを行った[8]．松原らはれの調整も可能である．ジェスチャーベースの制御では，ユーザがスケッチしたパスから速度場を生成し，それに沿繊細な動きの表現や認識に限度があるため，パラメータのった炎のシミュレーションを行った[9]．有原らは 2 次元の微調整が難しいという課題もある．コントローラを用いれ煙の シ ミュ レ ー ショ ン に着 目 し， 手 描 きス ケ ッチ か らば，パラメータの微調整がスティック操作で可能となり，cGAN を用いて流体の構造を考慮した速度場を生成する支

ユーザのデザイン自由度が高くなる．そのため提案システ

援システムを提案した[10]．Zhu らは流体回路の形状や接ムでは，インタフェースにジェスチャーでなく，コントロ続を設計することができるリアルタイム図解スケッチシスーラを採用した．

テムを制作した[11]．これらのシステムでは，おおよその流れをユーザがスケッチし，ミクロな動きはシステムが補う

2.4 特異点による流れの制御ことで直観的に望んだ流れを得ることができる．しかし，Jakub らは基礎となるエネルギーをモデル化し，流れ場大域的な流れを作るには手間がかかるという課題がある．

を制御するモデルを提案した[17]．本研究では，この基礎と例えば一点を中心に収束するような流れを作りたい場合，なるエネルギーを特異点と呼称する．特異点は流れ場に配外側からその点に向かって何度もストロークを書く必要が置し強度を調整することで流れ場を制御することができる．

あり，この手間は制御範囲が大きくなるほど増える．
また，影響範囲を変更することで，大域的な流れも細部の流れもこれらの研究では 3 次元の流れには対応していない．

調整を施すことが可能である．

3 次元の流れに対応したスケッチシステムも存在するが，特異点をスケッチインタフェースに落とし込んだ研究

流れではなく，キーフレームを書き込むというアプローチが存在する．Xing らは特異点のモーションパスを描くことを取っている．Yan らは VR 環境で液体の初期状態を 3D スで時間変化する流れ場を生成し，イラストをアニメーショケッチし， cGAN によって時間経過したスプラッシュ表現

ン さ せ る イ ン タ ラ ク テ ィ ブ ス ケ ッ チ シ ス テ ム Energy-を生成した[12]．Pan らは，シミュレーションされた流体にBrushes を提案した[18]．Energy-brushes では固定されたイ

対してスケッチで流体の形状のキーフレームを指定し，指ラストをアニメーションさせるシステムのため，2 次元の定された形状に沿った流れのシミュレーションを行った流れ場が対象であり，収束，発散させる特異点がない．本[13]．これらのシステムでは，キーフレームでしかデザイン研究では，3 次元上でのパーティクルの動きを制御対象とに関与できないため，ユーザのデザインの柔軟性は高くなするため，VR 空間中で 3D スケッチを行うことで 3 次元のい．

流れ場を制御し，空間中を移動するパーティクルの制御が提案システムでは，ヘッドマウントディスプレイを装着し，VR 空間中でコントローラを用いることで，3 次元の流© 2024 Information Processing Society of Japan

目的のため，収束や発散させる特異点を用意するなど 3Dパーティクルに最適化したシステムとなっている．

429

情報処理学会 インタラクション 2024
IPSJ Interaction 2024

1B-57
2024/2/28

3. 提案システム
ユーザは，ヘッドマウントディスプレイを装着し VR 空間中で，コントローラを用いて流れ場のデザインを行う．
VR 空間中には立方体状の流れ場(図 2a)が存在し，これに対し て特 異点 の配 置(3.2.1 節 )と 流れ ブラ シに よる 塗り(3.2.2 節)を行い，編集を施すことで 3 次元流れ場のデザインをする．システムはリアルタイムで動作し，ユーザが流れ場に編集を与えると即座にパーティクルの動きに反映される．パーティクルはランダムにベクトル場内で発生し，3 秒経過すると消えるよう設定されている．システム実行
中のユーザの視点を図 2 に示す．
システムは Unity で実装し，バージョンは 2021.3.22f1 を

図2

システム実行中のユーザの視点(a) 流れ場 (b) キャンバス (c) レーザーポインター(d) 選択中のツール (e) ユーザが操作するコントローラ使用した．
3.1 ユーザインタフェース
左手のコントローラに，UI が配置されているキャンバス(図 2b)が追従しており，右手のコントローラから出ているレーザーポインター(図 2c)で照準を合わせて人差し指のトリガーボタンを押すことで，これらを操作することができる．キャンバス上には流れブラシ，特異点の選択ボタンと流線の表示非表示切り替えチェックボックスが用意されている(図 3)．
右手のコントローラには，現在選択している球状の特異

図3

UI が配置されているキャンバス

点か流れブラシが追従しており(図 2d)，これをベクトル場内に持っていき中指のトリガーボタンを押すことで，効果を適用できる．右手のコントローラのスティックの上下で球の大きさを変更できる．
3.2 3 次元流れ場のデザイン
ユーザは，作りたい流れに応じて特異点の配置と流れブラシを使い分け，立方体内に存在する 16×16×16 のベク
図4

トル場を編集する．内部的には，特異点配置用の場と流れブラシ用の場を別に保存し，毎フレーム加算した結果の場

3 種類の特異点(a)収束特異点，(b)発散特異点，(c)渦特異点．

が流れ場となり，パーティクルの速度に適用される．ベク
トルのスカラー値には上限があり，上限に達している状態

特異点は，収束，発散，渦という 3 種類が用意されておで加算を行った場合は加算した結果の方向が適用され，スり，それぞれベクトル場に与える影響が違うため，ユーザカラー値は上限の数値がそのまま適用される．

は求める流れ場に応じて適宜配置する特異点を選択する(図 4)．収束特異点は，流れを中心に向かわせる特異点で，3.2.1 特異点の配置

発散特異点は，流れを中心から外に向かわせる特異点であ特異点は，配置することで特異点の範囲内にあるベクトる．渦特異点は，ユーザが自由に設定できる回転軸を中心ル場に対して，特異点の種類ごとに固有のベクトル場を加に流れを回転させる特異点である．特異点は一度配置した算することができる機能である．ユーザは，任意の特異点

あとでも，配置位置，大きさ，強度を自由に変更できるたを選択し，配置したい場所まで持っていき，右手中指のトめ，パーティクルの動きを見ながら調整することが可能でリガーボタンを押すことで特異点を配置できる．特異点はある．

球の形をしており，中心が最もベクトル場に与える影響の強度が強く，外に行くほど減衰する．

© 2024 Information Processing Society of Japan

ユーザは，特異点を配置することで，大域的な流れを手軽に設定することができる．

430

情報処理学会 インタラクション 2024
IPSJ Interaction 2024

1B-57
2024/2/28

3.2.2 流れブラシによる塗り
流れブラシは，塗った軌道上のベクトル場に対して，任意方向のベクトルを加算することができるブラシである．
流れブラシを選択中に右手中指トリガーボタンを押すとブラシが発光し，この状態でコントローラを移動させることで塗ることができる(図 5)．塗った箇所が視覚的にわかるよ
うに一定時間塗った箇所に対してエフェクトを発生させている(図 5b)．この塗った範囲内にあるベクトルに対して，ブラシ内に表示されている矢印の方向に，設定したスカラー値の分だけベクトルが加算される．

図5

流れブラシでの塗り．(a) ブラシ適用中の発光している流れブラシ (b) 塗った箇所を可視化するエフェクト(c) 未使用時の流れブラシ

ユーザは，流れブラシを使用することで，特異点だけでは表現できない細部の流れのデザインを実現できる．
3.3 流れ場の可視化
流れ場は流線により可視化を行う．図 6,7 などで見られる流れ場の中にある青白い線が流線である．ユーザが流れ場に変更を与えると，その変更がリアルタイムで流線に反映される．流線の表示非表示はいつでも切り替え可能である．

図6

2 つのポイントで回転しながら 1 点に集まっていく流れ場の制作例

4. 流れ場のデザイン例
提案システムを用いてデザインした流れ場の例を図 6,7に示す．
図 6 は渦特異点を 2 つ設置，収束特異点を 1 つ設置し，その間を流れブラシで塗ることで，回転しながら 1 つの点に集まっていくという流れ場を作った様子である．
図 7 では，渦特異点を流れ場全体を覆うように 1 つ設置，発散特異点を真ん中上部に 1 つ設置，全体的に上方向に流

図7

竜巻のように回転しながら舞い上がり外側に広がっていく流れ場の制作例

れるよう流れブラシを使うことで，回転しながら舞い上がるようなパーティクルの動きを表現する流れ場の制作例をるコントローラのボタンをハイライトすることで対応する．

示す．この流れ場でデザインされたパーティクルの動きに具体的には，キャンバスにポインターが向いているときは，対し，テクスチャを煙らしいものに変更し，エミッターをボタン選択をするための人差し指トリガーをハイライトし，中央下部にのみ設置，パーティクルの色や大きさを調整す

流れ場の中にブラシがあるときは，ブラシを適用するためることで竜巻のようなエフェクトを作ることができると想の中指トリガーボタンをハイライトして補助する．

定される．

流れ場の可視化については「流線がリアルタイムで形状変化するため，どのように場が変化したかわかりやすい」

5. ユーザスタディ
4 名の大学院生に提案システムを用いて自由に流れ場をデザインしてもらい，コメントをもらった．という肯定的な声があがった一方で，「流れ場の認識に少し時間がかかる」と感じる被験者もいた．認識しづらいと感じた被験者は「パーティクルを大きくしたり，密度を上げたり，色幅を持たせたりすることで改善を期待できる」と機能面について「1 つ前の操作に戻る機能がほしい」「場いうコメントをしており，主に流線でなくパーティクルののリセットがしたい」という要望があった．特に場のリセ動きを見て流れ場の認識を試みていた．これらのことから，ットについては 4 人中 3 人から言及があったため今後実装

流れ場を認識しやすい流線やパーティクルの大きさなどのを行う．

パラメータは人によって違うと考えられる．そのため，流操作性については「人差し指と中指のトリガーのどちら線やパーティクルのパラメータをユーザ自身で流れ場を認がボタンの選択でどちらがブラシの適用なのか迷う」とい識しやすい設定に変更できるような機能が必要だと考える．

う意見があった．これについては，状況によって操作でき

その他，「発散の扱い方が難しい，動きがどうなるのか想© 2024 Information Processing Society of Japan431

情報処理学会 インタラクション 2024
IPSJ Interaction 2024

像しにくい」というコメントや「電磁場など目に見えない場の動きを理解するのに使えそう」「子どもが遊ぶためのツールとして良さそう」など応用例についてのコメントがあった．

6. まとめと今後の課題
本研究では，パーティクルの動きを決定する 3 次元の流れ場を VR 空間中でデザインするシステムを提案した．ユーザは，特異点の配置と流れブラシを併用することで，大域的な流れも細部の流れも直観的に調整できる．
パーティクルエフェクトをデザインする際には，テクスチャ，シェーダ，エミッターの形状，色や大きさなどを設定することでデザインを構築していくが，その中に動きを設定するという工程が存在する．提案システムを用いることでこの工程を従来システムよりもわかりやすく，自由度高く行うことができると期待する．
ユーザスタディの結果，場のリセット機能や流線とパーティクルのパラメータ調整機能などの追加が必要であるとわかったため，今後はそれらの実装を進めていく．

1B-57
2024/2/28[11] Bo Zhu, Michiaki Iwata, Ryo Haraguchi, Takashi Ashihara,
Nobuyuki Umetani, Takeo Igarashi, and Kazuo Nakazawa. Sketchbased Dynamic Illustration of Fluid Systems. ACM Trans. Graph.
30, 6 (December 2011),[12] Guowei Yan, Zhili Chen, Jimei Yang, and Huamin Wang.
Interactive liquid splash modeling by user sketches. ACM Trans.
Graph. 39, 6, Article 165 (December 2020),[13] Zherong Pan, Jin Huang, Yiying Tong, Changxi Zheng, and Hujun
Bao. Interactive localized liquid motion editing. ACM Trans.
Graph. 32, 6, Article 184 (November 2013).
[14]早川雄登, 藤代一成. "直接操作による 3D 流体シミュレーションの制御". 情報処理学会研究報告, Vol.2017-DCC17,No.24,1-6.
[15] Rahul Arora, Rubaiat Habib Kazi, Danny M. Kaufman, Wilmot Li,and Karan Singh. MagicalHands: Mid-Air Hand Gestures forAnimating in VR. In Proceedings of the 32nd Annual ACM
Symposium on User Interface Software and Technology (UIST '19).
[16] Xie, H., Xie, D., Miyata, K. Body2Particles: Designing Particle
Systems Using Body Gestures. In Entertainment Computing –ICEC 2020.
[17] Jakub Wejchert and David Haumann. Animation aerodynamics.
SIGGRAPH Comput. Graph. 25, 4 (July 1991), 19–22.
[18] Jun Xing, Rubaiat Habib Kazi, Tovi Grossman, Li-Yi Wei, Jos
Stam, and George Fitzmaurice. Energy-Brushes: Interactive Tools
for Illustrating Stylized Elemental Dynamics. In Proceedings of the29th Annual Symposium on User Interface Software andTechnology (UIST '16).

参考文献[1] Unity Particle System,[https://docs.unity3d.com/ja/current/Manual/classParticleSystem.html](最終閲覧日: 2023 年 12 月 21 日)[2] VectorayGen, [https://jangafx.com/software/vectoraygen/](最終閲覧日: 2023 年 12 月 21 日)[3] Rubaiat Habib Kazi, Fanny Chevalier, Tovi Grossman, Shengdong
Zhao, and George Fitzmaurice. Draco: bringing life to illustrations
with kinetic textures. In Proceedings of the SIGCHI Conference on
Human Factors in Computing Systems, 2014.
[4] Unreal Engine Niagara,[https://docs.unrealengine.com/4.27/ja/RenderingAndGraphics/Niagara/](最終閲覧日: 2023 年 12 月 21 日)[5] Adobe After Effects CC Particle Systems Ⅱ[6] Unity Particle System Force Field,[https://docs.unity3d.com/ja/2018.4/Manual/classParticleSystemForceField.html] (最終閲覧日: 2023 年 12 月 21日)
[7] Takeo Igarashi, Satoshi Matsuoka, and Hidehiko Tanaka. Teddy: asketching interface for 3D freeform design. In Proceedings of the26th annual conference on Computer graphics and interactivetechniques (SIGGRAPH '99).
[8] Hu Z, Xie H, Fukusato T, Sato T, Igarashi T. Sketch2VF: Sketchbased flow design with conditional generative adversarial network.
Comput Anim Virtual Worlds, 2019.
[9] 松原 凜太郎, 佐藤 周平, 高 尚策, 唐 政. "ペイント入力を用いた炎の流れのガイドに関する一実験". NICOGRAPH 2022
Conference track, No. S-13.
[10] 有原 啓介, 謝 浩然, 佐藤 周平, 宮田 一乘. "ラグランジア
ンコヒーレント構造によるスケッチベース煙デザイン手法の提案". コンピュータグラフィックスとビジュアル情報学,2022-CG-185(4), 2022, pp.1-11.

© 2024 Information Processing Society of Japan432