大手 PC メーカーの HP が公開しているマイク入力を活用した WebGL ペイントデモがすごい！
HP の本気はすごかった
今回ご紹介するのは、PC メーカーとしては世界でもトップクラスの HP が提供している、WebGL と水彩ペイントソフトとレコーディングソフトを悪魔合体させたようなとんでもないウェブサイトです。
薄型のラップトップとして HP 社が発売しているモデルの、その特設サイトのようですが、インクのような、水彩ペイントのような、独特な質感が随所に WebGL によって描き出されるとても美しいサイトになっています。
また、マイクの入力を受け付けるページがあり、その挙動がほんとにすごいです。
WebRTC と WebGL で音声ペイント
このサイトは、マイク入力ができる端末での閲覧を 強く おすすめします。
というか、そうでないとこの凄さは半分しか理解できません。
WebRTC を使って、ブラウザ上で動作している JavaScript からマイクデバイスを捕捉、さらには、そこからの音声入力をリアルタイムにウェブページへと反映させていくという実装スタイルです。
このようなコンテンツはこれまでにもありました。今回のサイトがすごいのは、そこに組み合わされている美しいビジュアル表現。
WebGL を用いた水彩ペイントのようなその表現は圧巻です。
まずトップページを見れば、そこでいきなり度肝を抜かれます。
このインクのような表現の見事なこと……
Start ボタンのところをマウスでホバーすると、そこにインクが飛び散るような演出があったりして、ほんとにすごいですね。
静止画ではわかりませんが、常にインクが流れるような、もしくはヘラかなにかで伸ばされていくかのような、そんなアニメーションが動いています。
Start ボタンを押すと画面が変わり、今度は録音のための準備のページが出てきます。
このページで、ブラウザ上でマイク入力へのアクセスを求められます。
もしもマイクを備えていない端末であれば、この先を見ることができないのでとてももったいないです。
ぜひマイクをなんとかして有効化してみましょう。
Record と書かれたボタンをクリックするとリアルタイムに録音が始まるのですが、このとき、マイクから収集されるサウンドに応じてリアルタイムにスクリーンが塗り込められていきます……
息を呑むような、そんな美しさがあります。
録音の時間が終わると、今度は完成したビジュアルはそのままに、今しがた録音したばかりの音声が再生されます。
実はこの録音したサウンドの再生中も、微妙に絵のほうに変化が加えられるようになっていて、ここはランダムに、滲みなどの表現が加わるっぽい感じですかね。
最後には、白を基調にしたシンプルなページにぴったりな、白い枠に収まった自分の録音した音声作品が出てきます。
なんかようわからんけど、芸術家になったかのような、そんな気分にさえ、させられるような凄みがありますね。
ほんとにすげえ……
GLSL を利用した、リアルタイムのビジュアル表現の凄さもさることながら、ユーザーの体験に強くフォーカスしたサイト全体の存在感がすごいです。
音声を使ってリアルタイムペイントする、その事自体は、スマートフォンアプリなどを使えばまあ普通にできるものではありますし、現代においてはさして珍しくもないでしょう。
しかしこれがウェブブラウザ上でリアルタイムに動いているのは、本当に驚きますね。技術力という意味での驚きももちろんあるのですが、ユーザーの体験までを含めた、すべての部分にセンスのあるデザインが成されているという点が、個人的には本当に驚きでした。
ビジュアル面でも、また技術力の面でも、本当に素晴らしいサイトだなと思いました。
ぜひチェックしてみてください。
