“なんかそれっぽい動くやつ”作る時、GLSLでシェーダを書くのがお手軽ですよね。 GLSL Sandboxなんかで人の作品からインスパイア受けつつ(パクりつつ)試しながら作って、それをそのまま自分のWeb上で使えるとすごい楽。

今回はgl-reactを使ってReact上でGLSLを表示できるようにしてみたので、メモしておく。

自分でテストしたときのサンプルリポジトリはこちら

ポイントとしては以下。

time変数どうするの

examplesのこれみてもらうのが早いかも。

要するに、渡されたComponentにrequestAnimationFrameでtimeを刻んで渡すHOCを作って適用させるのがこのライブラリでのやり方っぽい。

わざわざ作るのも面倒なのでサンプルで使っていたこれをとりあえずそのまま使ってしまえばいいと思う。自分はこれをflow外したあとに少し調整したものを使った。

この他にも、Propsとしていろんなuniform変数を渡せるので、例えばReactで作ったスライダーで数値を調整して、それをもとにした描画をGLSLでやるみたいなことが比較的簡単にできる。

活用するといろんなことができそう。

GLSLのスキルそのものの低さに関してはあまり改善されてないので、あらためてこれでも読んでみようと思う。

おわり🐶