サウンドデータやマイクからの入力に反応するインタラクティブ WebGL アートデモ作品 LESI

doxas : 2016-10-17 14:36:30

マイク入力を利用した WebGL 作品

今回ご紹介するのは、WebGL と WebRTC を組み合わせることにより、マイクからの入力を利用した WebGL 描画に対するインタラクションを実現している、なかなか興味深いデモ作品です。

WebGL では JavaScript による実装を行うため、当たり前ですが、JavaScript が持つその他の API との連携が行なえます。

WebRTC を用いる場合は、ウェブカメラやマイクといった外部入力機器の情報を入手できるため、これを WebGL の描画に反映させているわけですね。

もちろん、今回のデモはマイクが備わっていない端末でも普通に実行することができますので、その点は安心して大丈夫です。

不思議な模様がたくさん登場するアートデモ

今回の作品はどちらかというとアート作品としての側面が強いのかなと見ていて感じます。

インタラクションを備えているので、ただ鑑賞するためだけに作られたものではないのでしょうが、その不思議な世界観はなかなか面白いですね。

デフォルトの状態では、ページのロードが完了すると同時に、自動的に BGM が再生されるようになっています。

このサイトのデモ自体は、サウンドに反応するように作られているため、自動的に BGM の再生が始まるとそれに連動してシーンの描画結果も逐一変化していきます。

はじめは真っ暗で何もない空間のように見えますが、サウンドが再生されると徐々にシーンのなかにオブジェクトが増えていきます。

これらの描かれるオブジェクトは、いずれも板ポリゴンにテクスチャを貼り付けただけのもので、立体的な構造を持っているわけではありません。どこか中世の時代のような、あるいは抽象的な図形のような、不思議な世界観が見事に表現されています。

そして、今回のデモはしっかりとインタラクションを考慮して作られています。

閲覧者が起こすことのできるアクションとしては、マウス操作によるものとキーボードからの入力があります。たとえば、デモの実行中にスペースキーを押すと、突然雰囲気が変化します。

かなり引いたところから見てみると、背景の黒い空間がまるでブラックホールかなにかのように、グラデーションの中心の位置だったことがわかりますね。

マウスホイールによる操作でズームイン・アウトが行えるほか、もちろんドラッグ操作でも視点を動かすことが可能となっています。

こうして引いて見てみるとわかるかと思いますが、テクスチャの貼られた板ポリのオブジェクトは、球面の表面にマッピングされるような感じで配置されていくようになっているんですね。

このような球体を利用したオブジェクトの配置を行っているのは、恐らく無限にスクロールすることができるような表現にしたかったからではないかなと、個人的に思いました。

マイク系のデバイスが接続されている状態であれば、ページを開いた直後に、マイクへのアクセスを許可することで、音を使ってデモに干渉することもできるようになります。

通常は BGM の再生に合わせてオブジェクトが配置されていきますが、これがマイクからの入力に依存するようになるわけですね。

今回のデモのようなインタラクションを考慮した実装では、その外部からの入力をどのようなことに利用していくのかによって、その作品の性質や表情が変わってくると思います。

今回の作品の場合はかなり抽象的な表現が多いように感じますので、個人的には、ひとりで閲覧しているときにマイクが使えることの利点はちょっと思いつきませんでした。しかしこれがたとえば多くの人を集めたようなイベント会場であれば、会場の盛り上がりがそのままビジュアルに反映していくはずですので、かなり面白いかもしれません。

WebRTC のマイク入力を利用するデモは実際あんまり数は多くないので、気になる方は参考にしてみるといいでしょう。

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

リンク:

LESI

share

follow us in feedly

search

search

monthly

sponsor

social