LoginSignup
0
0

More than 1 year has passed since last update.

僕が考えた縁取りアルゴリズム

Last updated at Posted at 2022-09-04

普段僕はAfterEffectsという編集ソフトを使って映像制作をしているのだが、なんとこのソフト自由に縁取りを付ける機能が存在しない。
レイヤースタイルの境界線は1つしか付けれず、重ねるためにはプリコンポーズが必要になる。意味がわからない。

じゃあ縁取りエフェクトプラグインを自分で開発してしまえばいいのではないか。
プラグイン開発も画像処理も一切わからないけどとりあえずやってみよう。

結論から言うと結局別の方が理想の機能のものを開発してくださったので、僕は完成まで持っていくことは無かったのだが、備忘録として残しておくことにする。
気になる方はこのサーバー探せばあるのでどうぞ
https://discord.gg/d29fRFJX4b

縁取りアルゴリズム

まずはアルゴリズムを調べよう。

僕の理想とする縁取りは、輪郭から等距離の縁取りである。
image.png
このように縁が綺麗に丸くなる美しい縁取り。

しかし、いくら調べてもこの縁取りアルゴリズムが見つからない。
海外の記事をいくつも漁ったりしたがそもそも縁取り処理というものがなかなか見つからない。
膨張処理(Dilation)が近いかと思ったが、試してみたところ綺麗な縁取りにはならなかった。

そんなわけで自分で考えてみることにした。

要は輪郭から指定距離の場所まで描画すればいいわけだから、注目画素のアルファ値が0でない時そこから指定半径の円を描画する処理を書けばいいのでは。
image.png
こういう感じ
よしとりあえず適当にやってみよう。

できた。
しかし、処理が重すぎる。もうちょっと工夫しなければ。

まずは円の描画処理から見直す。
sin、cosとか平方根とかそこら辺の計算処理をひたすら繰り返すのは良くない。

そんなわけで調べたら良い感じのアルゴリズムを見つけた。
https://iq.opengenus.org/bresenhams-circle-drawing-algorithm/#:~:text=Bresenham's%20Circle%20Drawing%20Algorithm%20is,point%20arithmetic%20in%20classical%20processors.

この方法なら浮動小数点数を使わず整数のみの演算で描画できる。

あとはいちいち円を描画する必要も無い。
image.png
こんな感じで注目画素の周囲を見つつ、それに応じた部分の弧を描画するようにしたら無駄な計算処理を抑えることができる。
これでどうなる。

良い感じになった!!(キャッシュが残って途中変な描画になっている)

しかし、縁取りを太くすると処理が少し重くなってしまう。
許容範囲ではある気がするが、多用することを考えると少し惜しい。

そんなわけでこれが現時点での限界でした。
もっと軽く作っている方はどんな方法を使っているのだろう。

当たり前のようにプラグイン作ってますがマジで何もわからず既存のコード適当にいじってるだけなので、実用化レベルまではもちろん持っていけていないです。
僕はまた基礎から学び直してきます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0