フラグメントシェーダー（GLSL で実装）や p5.js を組み合わせて音のビジュアライザーを作るための下調べ

Posted at 2024-01-31

はじめに

タイトルのとおりです。

音を可視化するビジュアライザーに関して、過去に、p5.js をベースにしたものを作ってみるというのを、ほんの少しだけやってみたことがありました。

その時は、上記以外のものをさらに作るというのはやっていませんでした。

そして最近シェーダーを触るようになって、シェーダーを使った作例をいろいろ見ていく中で、音と連動する作品を複数見かけました。それで、シェーダーを使った音の可視化に手をつけようかと思い始め、まずは下調べからやろうと思いました。
それで書いたのがこの記事です。

シェーダーを使った描画と音を連動させた作品について、気になった作品のリンクや、作り方について書かれた記事などを、いくつかピックアップしてみようと思います。

ちなみに、探し方は単純で、例えば以下のキーワードの組み合わせで Web検索をしたりという感じです（キーワードの組み合わせを、いろいろ変えてみて、探しています）。

他に、Shadertoy で「visualizer」などのキーワードで検索をするというのも良さそうです。

以下は、GLSL を使って VJ をされた方の記事です。

●GLSLを使ってVJしてきたのでそこで使ったこととかまとめ - Qiita
　https://qiita.com/edo_m18/items/51bbda8ebd81742e19c8

UV の値をそのまま極座標として扱って利用する話や、他の複数の表現の事例などが紹介されていて、とても参考になりました。

上で紹介したものはシェーダーを使った描画と音を連動させるものでしたが、以下は、シェーダーを使っていないものになります。

シェーダーを使った方法にも参考になりそうで気になったものを掲載しています。

以下は、2D・3Dのビジュアライザーの事例を紹介しています。

●JavaScriptで作成するサウンドビジュアライザー - Web Audio APIで周波数解析 - ICS MEDIA
　https://ics.media/entry/230421/

3Dのビジュアライザーのサンプルがカッコいいです。

以下は、Babylon.js を使って実装されたもののデモ動画と、作られたものを試せるライブデモのリンクです。クリック操作に反応した描画なども行われるものでした。

●Babylon JS Audio Visualization Link in the discription - YouTube
　https://www.youtube.com/watch?v=PAjrrzXO1L8

以下は、Three.js　で描画した球体状のものを使ったもののデモ動画と、ソースコードのリンクです。

●How To Create A 3D Audio Visualizer Using Three.js - YouTube
　https://www.youtube.com/watch?v=qDIF2z_VtHs

以下は、可視化の部分をソフトウェアベースにするのではなく、ハードウェア（フルカラーLEDテープ）を使ったものです。

フラグメントシェーダー（GLSL で実装）や p5.js を使ったビジュアライザーを作ろうとして下調べをしたのですが、GLSL を使ったもの以外がメインになってしまいました。

次は、自分で書いたプログラムでビジュアライザーを作っていければと思います。