最近のWeb制作現場では、WebGL、そしてGLSLを用いたアニメーションの実装が増えてきています。

もちろん、弊社でも様々な案件で既に利用されています。

一方で、WebGLやGLSLは、「実装コストが高いこと」や「デザイナーが干渉しづらいこと」等の問題から、通常の案件では利用される機会が少なくもあります。

そこで、本連載では、「少ないコードで実装できる」「部分的に適用しやすい」をコンセプトとしたWebGL/GLSL表現をモック形式でご紹介します。

今回のテーマ「1枚のテクスチャ」

今回のテーマは、1枚のテクスチャ素材を用いて、ちょっとした表現を作成してみよう！というものです。

主な目的は、ベースとなるカラーやパターンはテクスチャに頼り、プログラマブルシェーダーの記述コストを減らすことです。

また、テクスチャに頼ることで、デザイナーとのコミュニケーションコストも減らすことができるでしょう。

では、果たして、1枚だけのテクスチャでどのような表現が可能なのでしょうか。

実装コンセプト：フラグメントシェーダーで、座標に対し、オフセットをかける

実装側では、座標に対してオフセットをかける、という以下のような4,5行のシンプルな実装で行います。

varyingやuniform等は、Vertex ShaderやJavaScript側からの受け渡し値です。

※ offsetに用いている値やoffsetをかける座標は、各作例ごとに異なります。

作例①：浮遊表現

※ テクスチャ画像は、Flickrより拝借しています。photo by [Alan Klim]

CSSのAnimationプロパティで、オブジェクトを上下に動かすことで浮遊しているように見せる…といった表現はよく用いられます。

しかし、CSSで複雑な動きや複雑な計算処理の実装は、かなり面倒です…。そこで、シェーダーの出番になります。

今回は、「テクスチャのY座標に対し、Sin波を利用したoffest値をかける」ことで、揺らぎらしい表現を作り出しています。

作例のTシャツのように「陰影を含めた透過された写真」を用いるだけで、浮遊表現らしく見えるのではないでしょか。（そういう意味では、やはりテクスチャ頼りです）

作例②：メタリック表現

※ テクスチャ画像は、Flickrより拝借しています。photo by [Hacen Dadda]

こちらも、作例①と同様にテクスチャ頼りです。

水面のような輝き/反射のあるテクスチャを利用することで、作例①とほぼ同じコードでも、メタリックな表現を作り出せます。

作例③：インク流体表現

※ テクスチャ画像は、Flickrより拝借しています。photo by [Steve Hodgson]

こちらも、いつも通りにテクスチャ頼りです。

インクを撒き散らしたようなパターンに対し、オフセットを重ねあわせたり、noiseをかけたりすることで、擬似的な流体表現も可能です。（勿論、擬似的な表現なので、動きは不自然ですが…）

uniformsで取得したマウス座標を利用すれば、インタラクティブな表現にもなりそうです。

ちなみに、テクスチャの端が揺らいでいるのは、黒の余白を含んだテクスチャを利用しているためです。Vertex Shaderが要因ではありません。

さいごに

以上のように、練られたテクスチャを利用することで、簡易的なシェーダーでも「それらしい動き」を作ることができます。

一方、実行速度等を考慮にいれたモックではありませんので、どの程度、実案件に適用できるのか、は別途で考える必要がありそうです。

そのような面も含め、今後も「少ないコードで実装できる」「部分的に適用しやすい」をコンセプトとしたWebGL/GLSL表現を模索していきたいと思います。