シェーダによって生み出される美しいグラフィックスとオーディオビジュアライズが特徴的な LIL BRAIN Official Website
シェーダアートとサウンドが連動
今回ご紹介するのは LIL BRAIN というアーティストのオフィシャル・ウェブサイトです。
画面全体を Canvas が覆っているタイプの WebGL 実装ですが、特に今回のケースはその全面がシェーダアート風のグラフィックスによって描き出されており、非常に美しいビジュアルが特徴になっています。
また、ミュージシャンのサイトということもあり、オーディオビジュアライズの機能もついています。
リンク：
幻想的な音とグラフィックスを感じてみよう
今回のサイトは、たぶんキャプチャ画像ではその良さがなかなか伝えられないタイプのサイトだと思います……
全体に暗い色で描かれているということもあり、ちょっと画像だと、詳細がわかりにくいかもしれません。
グラフィックスの雰囲気としては、暗い背景に加算合成で描画が行われるので、なんというかネオンっぽいというか、近未来のデジタルインターフェースのような感じです。
この上の画像にあるように、プラズマボールみたいな青い模様が浮かび上がってくるのですが、これは音声が再生されている瞬間だけです。
つまり、オーディオビジュアライザーとしての機能が働き、音声に反応している間に限り、この青いプラズマのような模様が浮かび上がってくるという寸法ですね。
非常に美しいエフェクトで、単純に、シェーダアート系の表現としての完成度が高い感じ。
また、画面内をクリックすると、その瞬間だけ背景がブワッと浮かび上がってきたりもします。
また、キャプチャ画像ではどうしてもわかりにくいと思うのですが……
クリック時に背景に模様が浮かび上がってくる演出とは別に、カーソルを動かしてやることで、油彩絵具を筆で引き伸ばしたときのように、グラフィックスがグイッと引っ張られて歪むような演出が発生します。
たぶん、下の画像だと多少はわかりやすいかな……
グラフィックスが斜めに引きずられるように歪んでいるのがかろうじてわかるんじゃないかと思います。
このエフェクト、なんとなく流体っぽい感じでかっこいいですね。
今回のサイトはオーディオビジュアライズが行われるようになっている反面、デフォルトで再生される楽曲が結構音声がとぎれとぎれになる曲になっており、音声が聞こえてくると同時に一気にエフェクトが花開く感じがすごく迫力があります。
また、絶えずグリッチのようなエフェクトがいろいろな部分に発生するようになっていて、静止画では伝えられない、独特な空気感が漂っているところも見どころのひとつ。
こちらはぜひサイトを訪れて確かめてみてください。
とてもかっこいいシェーダアート風のエフェクトが見事な事例です。
ぜひチェックしてみてください。
