Unityでテクスチャにお絵描きするための 線分描画アルゴリズムの話 2019/07 sotan (@sotanmochi)

はじめに 実装したアルゴリズムを忘れた時のための備忘録です 2 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

線分描画アルゴリズムを理解すると何ができるのか？ テクスチャにお絵描きする（線を描く）ことができる https://github.com/sotanmochi/SimpleDrawing-Unity 3 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

一般的な線分描画アルゴリズム 始点から終点に向かって順次処理してピクセルを塗りつぶしていくアルゴリズム （ブレゼンハムのアルゴリズム（Bresenham's line algorithm）など） 4 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

一般的な線分描画アルゴリズム 始点から終点に向かって順次処理してピクセルを塗りつぶしていくアルゴリズム → スクリプトで実装してCPUで順次処理 　 テクスチャ解像度が大きくなると計算負荷が増えてFPSが低下する（した） 5 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

今回実装した線分描画アルゴリズム ピクセル単位で並列に処理して塗りつぶしていくアルゴリズム → シェーダーで実装してGPUで並列処理 　 GPUで高速に処理することでピクセル数が増えてもFPSを低下させない 6 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

一般的な手法との比較 一般的な線分描画アルゴリズム 　始点から終点に向かって順次処理してピクセルを塗りつぶしていくアルゴリズム 　→ スクリプトで実装してCPUで順次処理 　　 テクスチャ解像度が大きくなると計算負荷が増えてFPSが低下する（した） 　※ 順次処理して塗りつぶしていく部分だけの負荷が高いのではなく、Texture2D.SetPixels32()や 　　 Texture2D.Apply()の処理負荷も合わせるとFPSが低下すると考えられる 今回実装した線分描画アルゴリズム 　ピクセル単位で並列に処理して塗りつぶしていくアルゴリズム 　→ シェーダーで実装してGPUで並列処理 　　 GPUで高速に処理することでピクセル数が増えてもFPSを低下させない 　※ 1ピクセルあたりの計算式は複雑になっているが、 　　 GPUで並列処理することによって全体のスループットが向上する 7 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

線分描画アルゴリズムの実装

実装の概要 大まかな流れは 1. オブジェクトに対して「線を描け」と命令する（スクリプト） 2. 色・UV座標などの値をシェーダーに渡してBlit命令を実行する（スクリプト） 3. シェーダーはUV座標などの情報から塗るべき位置を判断して色をつけていく といった感じ 9 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

実装の概要 大まかな流れは 1. オブジェクトに対して「線を描け」と命令する（スクリプト） 2. 色・UV座標などの値をシェーダーに渡してBlit命令を実行する（スクリプト） 3. シェーダーはUV座標などの情報から塗るべき位置を判断して色をつけていく といった感じ 10 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

線分描画アルゴリズム 以下の2つの条件を満たす点P（ピクセル）を塗りつぶす 条件1：点Pを直線ABに射影した点Qが線分ABに含まれる 条件2：点Pと直線ABの距離dが一定の値より小さい 　　　（描画する線の太さを表す値よりも距離dの方が小さい） 11 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

条件1の判定方法（導出はAppendixを参照） 点Pを直線ABに射影した点Qが線分ABに含まれるかどうかを判定するためには、 以下の式(3)(4)(5)を用いてsとtの値を求めて、 次の条件 を満たすかどうかを判定すれば良い。 12 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

条件1の実装例 13 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

浮動小数点数（float）の比較 上記の条件を満たしているかを判定する時に、 Mathf.Approximatelyと同様の処理をシェーダーで実装する必要がある （2つの浮動小数点数の差が許容範囲内であれば同値とみなす処理） ※ 許容範囲の値を 1.0×10^-6 程度まで小さくして精度を高くすると、 　 塗りつぶせないピクセルが多くなってしまい上手く描画できなかった。 14 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

条件2の判定方法（導出はAppendixを参照） 点Pと直線ABの距離dが一定の値より小さいことを判定するためには、 以下の式(9)を用いて距離dを求めればよい。 15 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

条件2の実装例 16 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

線分描画アルゴリズム 以下の2つの条件を満たす点P（ピクセル）を塗りつぶす 条件1：点Pを直線ABに射影した点Qが線分ABに含まれる 条件2：点Pと直線ABの距離dが一定の値より小さい 　　　（描画する線の太さを表す値よりも距離dの方が小さい） 17 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

線分描画アルゴリズムの実装例 テクスチャにお絵描きする（線を描く）ことができる https://github.com/sotanmochi/SimpleDrawing-Unity 18 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

まとめ

今回実装した線分描画アルゴリズム 以下の2つの条件を満たす点P（ピクセル）を塗りつぶす 条件1：点Pを直線ABに射影した点Qが線分ABに含まれる 条件2：点Pと直線ABの距離dが一定の値より小さい 　　　（描画する線の太さを表す値よりも距離dの方が小さい） 20 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

一般的な手法との比較 一般的な線分描画アルゴリズム 　始点から終点に向かって順次処理してピクセルを塗りつぶしていくアルゴリズム 　→ スクリプトで実装してCPUで順次処理 　　 テクスチャ解像度が大きくなると計算負荷が増えてFPSが低下する（した） 　※ 順次処理して塗りつぶしていく部分だけの負荷が高いのではなく、Texture2D.SetPixels32()や 　　 Texture2D.Apply()の処理負荷も合わせるとFPSが低下すると考えられる 今回実装した線分描画アルゴリズム 　ピクセル単位で並列に処理して塗りつぶしていくアルゴリズム 　→ シェーダーで実装してGPUで並列処理 　　 GPUで高速に処理することでピクセル数が増えてもFPSを低下させない 　※ 1ピクセルあたりの計算式は複雑になっているが、 　　 GPUで並列処理することによって全体のスループットが向上する 21 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

おわりに データ並列で処理できるアルゴリズムに置き換えてシェーダーで実装することでパ フォーマンスを改善できた 今回はフラグメントシェーダー（ピクセルシェーダー）で実装するタイプの処理だったが、 描画系ではない（レンダリングパイプラインから切り離せる）処理を並列化する場合はコ ンピュートシェーダーを使うのがオススメ 22 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

Appendix

Appendixについて 線分描画アルゴリズムの条件判定に使っている計算式を導出します 必要に応じて線形代数や高校数学の教科書を見てください ・ベクトル ・ベクトルと図形 ・行列式 ・連立1次方程式 　など 24 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

線分描画アルゴリズム 以下の2つの条件を満たす点P（ピクセル）を塗りつぶす 条件1：点Pを直線ABに射影した点Qが線分ABに含まれる 条件2：点Pと直線ABの距離dが一定の値より小さい 　　　（描画する線の太さを表す値よりも距離dの方が小さい） 25 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

線分描画アルゴリズム 以下の2つの条件を満たす点P（ピクセル）を塗りつぶす 条件1：点Pを直線ABに射影した点Qが線分ABに含まれる 条件2：点Pと直線ABの距離dが一定の値より小さい 　　　（描画する線の太さを表す値よりも距離dの方が小さい） 26 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

条件1の判定方法の導出 直線のベクトル方程式より直線AB上の任意の点xは と表される。 xが線分ABに含まれる場合は が成り立つ。 したがって、点Qが線分ABに含まれているか判定するためには、 を解いてsとtの値を求めて、(1)を満たすかどうかを判定すれば良い。 27 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

条件1の判定方法の導出 2次元空間上の直線を考えるため、ベクトル方程式 に含まれる各ベクトルを とする。 　　　　　　　　 はsとtを未知数とする連立方程式になっているため、 と表せる。 28 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

条件1の判定方法の導出 連立方程式(2)の解は、クラメルの公式より次のように与えられる。 29 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

条件1の判定方法の導出 点Pを直線ABに射影した点Qの位置ベクトルqは、 と表せる。 p’ は p - a を直線ABに正射影したベクトルなので、 正射影の公式より したがって、 30 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

条件1の判定方法 点Pを直線ABに射影した点Qが線分ABに含まれるかどうかを判定するためには、 以下の式(3)(4)(5)を用いてsとtの値を求めて、 次の条件 を満たすかどうかを判定すれば良い。 31 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

線分描画アルゴリズム 以下の2つの条件を満たす点P（ピクセル）を塗りつぶす 条件1：点Pを直線ABに射影した点Qが線分ABに含まれる 条件2：点Pと直線ABの距離dが一定の値より小さい 　　　（描画する線の太さを表す値よりも距離dの方が小さい） 32 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

線分描画アルゴリズム 以下の2つの条件を満たす点P（ピクセル）を塗りつぶす 条件1：点Pを直線ABに射影した点Qが線分ABに含まれる 条件2：点Pと直線ABの距離dが一定の値より小さい 　　　（描画する線の太さを表す値よりも距離dの方が小さい） 33 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

条件2の判定方法の導出 点Pと直線ABの距離dの2乗は、ピタゴラスの定理より と表せる。 34 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

条件2の判定方法の導出 p’ は p - a を直線ABに正射影したベクトルなので、 正射影の公式より よって、 35 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

条件2の判定方法の導出 式(6)に式(7)を代入すると 36 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

条件2の判定方法の導出 式(8)について とすると、 37 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

条件2の判定方法の導出 ここで とすると なので、 上記の式を(8)に代入すると、 38 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

条件2の判定方法 点Pと直線ABの距離dが一定の値より小さいことを判定するためには、 以下の式(9)を用いて距離dを求めればよい。 39 2019/07 Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話

END