SaaSとかのクラウドコンピューティングじゃない、Misty Sky のほうの雲のお話し。

  • SVGには高機能なフィルタがついているので、写実的な絵も描ける
  • inkscapeのフィルタ編集機能をつかって雲を描く方法を紹介する
  • Firefox でもこのフィルタ機能を使うことができる

SVGにはベクトル画像を編集するためのツールである。ラスタ画像と違って線や面を組み合わせて描くので輪郭が曖昧なモノを描くのは困難なように思える。しかし、SVG編集ソフトのinkscapeにはフィルタ機能があって、簡単にラスタ画像的なフィルタ効果を得ることができる。

このフィルタは実はSVGの規格の標準のものである。SVGのフィルタは、画像編集ソフトのフィルタ処理手順を書き下したような形になっていて、レンダリングの際に処理が実行される。ぼかしはフィルタの一種類であり、他にもフィルタの種類がある。それらを組み合わせることで様々な絵を描ける。

ここに示した絵はその機能を使った雲である。本節ではこの雲の描き方を説明する。

雲の描画方法

CGの世界で、雲はPerlinの乱流関数（Perlin turbulence）を使って、いい感じに表現できることが知られている。この乱流関数の出力を透明度（アルファ値）に、色を白とすればよい。これをまとめると以下のように描画すればよいことになる。

  1. Perlin turbulenceの出力を得る。パラメタは好みのものを選ぶ。
  2. 色を白として、turbulenceの値を透明度に対応付ける。
  3. 雲を付けたい図形にオーバーレイさせる。

inkscapeでの雲の描画の実際

とはいえ、SVGのコードを描くのは骨の折れる作業のため、inkscapeを用いて作成する。もちろんテキストエディタでSVGのコードを書いても等しい結果を得られる。

フィルタエディタはメニューのフィルタ→フィルタエディタから開く。適当な図形を作ってそれをあらかじめ選択しておくとよい。新規ボタンでフィルタを作成し、その中にまず乱流（Turbulence）とカラーマトリクス（ColorMatrix）のエフェクトを追加する。

これらのエフェクトについて下記のように設定する。

  • 乱流：各設定値はお好みで。
  • カラーマトリクス
    • タイプ：行列
    • 値： 
      0 0 0 0  1
0 0 0 0  1
0 0 0 0  1
0 0 0 4 -2

ColorMatrixのValue(s)はSVGの仕様のそれと対応している。参考までに以下に引用する。これからわかるように、この値ではTurbulenceの出力を透明度(A')についてRGBA成分を加算したものにし、それ以外のRGB成分に1を入れることで白色としている。 

| R' |     | a00 a01 a02 a03 a04 |   | R |
| G' |     | a10 a11 a12 a13 a14 |   | G |
| B' |  =  | a20 a21 a22 a23 a24 | * | B |
| A' |     | a30 a31 a32 a33 a34 |   | A |
| 1  |     |  0   0   0   0   1  |   | 1 |

この時点で雲は描けているが、対象図形にオーバーレイするのが残っている。これは合成（Composite）をエフェクトに追加し、その入力ソースをカラーマトリクスとソースグラフィックに接続することで実現できる。

こうして作成したフィルタを青い四角形に反映させたのが冒頭の雲の絵である。

Firefox での利用

一度フィルタを作ってしまえばあとはSVGはXMLという所詮テキストに過ぎないのだから該当部分をコピペして利用したりできる。だが、もっとも斬新な利用法はFirefoxだとそのままブチ込めることであろう。

例として、動的にSVGのDOMツリーを生成することによって雲をかぶせる画像ジェネレータを以下に示す。

ここに表示されます

参考文献