次に、VFXElementsを配置していきます。プロパティで変更できます。この例では、画像にグリッチ風エフェクトがかかっているはずです。シェーダーは自分で書くことも出来ます。プロパティにGLSLシェーダーを渡してください。セクションをご覧ください。要素で覆うことで動作しています。VFXElementsの位置やサイズをトラッキングし、WebGLのテクスチャとして読み込んで、毎フレーム描画しているだけで、特に変わった事はしていません。VFXProviderとVFXElementの仕組みとはいえ、GIFアニメ対応やテキストの画像変換周りでちょっと苦労したので、その辺を解説します。GIFアニメ対応WebGLは画像や動画をテクスチャとしてロードできますが、GIFアニメには対応していません。(2年前に試した時は、chromeではGIFアニメをロードできてたんだけどな......)そのため、今回GIFアニメに対応するんは、まずGIFアニメをパースして画像に分割し、順番にテクスチャにロードしていく、ということをする必要がありました。PromiseベースのAPIだしサクサク動いて便利なんだけど、bower時代の産物なのでforkする必要があった。gifuct-jsによってフレームごとの画像データが手に入ったので、次はこれをWebGLでロード出来るようにする。gifuct-jsはフレームごとの長さも返してくれるので、現在時刻と再生時間、フレームの長さを比較して順番に描画する事で、簡易的なGIFプレイヤーを実装できる。gifuct-jsによるGIFプレイヤーの実装例あとはこのcanvasをWebGLに渡すだけで、GIFアニメをWebGL上に描画できた。テキストを画像に変換するWebGLでテキストを扱いたい場合、事前にテキストを画像に変換しておくか、Three.jsのドキュメントで解説されているようなトリックを使う必要があった。https://threejs.org/docs/#manual/en/introduction/Creating-textこれらのトリックを使うのも大変だし、デザイン変更の度にPhotoshop等で画像を書き出すのも面倒......という事で、もっと手軽にDOM要素を画像に変換できないか調べた。html2canvasが使えるか試してみた。JavaScripthtml2canvasはWebページのスクリーンショットをブラウザ上で生成するライブラリだ。一応いい感じにDOM要素の画像を生成できたんだけど、html2canvasは毎回ページ全体をクローンするため、不要なリクエストが走りまくって動作がメチャクチャ重くなってしまい、今回の用途には合わないと判断した。結局、html2canvasと似た動作をするdom2canvasというスクリプトを自作する事にした。SVGのforeignObjectという要素をつかうと、DOM要素をSVGに埋め込む事ができる。これを利用すると、次の要領でDOM要素をcanvasに描画できる。textureいろいろ制限はあるけど(クロスオリジンなリソースを読み込めない等)、今回はプレーンテクストだけ変換できればいいので、これで充分だ。VFXSpanは文字列が更新されたら自動的に再描画するので、例えばtextareaと組み合わせたりもできる。今後は以下の機能を追加したいと考えています。カスタムuniform変数のサポートbackbufferサポートエフェクトプリセット追加REACT-VFXはまだまだ粗もあるけど、ちょっとしたエフェクトをWebサイトに追加したい場合にはかなり便利に使えるはずです。法然院でVJした過去記事スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。