この記事は、WebGL Advent Calender の7日目の記事です。
初めまして。gyoh_k です。
ハイレベルなWebGL アドベントカレンダー内でいきなり敷居を下げてしまい申し訳ないのですが、この記事はGLSLシェーダ初心者が、 jQuery プラグインを改造してシェーダを表示してみた、という内容を書きます。
jQuery Ripples とは
指定したDOM要素に対して、マウスに反応する波紋エフェクトを追加できるjQuery プラグインです。
http://sirxemic.github.io/jquery.ripples/
波紋のエフェクトがかなり自然で美しいです。
最初に見たとき、「HTMLでこんな事ができるのか！」とかなりびっくりすると同時にマネしてみたくなりました。
仕組み
jQuery.ripples は以下のような記述で呼び出します。
$('body').ripples({
resolution: 512,
dropRadius: 20,
perturbance: 0.04,
});
このプラグインが呼び出されると、まず対象となるDOM要素(この場合はbody)の一番下のレイヤーにCanvas要素を追加します。
次に、cssで指定されているbody の背景画像を取得して、WebGLにテクスチャとして渡します。
その後、WebGL のシェーダで画像にエフェクトをかけ、結果をCanvasに出力する仕組みになっています。
シェーダのカスタマイズ
うーむ、仕組みはわかったしマネはしたいがシェーダが書けない... ということで、とりあえず GLSL Sandbox のデモを拝借して表示してみることにしました。
http://glslsandbox.com/e#21631.1
jquery.ripples のソースコードはそこそこ量がありますが、とりあえず、renderProgram() に書かれているフラグメントシェーダを差し替えれば動作はしそうです。
https://github.com/sirxemic/jquery.ripples/blob/d98aa0fc8c69666708ce068a119fafbebe398074/js/jquery.ripples.js#L439-L469
そして、ほぼ丸一日試行錯誤した結果、なんとか表示できました。
(ほとんどの時間は、GLSL Sandbox では初めから用意されている uniform 定数を、どうやって独自に定義したらよいか悩むのに費やされました)
http://gyohk.github.io/jquery.ripples/
原理的には、他のWebGL用シェーダも動作するはずなので色々と試してみたのですが、なぜか表示できないものが多く、WebGL APIに対する知識の足りなさを痛感しました。
まとめ
シェーダエフェクトが「いかにも」な作りこまれた3DのWebサイトだけでなく、一見普通のHTMLサイトにも紛れ込ませることができるのは、個人的には意外でした。
フォールバックをつけておけば非対応のブラウザでも問題なさそうなので、思っていたよりも身近に使える技術なのかもしれません。