SoundCloud API と WebAudio を組み合わせたサウンド効果が素晴らしい WebGL デモ RAYLIGHT

doxas : 2017-05-03 13:45:32

モノクロの世界なのになんと表情豊かなのか

今回ご紹介するのは、WebGL に WebAudio を組み合わせたデモ作品で、その美しいビジュアルとサウンド効果が非常に素晴らしい作品です。

まるで万華鏡のように、反転して描かれる世界は全てモノクロです。

作品全体を通して最初から最後までずっとモノクロのままなのですが、それなのに非常に多彩な表情を見せてくれる、とても面白い作品になっています。

マウスボタンをホールドすると……

今回の作品は、WebGL というか CG の技術としては比較的よく見られる、万華鏡のような効果を利用したビジュアルになっています。

シーンの奥のほうから光の板やあるいはラインがゆっくりと流れ出してくるような感じのアニメーションなのですが、特になにも操作せずにただ眺めているだけでも、とても美しい作品ですね。

じっくりと眺めているとわかるかと思いますが、おおよそ3つの区画に別れたような感じのエリア構成になっていて、歪んだり元に戻ったりを自動的に繰り返すような感じになっています。

ちょっとノイズが乗ったような感じのエフェクトが掛かっていますが、ポストエフェクト的なアプローチというよりは、どちらかというとそのままノイズっぽいテクスチャを投影して、色を微妙に変化させているような感じですね。

この手の作品を作ったことがある人ならわかるかと思いますが、一見すると六角形や三角形に見える構造でも、実際には平坦なシーンをうまく鏡に映したように反転させてやることで、今回のデモのような外見を再現することができます。

並べられているオブジェクトの種類は細いラインのようなものから、普通に扁平な板状のもの、ドットのように細かいものなど様々です。

ほとんどのものが偶然に生み出される不思議なシーン構成ですが、とても魅力的ですよね。

そして今回の作品の非常に面白い特徴が、WebAudio を利用した音響効果。

画面内をマウスボタンでホールドした状態にしてやると、まるで音がこもったような感じの印象に変化します。

シーン全体のビジュアルが同時に変化することで、目にも、そして耳にも変化が感じられ、とても複雑な表現として感じられます。

この不思議な音響効果はなんだか癖になりますね……

全体に非常にシンプルな構成のシーンのはずなのに、ものすごく豊かな表情を持っている今回の作品。

WebAudio による不思議なサウンド表現もさることながら、このモノクロの世界に非常に複雑な表情を持たせることに成功していて、とても高いセンスを感じさせる作品である、とも言えると思います。

作品内で閲覧者がやれることは多くないし、静止画で見てもあまり魅力が伝わらないかなと思うのですが、その高い表現力は一見の価値があります。

これはぜひ動いているところを自分の目で見て、感じてみてください。

きっと、なにかインスピレーションが得られると思います。

ぜひチェックしてみてください。

リンク:

RAYLIGHT

share

follow us in feedly

search

search

monthly

sponsor

social