Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話 / Line drawin...
Search
sotanmochi
July 11, 2019
Programming
2
3.8k
Unityでテクスチャにお絵描きするための線分描画アルゴリズムの話 / Line drawing algorithm using fragment shader
sotanmochi
July 11, 2019
Tweet
Share
More Decks by sotanmochi
See All by sotanmochi
URP/HDRPを使ったVRM対応アプリの開発方法 / VRM Importer Extension
sotanmochi
0
1.7k
画像処理から始めるコンピュートシェーダ / Introduction to Image Processing using Compute Shader
sotanmochi
2
2.5k
Diminished Reality 入門 / Introduction to Diminished Reality
sotanmochi
2
9k
MagicOnionでマルチプレイゲームを作ってみる / Introduction to developing multiplayer games using MagicOnion
sotanmochi
1
2.3k
SmartRig Bipedを使ってみよう / Introduction to SmartRig Biped
sotanmochi
0
3.2k
VRMを使ったAR/MR撮影ツールを試作開発してみた話 / Prototype of Mobile Mixed Capture
sotanmochi
0
1.7k
リアルとバーチャルの融合によって越えられない壁を壊す / TechCafe vol.8 LT
sotanmochi
0
270
ユニティちゃんと鬼ごっこができるMRゲームと戦術位置解析システム / Mixed reality game and tactical position analysis
sotanmochi
0
660
Research modeで取得した深度(Depth)データを可視化する / Depth data visualization for Hololens RS4 Research mode
sotanmochi
0
180
Other Decks in Programming
See All in Programming
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
320
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
380
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
370
私はどうやって技術力を上げたのか
yusukebe
43
17k
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
520
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
680
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
yutailang0119
0
220
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
260
CSC305 Lecture 03
javiergs
PRO
0
230
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
390
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.4k
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
490
Featured
See All Featured
Fireside Chat
paigeccino
40
3.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Building Applications with DynamoDB
mza
96
6.6k
Code Reviewing Like a Champion
maltzj
525
40k
Designing for humans not robots
tammielis
254
25k
Unsuck your backbone
ammeep
671
58k
Facilitating Awesome Meetings
lara
56
6.6k
RailsConf 2023
tenderlove
30
1.2k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Transcript
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