See the Pen GLSLfan viewer by keim (@keim) on CodePen.
#GLSLfan 楽しいデスネ
WebGL Advent Calendar 2017でdoxas氏がシェーダ( GLSL )のライブコーディングをリアルタイム配信するお話というタイトルで発表されていたGLSLfanというサイトが楽しいです。Shader Art のコーディングをリアルタイム配信するというかなり攻めたコンセプトのサービスで、サイト上で編集しているコードをリアルタイムに共有・公開することができます。
リアルタイムコーディングに向けてアイディアを形にする速度を上げるには、とにかく小さなコードを沢山書いて引き出しを増やす必要があるため、Qiitaとの相性は良いと思います。
折角、良い Shader Art が出来たら Qiita 上でも共有しましょう。実際に動いている作品のノウハウは説得力が違います。
#CodePen テンプレート
Qiita が CodePen に対応しましたので、GLSLfan の Shader が動くPen を作れば埋め込むことができます。そこで、簡単なテンプレートを作ってみました。
GLSLfan viewer - CodePen
#使い方
GLSLfan viewer をForkして、HTMLの<script id="glslcode">に GLSLfan のシェーダコードを記述、以下の属性値をscriptタグに記述すれば Pen の完成です。
- initialTime; 開始時間
- initialResolution; デフォルト解像度
- title; タイトル
- user; ユーザー名
- channel; タイトルリンク先チャンネルID。"https://glslfan.com/?channel=***" の後の文字列
あとは、この記事を参考にQiitaに埋め込みます。
#コード解説
three.js を利用しています。GLSLコードを設定した THREE.ShaderMaterial を THREE.PlaneBufferGeometry に貼り付けてシーンに追加しています（16～20行目）。WebGL直書きでもそれほど複雑なコードにはならないのですが、three.jsを利用することで可読性が上がっていると思います。
#最後に
それ単体では実用性に欠き、多くの周辺知識を必要とする Shader Art は、趣味の範囲を出ず、現在のところ直接業務などで利用することはあまりありません。しかし、得られる知識やノウハウは、様々な分野で応用の利くものだと思います。これを機にユーザーが少しでも増えてくれれば良いなー、と思います。
おまけ：glslfan で書き散らかした落書き置き場