こんにちは。システム本部プラットフォーム部の坊野です。今回は前回のサンプルプログラムで用いられている画像処理について説明しようと思います。

ゲームと画像処理

ゲームでは図1のようにあるキャラクタ画像に対して色違いの画像を用いることがあります。

図1 色違いの画像

最近のゲームは非常に多くの画像を扱うため、このような色違いの画像に対して画像ファイルを用意した場合、画像ファイルの個数が多くなり、結果として管理が非常に大変になります。このため、このような色違いの画像はブラウザ側で動的に生成する必要があります。この色違いの画像を作成する方法には複数の方法があるのですが、今回はScalable Vector Graphics (SVG)を用いて色違いの画像を生成する方法について説明しようと思います。

Scalable Vector Graphics

本題に入る前にまずScalable Vector Graphicsについて簡単に説明しようと思います。詳しい説明は省略しますがSVGはW3Cによって発表されたXMLベースのベクトル画像フォーマットです。

Scalable Vector GraphicsとHTML5

このように書きますとSVGはHTML5と関係がないように読めるかもしれません。しかし、実はHTML5はSVGを統合しています。つまり、例1のようにHTML5ファイルはSVGの要素をそのまま利用することができるということです。

例1 Scalable Vector Graphics

Scalable Vector GraphicsとCanvas要素

ここでみなさんの中には「HTML5には<canvas>要素があるのになぜSVGを統合したのか」という疑問をもたれる方もおられると思います。残念ながら私はSVGに携わった訳ではないためあくまでも推測となりますが、私はSVGを用いて<canvas>要素では困難な事を補完しようとしたのではないかと思います。事実、今回の色変換も含め<canvas>要素では複雑な処理もSVGを用いれば非常に簡単に実現することができます。

Scalable Vector GraphicsとJavaScript

(Android 2.3を除く) HTML5対応ブラウザでは例2のようにJavaScriptを用いてSVG要素を動的に生成することもできます。

例2 JavaScriptによるSVG画像の生成

また、例3のようにSVGは<img>要素のソースとして利用することもできます。この方法を用いることによってSVG画像を<canvas>要素に描画することもできます。

例3 <img>要素とSVG

このようにHTML5はSVGを他のHTML5の技術との親和性を高めた上で統合しています。

Scalable Vector Graphicsと画像

SVGは例4のように<image>要素を用いることによって画像を扱うことができます。

例4 SVGと<image>要素

さらにHTML5対応ブラウザでは例5のように<image>要素のソースとしてData URIを用いることもできます。

例5 Data URIと<image>要素

一方、HTML5対応ブラウザではtoDataURL()メソッドを用いることによって<canvas>要素の内容をData URIとして出力することができます。これらのことから例6のようにtoDataURL()メソッドで出力されたData URIをSVGの<image>要素のソースとして用いることによって<canvas>要素の内容をSVG画像として表示することができます

例6 <canvas>要素とSVG画像

Scalable Vector Graphicsと画像フィルタ

ここまでSVGについて説明してきましたが、ここまでの内容は<canvas>要素でも可能なことなのでSVGを使う利点がないように見えると思われます。しかし、SVGでは<canvas>要素と異なり、画像にフィルタをかけて表示することができます。たとえば例7のような色変換(Color Matrix)フィルタを用いることによって画像の赤色成分と緑色成分を置換した結果を表示することができます。

例7 Color Matrixフィルタ (SVG版)

ここでちょっとこのColor Matrixフィルタについて説明します。Color Matrixフィルタとは画像の各ピクセル (rin, gin, bin, ain) と定数 a00,...,a34 に対して以下の演算を行い、その結果 (rout, gout, bout, aout) を表示するという色変換フィルタのことです。

通常、この演算は以下のような5x5の行列を用いて表現されます。このため、SVGのColor Matrixフィルタはこの行列の a00,..., a34 の値を values プロパティに指定します。

もちろん、このColor Matrixフィルタは例8のようにJavaScriptの関数として実装することもできます。

例8 Color Matrix フィルタ (JavaScript版)

とはいえColor Matrixフィルタは非常に多くの演算を行う必要があるため例8のようにJavaScriptソフトウェアで行った場合実行速度が遅くなってしまいます。一方、最近のHTML5対応ブラウザはSVGフィルタをGPU (Graphics Processing Unit) というハードウェアを用いて高速に行うことができます。ですからゲームのように速度が必要なアプリケーションの場合は例9のようにある画像に対してSVGフィルタを用いて色変換したSVG画像を作成し、そのSVG画像を<canvas>要素にコピーすることによって高速に色変換を行うことができます。

例9 SVGフィルタを用いた色変換

まとめ

今回はSVGを用いた画像処理について説明しました。最新のブラウザはWebGLに対応しているものが多いので、それらのブラウザではWebGLを用いてより高速に画像処理を行うことができます。とはいえ、ライブラリを用いずにWebGLで画像変換を行う場合シェーダプログラムの知識が必要なためちょっと敷居が高くなります。また、SVGはほとんどのHTML5対応ブラウザで実装されており、CSSなど他のHTML5の技術との相性が良いという利点もあります。このように画像変換という意味においてはWebGLとSVGの両方とも利点と欠点があるので、それらの利点と欠点を考慮して適切な方法を用いる方法があります。