フィルタエディタを使ってオリジナルのフィルタを作ってみました。
- Contents
- はじめに
- こんなフィルタを作る
- 新規フィルタを追加
- 新規フィルタにカラーマトリクスを追加
- 新規フィルタにガウスぼかしを追加
- 新規フィルタにブレンドを追加
- 新規フィルタにオフセットを追加
- オリジナルフィルタの完成
（参考：フィルタとは何か）
（参考：主な組み込みフィルタ）
（参考：組み込みフィルタ一覧）
（参考：フィルタプリミティブ要素と光源要素）
(2023.05.14更新)
はじめに
フィルタを作る部品であるフィルタプリミティブ要素の機能を熟知していたとしても、それらを組み合わせて組み込みフィルタとは違う独自のフィルタを作ることはとても難しいと思いますので、実際にオリジナルフィルタを作る機会はあまりないとも思いますが、それがどんな手順で行われるものなのかだけでも押さえておこうと思います。
こんなフィルタを作る
ここでは試しに、オブジェクトに影を追加するという変換を施すフィルタを作ってみます。
まず、フィルタエディタを表示します。フィルタエディタを表示する操作や画面構成については「フィルタとは何か」にまとめてあります。
フィルタエディタを表示しただけなので、まだ何もフィルタが定義されておらず、フィルタ一覧にも何も表示されていません。
新規フィルタを追加
「＋」ボタンを押して、まだ中身は空っぽですが、新しいフィルタをドキュメントに追加します。デフォルトの名前（例えば「フィルター１」）で新しいフィルタ（ただしその中の定義は空っぽ）が生成されて、一覧に表示されます。
フィルタの名前のところをクリックすると名前を変更できるので、分かりやすい名前に変えておきます。
新規フィルタにカラーマトリクスを追加
次に、フィルタプリミティブ要素（フィルタエディタ上では「エフェクト」と表示されます）として、最初の１個を追加します。ここでは、フィルタ適用先のオブジェクトの色を、影っぽい色（濃いグレー）に変換して、影として表示させたいので、RGBの色を直接変換してくれるフィルタプリミティブ要素であるカラーマトリクスを追加します。
（参考：フィルタプリミティブ要素：feColorMatrix）
右のほうにあるプルダウンメニューでカラーマトリクスを選ぶと、その下のフィルタプリミティブ一覧にカラーマトリクスが追加されます。
このとき、フィルタエディタの左のほうには上のようにカラーマトリクスのパラメータ（属性）を指定する欄が表示されるので、オブジェクトの各ピクセルの値をどんな値に変換するかを指定します。
ここではカラーマトリクスのパラメータの１つである、R値G値B値A値のベクトルに掛け合わせると変換後のR値G値B値A値を求めてくれる行列を指定します。タイプのプルダウンメニューで行列を選び、値という欄に表示されている行列の要素の値を１つずつマウスでクリックして変更していきます。ここではグレーに変換してほしいので次のように行列の要素の一部を「0.30」に変更します。
このように設定することで、元の画像のピクセルのRGB値に対してこの行列を掛けて、0.3 x R + 0.3 x G + 0.3 x Bという変換を行わせれば、変換後のRGB値はグレーになるというわけです。
ここで、まだ作成途中のフィルタ（カラーマトリクス以外の必要なフィルタプリミティブ要素を全部追加していない）ですが、途中の様子を見るために一旦オブジェクトに設定してみます。緑色の星形を描いて、それを選択状態にして・・・
フィルタエディタのフィルタ一覧のところで、作ったフィルタの左側にあるチェックボックスにチェックを入れます。そうすると、選択してあるオブジェクトにこのフィルタが設定されて、さきほど追加したカラーマトリクスによる変換処理が実行されて、色がグレーに変化します。
さて、これでフィルタプリミティブ要素を追加＆設定してオブジェクトに適用する手順は確認しました。
新規フィルタにガウスぼかしを追加
次はさらにフィルタプリミティブ要素を追加して、これを影のような絵に変換していきます。
まず、影らしく、ぼかしを入れます。それにはガウスぼかしというフィルタプリミティブ要素を追加します。
ガウスぼかしは追加するだけですぐその効果が現れて、ぼかしが入ります。
ポイントは、２個目のプリミティブ要素を追加すると、画面右側のコネクションのところで、自動的に前段のカラーマトリクスの出力画像が後段のガウスぼかしの入力として接続されるところです。その結果、星形の元の緑色がまずカラーマトリクスによってグレーに変換され、それが次のガウスぼかしの処理に入力されることになるわけです。
ガウスぼかしもパラメータを変更することはできますが、デフォルトの値で十分なのでこのまま先に進みます。
新規フィルタにブレンドを追加
次に追加するのはブレンドです。これは２つの入力画像を受け付けて、それを重ねて１つの出力画像にするプリミティブ要素です。これを使ってこのぼかした星形の上に元の星形を重なて描くようにします。
ブレンドを追加した直後は、上のようにガウスぼかしの下に追加され、コネクションのところはとりあえず１つ前のガウスぼかしに両方の入力が接続された状態になります。もちろん、これでは重ねる２つの画像がどちらもガウスぼかしの出力する画像になってしまうので、重ねた結果も特に変化はありません。（実際はぼかしたものを２つ重ねているので、少しだけ濃くなります。）
そこで、ブレンドの入力のうち、上に重ねられる画像の入力（右端の小さい三角形のうち上のもの）の出力元を、ガウスぼかしから、元の星形画像に切り替えます。それには、上の小さい三角形からドラッグを開始してコネクションを伸ばしていき、画面右のほうにドラッグしていきます。
フィルタエディタの右ほうにソースグラフィックというアイテムが表示されていて、これがフィルタ適用前のオブジェクトを表示した画像を意味しているので、そこまでコネクションをドラッグします。
すると、ぼかした画像の上に元の星形画像が重なるような出力になります。
左のオブジェクトの絵が、元の星形をぼかした星形に重ねたようになっていることがわかります。
ちなみに、ブレンドのパラメータも何も変更しませんが、たまたまデフォルトのパラメータ値が単純に重ねて描くことを指定する「標準」という値だから今回のサンプルではそうしているだけで、実際はいろんなパラメータが指定可能になっていて、いろんなブレンド方法で重ねるという使い方も可能です。
（参考：ブレンドモードを設定する）
新規フィルタにオフセットを追加
最後に、この影を元の星形から少し右下にずらした位置に移動するプリミティブ要素を追加して、影っぽくしてみます。そのために追加するのがオフセットです。これはパラメータに指定した大きさで画像を平行移動するプリミティブ要素で、これを使って元の星形から少しずれた位置に影が描かれるようにします。
例によって、オフセット追加直後は一番下に追加されて、入力はブレンドの出力になってしまいます。これでは元の星形とぼかした星形が一緒に平行移動するだけになってしまうので、ぼかした星形だけ平行移動するように変更します。
そのためには、まずオフセットのアイテムをドラッグして、ガウスぼかしとブレンドの間に移動します。
そうすると、ブレンドへの入力に接続されていたコネクションが、自動的にガウスぼかしからオフセットにつなぎ直されます。
さらにオフセットのパラメータにX軸方向とY軸方向の差分（平行移動する大きさ）があるので、右下に移動するように、例えば「２．０」を指定します。（この数値の単位はSVGの仕様ではその時点での座標系上のものになるとのことですが、実際の動作は何を単位にしているのか分かりませんでした）
オリジナルフィルタの完成
最終的な変換結果は、次のようになります。
これで、一連のフィルタプリミティブ要素を組み合わせてフィルタを構成する大まかな手順を試すことができました。
作成したオリジナルフィルタは「オリジナルのフィルタをメニューに登録する」のほうで紹介する手順を実行すれば、プルダウンメニューに追加して、いつでも利用できるようになります。