ランダム家電という面白いコンセプトの製品を紹介する Babylon.js を利用したおもしろ WebGL 実装
製品のコンセプトをそのまま体現
今回ご紹介するのは、ゆらぎかべという名前の製品を紹介するウェブページなのですが、提供しているのは Aug Lab というパナソニックの部門みたいですね。
コチラの製品、その名前のとおり壁がゆらゆら揺らぐというなんとも面白いコンセプトのインスタレーション系製品なのですが、そのサイトにもゆらゆらするような WebGL を利用したビジュアルが採用されています。
製品の特徴をうまく可視化した、なんともオシャレなウェブサイトになっています。
リンク：
Babylon.js で実装されたオリジナリティ溢れる一作
今回のサイトは、背景の部分に壁のような質感の画像が貼り付けられた状態で表示されるのですが……
ゆらぎかべ、という製品のコンセプトそのままに、ウェブサイトの背景の部分もゆらゆらとゆっくり揺れ動きます。
WebGL でこの手の実装を行う場合って、大抵は「１枚の板ポリゴン上でフラグメントシェーダだけでゆらぎを表現」というケースが多いかなと思いますが、今回のサイトは頂点シェーダでおそらくやってるんじゃないかな？
たぶんですけど……
この上の画像を見てください。
思いっきり、布にシワが寄ったような感じの折り目ができているのがわかるでしょうか？
マウスカーソルを動かしてやることで、クッキリとした折り目を発生させることができるようになっています。
この折り目のような表現がほんとに面白くて、ついつい何度もマウスをぐりぐりしちゃいますね……
よーく観察してやると、このシワが寄るような表現も含めて、この背景部分が頂点シェーダで実装されているように見える、と私が感じてしまう意味がわかるのではないでしょうか。
平面的な空間のなかでノイズなどを利用して UV を操作するのとは異なり、今回の場合は実際に Z 方向（奥行き）を変化させたりしてるんじゃないですかね……
細かなメッシュを画面全体を埋め尽くすように配置して、それを頂点単位で動かしてるんじゃないかなと思います。
ウェブサイトの実装には Babylon.js が使われていて、国内のユースケースとしては結構珍しいように感じました。
最近だと結構利用例が増えてきたりするのかな……
今回のサイトの WebGL を使った表現はライブラリがどのようなものであっても簡単に実装できそうな内容ではあるのですが、見た目のユニークさが際立っており、実際の製品との親和性もあってサイト全体としての完成度が非常に高いなと感じました。
ぜひチェックしてみてください。
