サウンドビジュアライザをパラメータ調整だけでカスタムできる Butterchurn Visualizer
美しいシェーダ芸とサウンドの組み合わせ
今回ご紹介するのは、サウンドビジュアライザを様々なパラメータ調整だけで自由にカスタムすることができるコンテンツです。
一応、形としてはアカウントを作るようになっているみたいですが、アカウントを作らなくても楽しめます。About の内容によれば、このサイトは MilkDrop という Winamp のプラグインをウェブに移植したもの、みたいですね。
作者はどんな方なのか、あまり説明らしい説明もなく、いまひとつ正体がわからないのですが、とりあえずサイトの出来栄えはとんでもなく素晴らしいです。驚きました。
美しいビジュアルを堪能しよう
今回のサイトを利用するには、大前提として「音源」になるものが必要となります。
ローカルファイルでお好みのファイルがあるならば、それを利用することができますし、仮にローカルファイルの用意がなくても SoundCloud からデータを引用して使うことも出来ます。
いずれの場合でも、音源ファイルや SoundCloud を利用して音源を追加することから始まります。画面の左下のところにアイコンがあるので、これをクリックして音源を選択しましょう。
SoundCloud からサウンドデータを持ってくる場合は、雲のマークをクリックしてから該当 URL を入力します。
サウンドがロードし終わると、突然ランダムに選択されたビジュアライザへと画面が切り替わります。
まるで Shadertoy などのシェーダアート系のサイトを彷彿とさせるような、美しいビジュアルが突然動き出し、これにまず驚きますね。
どのようなビジュアライザが選択されるかはランダムなので、もしかするとあまり外見がきれいではないものがたまたま出てきたり、暗転したままなにも起こらないように見える場合もあるかもしれません。
ビジュアライザのパターンはいつでも変更できるので、画面の右下あたりにある矢印の形をしたアイコンをクリックしてみましょう。次々とビジュアライザの模様が変化していきます。
私はこのサイトの元になっている Milkdrop のほうを詳しくは知らないのですが、ある程度プリセットで模様やロジックが用意されており、それをカスタムすることができるようになっていたのだと思います。
今回のサイトでも、同様に自在なビジュアライザのカスタムが可能となっており、スライダーや数値入力によって自由に変更を加えることができるようになっています。
恐らく、用語などがオリジナルと統一されていると思われますので、Milkdrop のドキュメントや操作説明を見ながら使うと、ある程度意味がわかりやすいのかなと思います。
とにかく、自分でカスタムしなくても、次々とビジュアライザのパターンを（画面右下の矢印アイコンで）切り替えていくだけでも相当楽しいですね。
これを移植したというからには、作者の方はすさまじいグラフィックスプログラミングのスキルを持ってるんじゃないだろうか……と思わず感じさせられるかっこいいエフェクトばかりです。
これ、既存の Milkdrop の作品をコンバートしたものなのかもしれませんが、WebGL で動く以上は GLSL を含めていろいろと変換する必要があったと思いますし、本当にとにかくすごいですね。
もともとの Milkdrop も同じように内部で GLSL を使っていたのかな？ フラグメントシェーダのコードはどれも同じプリセットから作っているみたいなので、一人のコーダーだけでもくもくと手入力で変換したということはさすがにないと思いますが、それにしてもすごい……すごすぎる。
もうとにかく、ビジュアルが本当にかっこいいので、見ているだけで無限に時間を浪費しそうになります。
次々と任意にエフェクトを変えていくのもいいですが、一定時間経過することで自動的にエフェクトの切り替えが行われるようになっているので、ただ眺めているだけでもいいですね。
お気に入りのサウンドファイルを読み込ませて、フルスクリーンにしてぼんやりスクリーンセーバー的にこのサイトを見ているというのもいいかもしれません。
ちなみにカスタムする画面は以下のような感じで、スライダーなどがたくさん出てきます。これらを操作するだけで、自由にカスタムすることができるようになっています。パラメータを数値で入力したり、ちょっとしたスクリプトを記述することもできるようになっているみたいなので、かなり本格的なことまでできるのではないでしょうか。
Winamp のプラグインとして、もともとサウンドを可視化するために存在していた Milkdrop。これを WebGL 版に移植したのは、果たしてプラグインの作者さん本人なのか、はたまた Milkdrop のファンの方なのか……
いずれにしても、今回のサイトは非常に素晴らしい内容だと言えると思います。既存の資産を流用している形なのかもしれませんが、だとしても、これだけカッコよく、センスあふれるビジュアライザのシェーダのコードが、こうしてオンラインで閲覧できるのは感動モノです。
自身でカスタムするとなると、ちょっと慣れや工夫が必要そうです。しかし、ただ眺めているだけでも本当に楽しくて、時間泥棒としての意味で、注意したほうがいいかもしれません。あとは、シェーダの内容によってはそこそこ重い処理になる場合もあるかと思いますので、できるだけハイエンドなマシンで閲覧するほうがいいかもしれません。
とにかく褒めてばかりの内容になってしまいました……
しかしほんとに良く出来ています。個人的にはかなり感動してしまいました。
みなさんもぜひチェックしてみてください。
