WebGL 開発を強力にサポートする Chrome 拡張機能が登場! Shader Editor Extension for Google Chrome
Chrome にもシェーダエディタの時代がやってきた!
今回ご紹介するのは、Chrome 用の拡張機能で、導入することによってシェーダのリアルタイム編集が可能になる Shader Editor Extension です。
従来から、Firefox にはデフォルトでシェーダを編集するための機能が備わっていました。拡張機能というかたちではありますが、これが Chrome でも可能になったというのは胸アツです。個人的にはかなり感動しました。
さっそく簡単にですが、利用方法をご紹介しようと思います。
拡張機能を追加するだけ!
本拡張機能は、現状では多彩な機能を持っているわけではありません。
単純に拡張機能を追加するだけで利用でき、余計な機能が入っていない分、ほぼ直感的に利用することができるようになっています。
拡張機能を追加すると、開発者ツールのグループタブのなかに Shader Editor という新しいグループが表示されるようになります。このグループタブを選択するとボタンが置かれた以下のようなインターフェースが出てきます。
ボタンにはリロードという文字が書かれているので、WebGL が実行されるページを表示した状態で、ボタンを押してページをリロードしましょう。
すると、そのページで実行されているすべてのシェーダが表示されます。
例えば今回の場合、wgld.org のパーティクルフォグのサンプルページで実行していますが、シェーダが 3 組利用されているのがわかります。
ちょうど開発者ツールの左部分に、サイドバーのようなものが表示されていますね。これが実行されているページのシェーダを表しています。上図で言うと、みっつあるうちの最上段のシェーダが選択状態になっている感じですね。
シェーダのソースはリアルタイムに編集した結果が反映されます。
シェーダを書きかえるとどのようなことが起こるのか、自在に書き換えつつチェックすることができるんですね。これはすごい便利!
この拡張機能は Github でソースコードも紹介されており、使っている様子を撮影した動画も用意されています。使い方は非常に簡単なので、あまり細かい説明は必要ないでしょう。
作者は WebGL のデモ作成で非常にハイレベルな作品を多数輩出している有名な方ですし、今後も拡張機能をバージョンアップしていくつもりのようですので、今後にさらに期待ですね。
自らの開発のためだけでなく、優れたデモを研究するのにも非常に有用なこの拡張機能。ぜひチェックしてみてください。
リンク:
spite/ShaderEditorExtension · GitHub ※ソース
Shader Editor - Chrome ウェブストア ※ウェブストア
Home - Clicktorelease ※作者の方のサイト
WebGL Shader Editor extension demo - YouTube ※簡単なチュートリアル動画