GLSL(OpenGL Shading Language)はシェーディングに特化したプログラミング言語です。
ということなんだけど、そもそもシェーディングがよくわかってない(笑)
OpenGLって名前が付いているから、3Dがらみの技術なんだろうなー、という程度の認識で手を出してみる。
まず、OpenGLの方を勉強するべきじゃないの、って気もしなくもないけど、単体で結構遊べるようです。
詳しくはGLSL - Wikipediaを見てください。
私は見ても、いまいちわからん(笑)
基本は3Dモデルにエフェクトを加える(シェーディングする)ための言語という程度の理解でGO!
それほど今後の展望があって手を出してみているわけではなく、ものづくりカフェ こねくり家の、GLSLの勉強会にちょっと顔だしてきたんで、その復習なのです。
そんなわけで、結構曖昧な知識のまま新技術を使ってみる。
新技術とか言ってるけど、自分にとって新技術というだけで、GLSL自体は2003年に策定されているんで、もう枯れに枯れている技術の筈。
OpenGLの技術ならWeb関係ないんじゃねーの?、って感じもしますが、ブラウザ上でOpenGLを実現できるWebGLというのがあるので、このWeb技術日記で取り上げる意味があるわけです。
WebGLにしても2011年登場なので、そろそろ新しくはなくて実用段階の筈。
パソコンの主要ブラウザの対応も完了し、iOSも8で対応ということで、2015年の今、旬ですな!
まず、GLSL Sandbox Galleryのページで、どんなもんができるか見学。
んで、[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（１） - Qiitaをざっと読む。記事を書いたdoxasさんのサイトWebGL 開発支援サイト wgld.orgにも、色々と記事があるみたい。
はじめてのシェーダコーディングの記事の方では、ブラウザ上にエディタが用意されていて、いきなりGLSLを書いてテストすることができるようになっているんで、とても便利。
んで、開発環境をどうしようかということだが、どうやらFirefoxにGLSLエディタが用意されているらしい。
シェーダエディタ - 開発ツール | MDN、これだ。
とりあえず、これを使う前に、前述のサイトにあるウェブエディタで遊んでみることにしよう。
いつまでも開発環境上で実行していても、自己満足で終わってしまうのでHTMLに組み込む方法を調べる。
公開したら、いままで自己満足で済んでいたものが、自己満足の押し付けに転化するよーなきもせんでもないが、そこはそれ。
実際にHTMLに組み込むには下準備が必要。
用意してあるエディタの[download]ボタンを押せば、その辺組み込んだHTMLを吐き出してくれるんだけど、その辺の解説をwgld.org | GLSL: GLSL だけでレンダリングする |、のほうでやってある。
ざっと言うと、HTMLにcanvasを用意して、そこにWebGL用のコンテキストがあるんで、そいつに1枚平面ポリゴンを描画して、そのパラメータとしてGLSLを送り込む、という作りになっているようです。
その際、GLSLで使う時間(time)・画面サイズ(resolution)・マウス座標(mouse)を送り込む必要もあるみたいで、fpsなんかもsetTimeout関数なんかを使ってJavaScript側で調整するみたい。
うーむ、始めるまでのハードルが結構高いな。
前述のSandbox Galleryとかdoxasさんの記事のエディタを使えば、いきなりGLSLのコードは書けるし、下準備のところはひとまず、コードをコピペでいけば良い訳なんだけど。
そんなこんなで、GLSLを書くところまでたどり着かなかったけど、基本の基本はわかった…ような気がする。
今日はここまで。