はじめに
個人のモノ作り、展示イベント向けなどの作品作りで、「SF みたいな／魔法の世界みたいな見た目・演出」というのを作ることがあります。
（動作させる環境などは、個人的な好みで「ブラウザ ＋ JavaScript」が多いです）
例えば、以下の「透明マント／光学迷彩」みたいな演出や、「炎が拡散していくようなエフェクト（※ こちらの実装は、自前の処理を組み込んだシェーダーにて）」です。
そういう方向性のことをやっていて、良く見ている情報の 1つが VFX 関連の内容です。
上記の例は、描画部分はどちらも自前の JavaScript・GLSL の処理で実装していますが、そのような実装でなく、良い感じの VFX用の素材を重畳するようなやり方もできると表現のバリエーションを増やせます。
以下は、VFX用の動画素材を重畳して使ったパターンです。
素材だけでなく、ライブラリも探してみようかと、色々見ていきました。
この記事では、その中で気になったものをピックアップして紹介します。
VFX ＋ JavaScript のキーワード検索からたどって出てきた情報
また新しい情報や、自分が見逃していた情報がないかなと思い、」VFX ＋ JavaScript」などをキーワードに、情報を探してみました。
●"VFX" "javascript" - Google 検索
https://www.google.com/search?q=%22VFX%22+%22javascript%22
あと、その検索結果を見ていたところ、以下の「GitHub Topics」も見つかったりしました。
●vfx · GitHub Topics
https://github.com/topics/vfx?l=javascript&o=desc&s=updated
気になったもの
それらの結果を見ていて、個人的に興味深かったものをいくつか紹介してみます。
Zeus
まずは、以下の Zeus です。トップページからして良い感じです。
●Zeus | Lunal Graphics
https://lunalgraphics.com/about-zeus
この画面の「Try it on the Web」というリンクをクリックすると、以下のようにエディタが開きます。
●Zeus on the Web | Lunal Graphics
https://lunalgraphics.com/weblauncher#zeus
ここで色々と設定を変えたものを作り、画像としてダウンロードできるようです。
ブラウザ上での Canvas要素を使った描画をよくやるので、自分はそこで使う素材を作る目的で活用できそうなものでした。
ちなみに、このページにたどり着いたのは、上記の「GitHub Topics」で出てきたリポジトリの 1つからでした。
Zeus と同じ提供元のもの
さらに、上記の Zeus のページの上部メニューを見てみたところ、他にもエフェクトを作れそうなものがありました。
メニューのどれを選んでも、カッコいいグラフィックのページにたどり着きました。
また先ほどと同様に、「Try it on the Web」のリンクがもれなくありました。
●SuperBloom | Lunal Graphics
https://lunalgraphics.com/about-superbloom
●Sprite Replicator | Lunal Graphics
https://lunalgraphics.com/about-spritereplicator
●Color Theater | Lunal Graphics
https://lunalgraphics.com/about-colortheater
●Progen Flares 2 | Lunal Graphics
https://lunalgraphics.com/about-progenflares2
ざっくり見ていったところ、元素材となる画像をアップロードするものと、元素材なしに作れるものとが混在しているようでした。
VFX-JS
次に、JavaScriptライブラリの話です。
●VFX-JS - Visual Effects Framework for Web #VFXJS
https://amagi.dev/vfx-js/
ページを下への進んでいくと、様々なサンプルを見ることができます。
リポジトリや公式ドキュメントのリンクは以下になるようです。
●fand/vfx-js: WebGL effects made easy.
https://github.com/fand/vfx-js
●VFX-JS
https://amagi.dev/vfx-js/docs/
VFX-JS について Qiita のタグを検索してみると、タグがついた記事が 2つあるようでした。
●VFX-JSがつけられた記事一覧 - Qiita
https://qiita.com/tags/vfx-js
また、他に以下の記事でも紹介されているようです。
●使うだけで時短になるWeb、デザイン制作の新ツール・フリー素材50選 | PhotoshopVIP
https://photoshopvip.net/158937
その他
まだ見きれてないリスト
さらに情報をたどっていくと、以下のリストを見つけることもできました。
●cgwire/awesome-cg-vfx-pipeline: List of open-source technologies that help in the process of building a pipeline for CG and VFX productions
https://github.com/cgwire/awesome-cg-vfx-pipeline
大量に情報があったので、まだ見きれてない状況です。
まだ見きれてないリストで VFX 以外を含むもの
他には、以下のリストを見つけることもできました。
こちらは、VFX に関するリストではなく、VFX用に使えるものも含む「ノードベースの UI」を提供している仕組みのリストのようです。
●xyflow/awesome-node-based-uis: A curated list with resources about node-based UIs
https://github.com/xyflow/awesome-node-based-uis