【豆知識】多分あんまり伝わらないぼかしの仕組み

お茶麦
·
公開:2024/5/22

 デジタルでイラストを描くとき。結構仕上げあたりでぼかしを使いがちな気がしますが、画像処理についてじわじわ勉強した結果、やっとこさこの仕組みに気がついたので、忘れないうちにしずインにあげておこう、という気持ちで書いています。

 間違えている気もするので、話半分に聞いておいてください。説明が下手なのでフィーリングで感じ取るのが良いかと思われます。

普通のぼかしの仕組み

 とりあえず、ペイントソフトでやってみたものがこんな感じ。

 なんか平滑化ってやつらしいですね。

 とりあえず、こういう感じの5×5ピクセルの画像があるとします(数字は明度だと思ってください)。

 

 ぼかす範囲を決めます。とりあえず3×3ピクセルとします。

 元となる画像から9ピクセル取ります。そして変換後の画像の1ピクセルに平均値を入れます。するとこうなります。端っこは9ピクセル取れないので、強制的に0になっています。0にしない場合もありますが、面倒なので0ということにします。多分、大抵のペイントソフトでは0ではない方じゃないでしょうか……。

 縁が付いた以外何も変わってないじゃん、と思われたそこのあなた。普通に元になる画像の選定を間違えただけなので気にしないでください。というか、グラデーションをぼかしても別に変わらないということなんでしょう……。

 とりあえず、なんで変換後左上の24が24になるのか、というと

(0+4+8+20+24+28+40+44+48) / 9 = 24

という感じなわけです。

 わかりやすいように別の画像を例にすると、

 なんかこんな感じです。この17に関しては、

(0+0+0+0+0+0+50+50+50) / 9 = 約17

 とかそんな感じです。説明が下手なのでわかりづらいですが、とりあえず、近くのピクセルの値の合計をぼかすサイズの二乗で割った、という感じだと思っておいてください。

ガウスぼかし

 とりあえず、ペイントソフトでやってみたものがこんな感じ。範囲は6で設定しています。

 多分このガウスという部分はガウス分布から来ていると思います。

 なんか普通のぼかしよりも心なしかクッキリしているやつです。

 いやなんかこう、計算が面倒くさいので略しますが、とりあえず3×3の場合は大体こういう感じのやつを平均の代わりに一個一個の数値に掛けて足します。

 なぜこうなるのかと言われると、標準偏差とかガウス分布関数とかいうものを使っているらしいです。数学は苦手なのでよくわかっていません。

 これをぼかしの説明で使った図にかけてやると、こうなります。

 変わりませんでした。おかしいな……。いやでも、グラデーションにぼかしかけても何も変わりませんし、おかしくないのかも……。

一応ちゃんとできたもう一つの図がこちら。

 普通のぼかしよりも、ガウスぼかしは元々の色が残りやすいので、気持ちクッキリした感じにできるわけですね。

まとめ?

 とりあえず、デジタルでイラストを描いて8年弱、ようやくぼかしの仕組みに気がついたのでまとめてみたわけですが、他のぼかしについてはよくわかりません。多分1/16とかやっていた表の数値や範囲をいい感じにいじっているのだと思います。

 なんにせよ、こういう面倒くさい計算をボタンポチー、でやってくれるソフトに感謝して絵を描いていきたいですね。範囲多すぎると重くなりますけど。

 完。

 これは右側がガウスぼかしなものの、範囲を大きくしすぎたせいでよくわからなくなったもの。

@ochamugi
豆知識? とためにならない知識と文章を置きそうな予感がしています。 ミスキスト。