個人制作 WebGL ゲームエンジン Kick.js のシェーダエディタが急激に進化してました！！

doxas : 2015-01-03 15:09:34

機能充実のオンラインシェーダエディタ！

以前、ブログで一度紹介したことがある WebGL のヘルパーライブラリである Kick.js。

こちらはデンマークのエンジニアによって開発されているものですが、以前に見たときよりもかなりいろいろな面で進化していたのでご紹介します。

特に今回は、シェーダエディタにフォーカスを当てて紹介してみます。

シェーダエディタは私自身も自作したことがあるのですが、汎用的なつくりにするにはそれなりに手間が掛かります。

Kick.js のオンラインシェーダエディタは、その設定の豊富さなど、かなり意識して作られていて非常に素晴らしいです。

左上にレンダリング結果がリアルタイムに更新されて表示されます。

右側には、シェーダだけでなくテクスチャやその他の設定を変更するためのメニューが豊富に取り揃えられています。

またボタンを見るとわかりますが、Google アカウントとの紐付けによるアカウント管理、保存やロードといった多数の機能が搭載されているのがわかりますね。

Settings のタブを選択すると、メッシュの形状、射影変換の方法の選択、ブレンディングやカリングの設定、さらには深度テストやライトの設定などかなり柔軟に行えるようになっています。

これは素晴らしいですね。

左上にある Examples のボタンを押すと、プリセットとなる Example を呼び出すことができます。

特に WebGL 初学者にとってこういった機能があるのはすごくいいですね。

実際にエディタ部分をリアルタイムに変更しながら結果を確認できるため、勉強にはもってこいの環境と言えるのではないでしょうか。

もしシェーダなどでエラーとなるようなコードを書いてしまっても、以下の画像で示すように背景の色が変わったり、またそのエラーの内容がコンソール部分(左下ペイン)に表示されたりするのでわかりやすいです。

シェーダのコンパイル結果を動的に表示してくれるのは大変いいですね。

プリセットとして用意されているシェーダもなかなか面白いものがそろっていて、マンデルブロ集合を描いてテクスチャに利用するものなど、いろいろと参考にできるのではないでしょうか。

このオンラインシェーダエディタに限らず、以前に見たときよりも全体的にかなりパワーアップしている感のある Kick.js。一応サイトにはゲームエンジンと謳われていますが、どちらかというとヘルパーライブラリという感じの機能がまんべんなくそろっているような印象です。