経験したことのないコンテンツとの一体感！ シームレスに WebGL を利用した演出を取り入れている Locomotive のウェブサイト
思いついたからと言って気軽できるモノじゃない
今回ご紹介するのは、Locomotive というウェブの制作会社さんのウェブサイトです。
アワードなどでも多数の受賞歴を持つエージェンシーなので、知っているひとも多いかもしれませんね。
今回のサイトでは、WebGL はもちろん使われているのですが、一般的な、比較的よく見受けられる WebGL の使い方とは、若干方向性の異なる活用事例を見ることができます。
簡単に真似できるようなレベルのものではないですねこれ……
リンク：
Locomotive — Montreal Web Agency
インタラクティブな WebGL の使い方の一つの解
今回のサイトでは、WebGL のレンダリング結果は「あくまでもコンテンツの一部」としてユーザーの目に飛び込んできます。
これは、WebGL がウェブサイトと「一体になっている状態」とでも言いましょうか…… しっかり主張はしてくるのですが、かといって、WebGL だけでコンテンツが成立しているわけでもありません。
何を言っているのかわからないかもしれませんが、私もだんだんわからなくなってきました（正直者）
DOM も WebGL もヌルヌル動きます。
まるでウェブサイト上に「普通に画像を置く」ような自然さで、WebGL を使っている感じが、今回のサイトにはあるように感じられます。
これは一見簡単なようで、実に難しいことだというのは、WebGL で実装を行った経験があれば、容易に想像ができるのではないでしょうか。
あえて、WebGL だけを切り出してデモのように実行するのではなく、コンテンツを構成するグラフィカルな要素のひとつとして、シームレスに WebGL を使っていて、本当にすごいです。
部分的に、ひとつやふたつのそういった WebGL のパーツがある、というのはまあよくあるというか、それほど珍しいことではないのかもしれません。
しかし今回のサイトの場合は、終始そういう感じでデザインが組まれていて、なかには「マウスカーソルをホバーさせるとなにも無いところに突然 WebGL のジオメトリが出てくる」みたいな部分もあります。
このようなサイトを実際に作るためには、ウェブデザイナーさんが「WebGL の特性を理解して三次元的にコンテンツを配置する意味」を知っている必要があるように思うのですが……
そのような「あるひとつの完成形」へと至る、その足がかりのようなサイトですね……
なんとなく、最初から最後までべた褒めしたような感じになってしまいましたが、WebGL を使っていない部分も含めて、非常にインタラクティブ性の高い見事なフロントエンドの実装になっていると思います。
代償というわけじゃないですが、若干重いかなと感じさせるような瞬間も一部には見受けられます。
とは言え、ここまでしっかりコンテンツと WebGL がシームレスに連携して成り立っているケースは、本当に珍しいと思います。すごく、感動しました。
ぜひチェックしてみてください。
