本当にさりげない粋な WebGL 実装がいい感じ! フランスのデザインスタジオ制作のウェブサイト

doxas : 2016-06-11 12:40:21

フランスのデザインスタジオのサイト

今回ご紹介するのはフランスのスタートアップなどを支援する、デザインスタジオのウェブサイトです。

デザインが主体の組織だけあって、WebGL を使っていない部分にも、とてもここちの良い雰囲気がちりばめられたサイトですね。

WebGL 実装部分は非常にさり気なく、しかもたったひとつだけ公開されています。

WebGL を中心にしたサイトではなくても、ちょっと刺激的なワンポイントとして非常に上手に WebGL を活用できていると感じましたのでご紹介します。

アクセントとしての WebGL

このサイトは WebGL をテーマにしたサイトなので、どうしても WebGL を全面に押し出した作品やサイトを紹介することが多くなってしまいがちです。

今回ご紹介するサイトは、そういった中ではちょっと異質というか、さり気なく使われている WebGL の使い方が、これからの WebGL のあり方のひとつの答えのようにも感じられました。

ウェブサイトはあくまでもこれまでの技術を利用した内容になっていて、ワンポイントのアクセントとして、さり気なく WebGL が使われています。

上の2枚の画像は、WebGL を使わずに作られている部分です。

ちょっとしたアニメーションや色の使い方など、とても絶妙な感じがします。私には逆立ちしても作れないですな。

画面の右上のほうにコンテンツを移動するためのリンクが置かれており、その中のひとつを選択すると、WebGL を利用したページに行くことができます。

そのページでは、キューブ環境マッピングを利用した、ガラス玉が浮遊しているような、不思議なシーンを見ることができます。

なんとなく、パッと見た印象は浮遊しているガラス玉のようなオブジェクトだけが WebGL で描画されているようにも見えます。

実際には、背景の女の子の映った風景部分も、WebGL で描かれていますね。

大きめのキューブにテクスチャをマッピングして、三次元空間上のオブジェクトとして描いています。

本当にキューブなのこれ? と感じる方もいるかもしれませんが、マウスを大きく画面の端に向かって動かして、微妙にカメラの角度を変えてみると、キューブの中にいることがわかりやすいかもしれません。

画面の左半分をよく見ると、箱の中にいるのがわかるかな?

今回のウェブサイトはあまり規模も大きくなく、シンプルで小さくまとまったウェブサイトとなっています。

そんな小さなウェブサイトのなかに、さり気なく利用されている WebGL がちょっと目を引くアクセントになっており、とてもサイトの雰囲気にも合っているなと感じました。

ウェブにおける表現では、なにもガチガチの WebGL 実装ばかりがもてはやされるわけではないでしょう。むしろ、今回のサイトのようなさりげない利用方法のほうが、実は WebGL らしいとも言えるのかもしれません。

あまり派手な実装ではありませんが、興味のある方はぜひご覧になってみてください。

リンク:

Calmtech Design

share

follow us in feedly

search

search

monthly

sponsor

social