― 41 ―煙のアニメーションにおける輪郭線の描画を目的とした曲線生成手法の検討

煙のアニメーションにおける輪郭線の描画を目的とした曲線生成手法の検討
坂本卓也 *・竹下大樹

Study on Curve Generation for Drawing Contour Lines in Animation of Smoke
Takuya SAKAMOTO* and Daiki TAKESHITA（平成25年11月25日受理）
Recently, ﬂuid and the other physical simulations have been used for not only industry but also CG forentertainment. They are often used to produce an image representing real shape and movement. On theother hand, they are becoming used to produce simplified or symbolized representation like a cartoon.
Toon rendering is a technique of drawing 3DCG that brings cartoon like representation. In this technique,
it is included a drawing contour lines. However, it is diﬃcult to draw a ﬂuid, such as smoke does not have awell-deﬁned contour. In this study, for toon rendering, I deﬁne contour lines of smoke by using an isoline.
In addition, I intend to add a unique eﬀect to isoline. Finally, I have succeeded in make drawing a smoke'scontour lines from output of 2D ﬂuid simulation and add an eﬀect of advection to contour lines by Hermit
CurveKeywords: CG, smoke, animation, toon rendering, curve generation

1.

序論に，はっきりとした輪郭線をもちながら特徴的な挙動を示すように輪郭線を変形させる手法についても検討

流体シミュレーションをはじめとする物理シミュを行った．

レーションは主に写実的で現実の事象に則した造形や挙動を生み出すために研究されている．一方でそ2． 煙の輪郭線の描画

ういったフォトリアルなコンテンツばかりではなく単純化・記号化されたトゥーンレンダリングもよく本研究では，流体のシミュレーションによって得ら利用されるようになってきた．本研究では煙のトゥーれた計算結果を元に，その煙密度のデータを主に利用

ンレンダリングにおける輪郭線の生成に関する検討することで対象の輪郭線を描画する手法の検討を行っを行った．

た．

トゥーンレンダリングにおけるオブジェクトは輪郭

輪郭線描画までの流れは大まかに分けて 3 ステップ

線によって強調されているので，煙のようなもともとで構成されており，以下の手順で行う．

輪郭のないものとの相性は悪く，描画は難しい．そこ①流体シミュレーションにより煙密度等を導出する．

で，煙に対して境界を持たせることでトゥーンレンダ②煙密度データを用いて等値線の元となる座標を導出リングできるようにする必要がある．
3 次元においては等値面を用いることで明確な面としての境界を与えることができる．本研究ではその基する．
③等値線のデータを輪郭線のパスデータに変換し，補間関数によって平滑化する．

礎として 2 次元の煙に対して等値線を用いることで，上記のうち，①におけるシミュレーション法につい2次元における境界線である輪郭線の描画を検討した．ては本研究報告の対象外であり，その計算手法やアルまた，煙としての輪郭線の特徴を際立たせるためゴリズムについては触れず，計算結果として得られた* 秋田高専専攻科学生
秋田高専研究紀要第 49 号

データの形式についてのみ記述する．

― 42 ―
坂本卓也・竹下大樹

2.1. 流体のシミュレーションデータ
流体シミュレーションによって得られるデータは，2 次元の格子点上に配置される煙密度，圧力，温度，回転のスカラー場と速度のベクトル場である．
このうち，煙密度は煙の見た目をつかさどっているので，煙の輪郭線の描画には主にこのデータを使用する．
本研究ではシミュレーション用の格子の数は基本的に縦 100 ×横 100 として行った．
2.2. 等値線の導出
等値線とは同じ値を持つ点同士を結ぶことで得られる線であり，気象図における気圧の分布を視覚化した等圧線や，地図における高さを表現した等高線などがその一例である．
シミュレーションによって得られた煙密度場を輝度データに変換して利用し，等値線を導出することで通常は境界線がはっきりしない煙などに輪郭を持たせることができる．
2.2.1 等値線について全体の等値線を導出するにはまず領域を三角形のメッシュに分割し，各三角形メッシュに対して線分を求める．メッシュ 1 つに対する線分は次のように求められる．
三角形メッシュは各頂点に値を持っており，本研究においては煙密度の値に相当する．
図 2.1 に 3 つの頂点があり各点に値を持つ三角形⊿ P1P2P3 を示す．

q -q
P12 = qc-q2 (P1-P2)+P212(2.1)となる．
これをほかの 2 辺に対しても同様に行うと，点が 0〜 3 個出てくる．線分を構成するのは点が 2 個の場合のみなので，そのほかの場合は線分が存在しない．

2.2.2 シミュレーション結果への等値線の適用
シミュレーション結果は 2.1 節の流体のシミュレー
ションによって得られるデータの概要で述べたように
図 2.2(a) のような形で与えられる．これを等値線の描画のための三角形メッシュデータに変換するには以下の手順を用いた．
1） シミュレーションによって求まった煙密度のデータは図 2.2(a) のように格子状になっている．
外周のデータは境界値である．
2） 描画領域に合わせたディスプレイ表示用格子のデータは，図 2.2(b) のようにその周囲 4 点のシミュレーションデータの平均より求める．格子点の煙密度を用いて，輝度値に変換する．輝度値の範囲は 0.0 〜 1.0 である．
3） 四角形の格子を三角形のメッシュに分割するために，図 2.2(c) のように格子の頂点となる格子点の 4 つの値の平均より格子中心の値を求める．
4） 図 4.1(d) のように一つの格子に対して 4 つの二等辺三角形のメッシュに分割する．

点 P1,P2,P3：頂点座標 (x,y)
q1,q2,q3：頂点の持つ値
qc：等値線レベル

図 2.1(a) シミュレーションデータ

(b) 格子点データ

等値線を構成する線分

この三角形一つに対して 1 本の線分が得られる場
合，どこか 2 辺に端点が存在することになる．
まず，辺 P1P2 について考える．辺 P1P2 上に端点が存在するには，q1 ＜ qc ＜ q2 またはq2 ＜ qc ≦ q1が成り立つ必要があり，存在する場合にその点の座標を点 P12 とすると

図 2.2(c) 格子中心データ(d) メッシュ
三角形メッシュの作成（○ : 煙密度 , ● : 輝度）

あとは等値線レベルを設定し，このメッシュ一つ一つに等値線を導出することで全体の等値線が得られる．
平成 26 年２月

― 43 ―
煙のアニメーションにおける輪郭線の描画を目的とした曲線生成手法の検討

2.3. 等値線の平滑化
等値線をそのまま描画すると画面に対する格子の大きさによっては滑らかでない角張った線になって見える可能性がある．そのため等値線を平滑化する必要がある．
等値線の平滑化には 3 次の B スプライン曲線を用いた．

1)

線分が存在するメッシュを探し出す．

2)

線分の端点の一方の座標をパスデータ配列に格納し，もう一方の端点が存在する辺をもとに，その辺を共有するメッシュを次の探索メッシュとする．

3)

１つ前の探索メッシュと共有している辺上に存在する端点の座標をパスデータ配列に格納し，もう一方の端点が存在する辺をもとに，その辺2.3.1 B スプライン曲線について
B スプライン曲線は重み付け関数と制御点の座標を用いて曲線を描画する方法である．
3 次の B スプライン曲線は 4 つの重み付け関数と4 つの制御点座標によって構成され，重み付け関数
N1~N4，制御点の座標 P1~P4 とすると，曲線の関数
C は媒介変数 t(0 ≦ t ≦ 1) を用いて次のように表される．
C(t)=N1 (t)P1+N2 (t)P2 +N3 (t)P3 +N4 (t)P4 (2.2)

を共有するメッシュを次の探索メッシュとする．
4)3) を繰り返し，次の探索メッシュの候補が無くなるまたは探索始点のメッシュに戻ってきたら探索を終了する．

5)

パスデータ配列をもとに B スプライン曲線を用いて輪郭線を描画する．

6)1) に戻り，すべてのメッシュが探索済みになるまで繰り返す．
ここで注意しなければならない点は，輪郭線は閉

N1= 1 (-t3+3t2- 3t+1)
6

じたもの（輪になっているもの）と開いたものの 2

N2= 1 (3t3- 6t2+4)6

描画は閉じた曲線，開いた曲線の両方に対応していN3= 1 (-3t3+3t2+3t+1)
6つが存在することである．B スプラインによる曲線の(2.3)

が輪郭線の途中になってしまうことによりパスデータが途切れてしまう場合がある．この問題に関しては，領域の境界の辺に線分の端点を持つメッシュをN4= 1 (t3)
6先に全て探索してしまうことで解決できる．

媒介変数 t を 0 から 1 まで一定間隔で変化させることで図 2.3 のような曲線が描かれる。

図 2.3るが，線分の探索の際に開いた輪郭線の場合は始点2.4. 輪郭線描画の結果輪郭線を描画した結果が図 2.4(a) である．また，
図 2.4(b) が比較用に各メッシュに対してメッシュ頂点の輝度のデータを利用し，OpenGL 標準の三角形描画によってグラデーションのかかった三角形を描画することで煙の表現したものである．
図 2.4(a) における輪郭線は，(b) において輝度値が0.4 を示す部分，つまり輝度値が等値線レベルと同じ値を示す点同士を結んだ線となっている．

B スプライン曲線（P1˜P4：制御点）

2.3.2 B スプライン曲線による等値線の平滑化導出された等値線のデータは，各メッシュに独立した線分のデータとして保存されるので，線分の探索および結合を行い，連続した座標データとしてのパスデータの 1 次元配列に変換しなければならない．
線分をパスデータに変換し，輪郭線を描画する手順は以下のようになる．
秋田高専研究紀要第 49 号(a) 煙の輪郭線の描画(b) 煙の描画

図 2.4 輪郭線の描画結果( 等値線レベル 0.4，400 ステップ目 )― 44 ―
坂本卓也・竹下大樹

3.

輪郭線の加工図 2.5 からわかるように，ベクトル R1 および R2は曲線の制御点における接線方向に伸びていることが2 章では輪郭線を見た目に忠実に描画することを目わかる．また，ベクトルの大きさは曲線の曲がり具合的としてきたが，ここでは煙の輪郭線に特殊な効果に影響を与え，ベクトルが大きいほどその方向に向を加えることで煙の特徴を際立たせる手法を検討しかって大きく引っ張られるように湾曲する．

た．
具体的には，等値線の平滑化に用いる B スプライン曲線の代わりに，パスデータ化された等値線に対して速度場ベクトルを用いたエルミート曲線によって輪郭線を波打たせるように描画することで，煙の輪郭線と移動速度・方向の両方を同時に視覚化することを試みた．

3.1. エルミート曲線
エルミート曲線は重み付け関数と制御点の座標，そして制御点におけるベクトルを利用して曲線を描画する方法である．
3 次エルミート曲線においては 1 区画の曲線の描画に対して制御点 2 つ，それに付随するベクトル 2 つ，そして重み付け関数 4 つで構成される．制御点に対する重み付け関数 N1~N2，ベクトルに対する重み付け関数 M1~M2，制御点の座標 P1~P2，制御点におけるベクトル R1~R2 すると，曲線の関数 C は媒介変数 t(0≦ t ≦ 1) を用いて次のように表される．
C(t)=N1(t)P1+N2(t)P2+M1(t)R1+M2(t)R2 (3.1)

3.2. エルミート曲線の応用
本研究ではこのエルミート曲線を利用して煙の輪郭線に特徴づけを行う手法として以下のような検討を行った．
例えば，図 3.2 のような B スプラインによる平滑化が行われた輪郭線が得られたとする．

図 3.2

B スプラインによる輪郭線の例

この状態では確かに平滑化が行われているためきれいな曲線が描画できているが，静止画の状態ではこれが時間変化していくとどのような形状に変化をしていくのかは読み取ることが出来ない．そこで，エルミー

N 1=2t 3- 3t 2+ 1
N 2= - 2t 3+ 3t 2

ト曲線を用いると，制御点におけるベクトルによって(3.2)

M 1= t 3- 2t 2 +tM 2= t 3- t 2

図 3.3 のような違いが現れてくる．

一見 B スプラインと比較して重み付け関数が異なっているだけに見えるが，R1 および R2 がベクトルである点が大きく異なる．以上の式を用いてエルミート曲線を描画すると図 3.1 のようになる．
(a) 外側に向いている場合(b) 回転するように向いている場合(c) ベクトルが小さい場合

図 3.1

エルミート曲線

図 3.3

エルミート曲線におけるベクトルの違いによる輪郭線の変化の例
平成 26 年２月

― 45 ―
煙のアニメーションにおける輪郭線の描画を目的とした曲線生成手法の検討

v13= (Pcy -P1y)・(v3-v1)+v1(P3y-P1y)

図 3.3 はいずれも制御点の位置は同じでベクトルの向きおよび大きさのみを変えたものである．図 3.3(a)v24= (Pcy -P2y)・(v4-v2)+v2

は (b)(c) と比べて輪郭線が大きく波打っていることが(3.3)(P4y-P2y)

分かる．このことを煙のシミュレーションに当てはめると，煙が勢い良く拡散または収束していく場合

次 に x 方 向 の 補 間 を 行 っ て vc を 導 出 す る． こにその輪郭が大きく波打つ効果が表れるということ

こ で x 方 向 の 座 標 に 関 し て P13x=P1x=P3x お よ びになる．このことより，煙の輪郭線の静止画においP24x=P2x=P4x であるので，てはその変化が予想できるようになり，動画においvc = (Pcx -P1x)・(v24-v13)+v13てはより特徴的な挙動が期待できる．

(P2x-P1x)(3.4)

3.3. 煙の輪郭線への適用
輪郭線のパスデータは B スプラインによる平滑化のときのものがそのまま使えるが，それに加えて制御点におけるベクトルのデータを用意する必要がある．
ベクトルはパスデータおよび速度場データを利用して導出する．以下はその手順である．とすることで制御点における速度ベクトルが求まる．

1)

図 2.2(a) から (b) への変換と同様，シミュレーショ

たが，速度ベクトルのスケールが小さい場合効果が分

ンデータ 4 点の平均より速度ベクトル場の格子かりづらく，またスケールが大きすぎる場合表示が乱これをすべてのパスデータの座標に対して行い，パスデータの座標数と同数の速度ベクトルデータを計算する．
4)

求まった速度ベクトルデータとパスデータを用いてエルミート補間を行う．
これでエルミート補間による曲線描画は可能になっ2)
3)

点データを作成する．

れてしまう．そこで，式 3.1 の速度ベクトルを含む項パスデータの座標を一つ読み出し，どこの格子のに係数を新たに追加してそのスケールを調整できるよ

内側に属するかを探索する．

うにする必要がある．それを踏まえて式 3.1 を書き換

図 3.4 のように格子の 4 点の座標 P1~P4 とそのえると次のような式になる．

速度ベクトル v1~v4 および制御点座標 Pc を用いて制御点座標での速度ベクトル vc を導出する．

㼥㻼㻟v㻟

㻼㻠

C(t)=N 1(t)P 1+N 2(t)P 2+(M 1(t)R 1+M 2(t)P 2)・C (3.5)
上式における C がスケール調整用の係数である．Cv㻠

を大きくするとベクトルのスケールが大きくなり，曲線の波打ちが大きくなる．

㻼㻝㻟 v㻝㻟 㻼㼏v㼏

また，波打ちの間隔（山の数）自体を調整するには，

㻼㻞㻠 v㻞㻠

パスデータを n 個おきに読み込んで制御点の数自体を減らすことで実現できる．ただしデータを読み捨てているということなので元の形状からは遠ざかってしまうという欠点がある．

㻼㻝v1

㻼㻞v㻞
㼤

図 3.4

速度ベクトルの補間vc を直接求めるのは困難なので，まず y 方向の補間を行って v13 と v24 を導出する．それらはそれぞれ以下の式で求められる．
秋田高専研究紀要第 49 号

3.4. エルミート曲線による描画の結果
エルミート補間による結果を描画したものが図 3.5である．図 3.5 はそれぞれ速度ベクトルのスケール係
数 C とパスデータのステップ幅 n（n 個ごとにデータを読み込み，それ以外は破棄）を変えて 3 パターン描画したものである．
図 3.5 のうち (a) はスケールが小さすぎるため，輪郭線の波打ちが全く表れていない．(b) はスケールを大きくしたため波打ちの効果は表れているが，波の間― 46 ―
坂本卓也・竹下大樹

隔が狭過ぎて潰れて見える．(c) では波の間隔を調整

これらのことより，何か輪郭線に特徴を持たせるのし，ちょうど良い効果が得られた．このように，よは最終的な曲線描画の段階で行えることが分かった．

り良い効果を得るにはベクトルスケールの調整と波また，エルミート曲線による輪郭線の描画に関して次の間隔の調整が重要である．のような課題が見つかった．
⑴

波の間隔を調整する手段を本研究のようなデータの読み飛ばしで行うと，段階的な調整しかできな
い．パスデータを再構成することで任意の間隔に調整するような手法を検討する必要がある．

⑵

エルミート曲線は対称ではなく，例えば図 3.3(a)は制御点・ベクトルのどちらもほぼ線対称かつ点対称な図形であるにも関わらず，それを使用して描かれる曲線は線対称ではない．そのため，対称(a) スケール C=1
ステップ幅 n=1

化する場合には補間曲線の改良が必要である．

(c) スケール C=50
ステップ幅 n=1

輝度値の範囲：0.0 〜 1.0
等値線レベル：0.4
シミュレーション：400 ステップ目

参考文献
[1]

白山晋，「計算力学レクチャーシリーズ 8

知的可視化」，丸善株式会社，2006.5．pp.47-55．
[2] James D. Foley, Andries van Dam, Steven K.
Feiner, John F. Hughes，「コンピュータグラフィックス

理論と実践」，オーム社，2001.3，pp.471-495．

(b) スケール C=50
ステップ幅 n=5
図 3.54

エルミート曲線による輪郭線の描画

結論本研究においては B スプライン曲線を用いて輪郭線をきれいに描画する手法と，エルミート曲線を用いて輪郭線を特徴的に描画する手法という 2 つの手法について検討した． その結果以下のことが分かった．
⑴

煙の輪郭線の描画は「流体シミュレーション」「等値線の導出」「等値線の平滑化および変形」の 3つのステップに分けることができる．

⑵

上記の 3 ステップのうち「等値線の平滑化および変形」で輪郭線の形状に与える影響を決定することができる．

⑶

エルミート曲線を用いることで煙の輪郭線と煙の輪郭線の変化を同時に視覚化することができる．

平成 26 年２月