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
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
640
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
170
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
3.3k
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
750
Laravel Boost 超入門
fire_arlo
3
220
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.9k
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Designing for humans not robots
tammielis
253
25k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Why Our Code Smells
bkeepers
PRO
339
57k
KATA
mclloyd
32
14k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Context Engineering - Making Every Token Count
addyosmani
3
58
Into the Great Unknown - MozCon
thekraken
40
2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Visualization
eitanlees
148
16k
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