ブラウザ上での JavaScript の処理に何らか活用できそうな VFX関連の情報で気になったもの

## はじめに
個人のモノ作り、展示イベント向けなどの作品作りで、「SF みたいな／魔法の世界みたいな見た目・演出」というのを作ることがあります。
（動作させる環境などは、個人的な好みで「ブラウザ ＋ JavaScript」が多いです）

例えば、以下の「透明マント／光学迷彩」みたいな演出や、「炎が拡散していくようなエフェクト（※ こちらの実装は、自前の処理を組み込んだシェーダーにて）」です。

<iframe width="560" height="315" src="https://www.youtube.com/embed/hC7aml8pTa0?si=CE0n9r4s2GNOwHvC" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

<iframe width="560" height="315" src="https://www.youtube.com/embed/2iKLjO0UDao?si=Fmxu4E4GllCvnTzM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

そういう方向性のことをやっていて、良く見ている情報の 1つが VFX 関連の内容です。

上記の例は、描画部分はどちらも自前の JavaScript・GLSL の処理で実装していますが、そのような実装でなく、良い感じの VFX用の素材を重畳するようなやり方もできると表現のバリエーションを増やせます。

以下は、VFX用の動画素材を重畳して使ったパターンです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/z6AO_YmTDQo?si=xUQ6uLKy063PKJfu" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

素材だけでなく、ライブラリも探してみようかと、色々見ていきました。

この記事では、その中で気になったものをピックアップして紹介します。

## 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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b43745e0-9e3b-5732-8b0e-1e4d71769713.png)

この画面の「Try it on the Web」というリンクをクリックすると、以下のようにエディタが開きます。

●Zeus on the Web | Lunal Graphics
　https://lunalgraphics.com/weblauncher#zeus

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/cf2e2a1d-f477-e7e8-20e4-ba9067c00277.png)

ここで色々と設定を変えたものを作り、画像としてダウンロードできるようです。

ブラウザ上での Canvas要素を使った描画をよくやるので、自分はそこで使う素材を作る目的で活用できそうなものでした。

ちなみに、このページにたどり着いたのは、[上記の「GitHub Topics」で出てきたリポジトリの 1つ](https://github.com/yikuansun/lightning-experiment)からでした。

#### Zeus と同じ提供元のもの
さらに、上記の Zeus のページの上部メニューを見てみたところ、他にもエフェクトを作れそうなものがありました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/3daa59fd-b4d3-0b9a-77f8-5429ad2158cb.png)

メニューのどれを選んでも、カッコいいグラフィックのページにたどり着きました。
また先ほどと同様に、「Try it on the Web」のリンクがもれなくありました。

●SuperBloom | Lunal Graphics
　https://lunalgraphics.com/about-superbloom

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/df58afce-a5d6-680d-4eb1-6c5f764b5182.png)

●Sprite Replicator | Lunal Graphics
　https://lunalgraphics.com/about-spritereplicator

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/26addfa3-fa27-b5c7-ee4e-8af07ced754c.png)

●Color Theater | Lunal Graphics
　https://lunalgraphics.com/about-colortheater

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/532ee25c-2a30-f763-13d8-1d949d452ac5.png)

●Progen Flares 2 | Lunal Graphics
　https://lunalgraphics.com/about-progenflares2

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/01b4e267-b802-670e-f98f-ebe1261b68f0.png)

ざっくり見ていったところ、元素材となる画像をアップロードするものと、元素材なしに作れるものとが混在しているようでした。

#### VFX-JS
次に、JavaScriptライブラリの話です。

●VFX-JS - Visual Effects Framework for Web #VFXJS
　https://amagi.dev/vfx-js/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/cbd8cac2-bc81-f01f-0d7c-bebcc48855b2.png)

ページを下への進んでいくと、様々なサンプルを見ることができます。

リポジトリや公式ドキュメントのリンクは以下になるようです。

●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