React.js と WebGL の融合をテーマに実装されている興味深いフレームワーク gl-react

doxas : 2017-02-21 13:55:25

react の実装スタイルをそのまま利用できる

今回ご紹介するのは、React.js ベースで WebGL 関連の処理が行えるプロダクトで、その名も gl-react の関連サイトです。

今回のサイトはタイトルが「gl-react cookbook」となっており、その名前からも想像できるとおり、ユースケースやドキュメントが大量に収められているページになっています。

具体的なコードの記述例もかなり豊富に用意されているので、React ベースで WebGL を使えたら便利なのになあと一度でも感じたことがあるなら、概要だけでもチェックしてみるといいのではないでしょうか。

今回のサイトはデモサイトというよりはドキュメントなど仕様を把握するのに便利な内容となっています。

まずそもそもが React と WebGL を共存させたいケースなんてあるのだろうか？と感じる方もいるかもしれませんが、考え方や捉え方次第では、React を用いて様々な状態変化を管理するという手法は、WebGL を用いる上でもメリットになることが十分にあり得ます。

私自身は自分でそのような実装を作った経験はありませんが、そもそもビューを管理するための React の考え方は、実は WebGL とは親和性が低いということは無く、むしろ多くのメリットを生み出す可能性も秘めています。

今回のプロダクトは、そこをうまく組み合わせ実践しているプロダクトだと言えますね。

Examples を表示した状態が上の画像のような感じです。

画面の左側に大量にリスト状の項目が並んでいますが、これらが全て実装例になっています。

もちろん、全ての実装例にはサンプルコードと実行結果のリアルタイムビューがついてきますので、その場でどのような動作をするのか確かめることができます。

多くの場合、React の特性をしっかりと把握しやすいように、ビューの近くにはいくつかのコントロールが置かれており、色やパラメータを変化させることができます。

ブラーの掛かり方を動的に変化させるコンポーネント。

WebGL を使っているので、当然ですが結構シェーダをしっかりと活用した内容のものがありますね。

上の写真にあるような、動的にブラーの効果範囲を変更できるような機能は、自分で実装しようと思うとなかなか大変ですが、コンポーネント化されていれば流用も簡単そうです。

また、シェーダを使ったポストエフェクトの実装としてはこの他にも、たとえば RGB ずらしと sin 波などを利用したブラウン管ディスプレイ風のエフェクトなんかもあります。

イロモノ系で言うと、Shadertoy のデモのシェーダコードを貼り付けているものとかもあったりします。

このサイトの素晴らしい点は、これらの多くの Examples が用意されていることも確かにそうなのですが、きちんとドキュメントが同時に整備されているところにあるかもしれません。

いわゆるコンポーネントベースの開発スタイルとなるため、これらのドキュメントが無いとなかなか各コンポーネントの実体が把握できず、困ってしまうことが多くなるでしょう。

gl-react は今回のサイトに置かれているドキュメントの他、Github でソースコードも公開されていますので、細かい部分の不明点も丁寧に見ていけば解決できそうです。

WebGL が広く利用されるようになっていくことに比例して、WebGL をもっと便利に使いたいという要望が高まり、様々なプロダクトが生まれています。

これまでにも、たとえば関数型プログラミングの流儀で WebGL を扱えるようにしたプロダクトなどを当サイトでもご紹介したことがありますが、様々な形でこうして WebGL に関わる実装が増えていくのは、とても好ましいことだなと個人的には思います。

今回の gl-react は React.js の考え方で WebGL を操ることができるものとしてはかなりしっかりと作られている印象です。

React.js そのものがある程度理解できていないと使いこなすのはちょっと難しいかなと思いますが、逆にこのようなプロダクトについて自身で思い描いた経験がある方なら、用意に使いこなすことができるかなという感じがします。