CSS Shaderで遊ぶ

カテゴリ:CSSテクニック 2013年5月16日 09:25

久々の更新です。さらに、ものすごく久々にCSSのネタですw
今回はCSS Shaderについて触れたいと思います。
内容がだいぶ濃いので、徐々に調べながら何回かに分けて書いていこうと思っています。
CSS Shaderについて詳しく話すと膨大な量になる上に、そもそもそこまでまだ詳しくない(w)ので、今回はどんなことができるの? どうやるの? というのが分かる程度の記事にしたいと思います。

CSS Shaderとは

CSS Shaderとは、CSSでOpenGL ES2.0のGLSL(シェーダ記述言語)を利用し、DOMを様々な形に変形、演出することができる仕様です。(ちなみにOpenGLのGLは「Graphic Library」の略)

OpenGL ESはWebGLのシェーダ部分でも利用されているので、WebGLでなにか書いたことがある人はほぼそのまま使うことが出来ると思います。
ただ、CSSで利用するにはいくつか決まり事があり、以下の制約があります。
そのため、GLSLではCSSから渡された情報を元に変形や色の指定を行う必要があります。

  • 各頂点位置データはCSS側で準備し、a_position変数に渡される。
  • 位置データ以外の情報についても、いくつか決まった変数で渡される。(テクスチャ座標など。渡されるデータの種類についてはQiitaの記事でまとめています)
  • シェーダに渡したい情報がある場合は、custom function内に変数名 値(例) hoge 30.0)の形で指定します。

ちなみに、実際に適用してみた例が以下のものです。キャプチャ画像を見てもらうと分かりますが、ただのGoogle Mapを地球儀風に変形しています。
※現在はまだ試験的機能です。そのため、下記のサンプルは2013.05.15時点ではChromeのみ対応しており、かつchrome://flagsから設定を開き、CSS Shaderを有効にするのフラグをオンにしないと動作しません。試験機能をオンにする場合は自己責任でお願いします。

サンプルでは変形と一緒に、ライティング処理もしています。
CSS Shaderでは形状の変形とは別に、変形した内容に対して色を変化させることができるようになっています。
それを応用することで、まるで太陽の光を浴びているような地球の状況が再現できる、というわけです。

形状の変形には頂点シェーダ(Vertex shader)、色の変化にはフラグメントシェーダ(Fragment shader)をそれぞれ利用します。

Custom functionの使い方

CSS Shaderは、filterプロパティにcustomを指定することで実現することができます。

2013.05.15時点ではcustom filterに対応しているブラウザはChromeのみです。かつ、実際に指定する場合には-webkit-のプレフィクスが必要です。

シェーダに関してはまた別の機会に説明したいと思います。(まだ勉強中のため)
メッシュ分割数については、下記の画像のように、filterを適用した要素を指定された数字で縦横を分割します。
例で言えば32分割され、それぞれの点に対して頂点情報が設定され、それが頂点シェーダ(vertex shader)に送られます。
頂点シェーダでは、その渡された値を様々に計算して、最終的な頂点位置を決定します。

CSS Shaderはどこで使う?

上で示したサンプルなどを見ていて、どんなことができるか、というのはある程度分かったかと思います。
しかし、じゃあこれをどう使うの? という疑問があるかと思います。確かにぱっと見はすごいことができて、なんでもできそうですが、どう活かしていいか分かりませんよね。
元々、OpenGLはMac OSXなどのUIでも利用されているグラフィックライブラリです。MacのUIはとてもきれいで、アニメーションなんかも頻繁に使われていますよね。こうした表現にはGPUを直接利用できるOpenGLはとても有利です。

つまり、CSS Shaderが標準的になればWebサイト(あるいはWebアプリ)のUI部分はCSS Shaderを利用する、というシーンも増えていくのではないかなと思っています。
今現在ではむずかしい、Macのジニーエフェクトみたいなものも、CSS Shaderを使えばすんなりと実装できるでしょう。(使うことがいいかどうかは置いておいて)
CSS Shaderは表現の幅はもちろん、こうしたUIの新しい仕組みを定義してくれる素晴らしい仕様だと思っています。

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/213