たった１つのオブジェクトが描かれるだけなのに強く印象に残る WebGL 実装 Studio Tyrsa のウェブサイト
ダイスが転がるように
今回ご紹介するのは、パリを拠点とするクリエイティブスタジオ Tyrsa のウェブサイトです。
WebGL を用いているとは言っても、その用途はすごく限定的。
いわゆる組織やチームのロゴマーク的な役割を担っているのだと思うのですが、ダイスの 3D オブジェクトが WebGL によって描かれています。
リンク：
いろんな役割があるダイス
今回のサイトはデザインに造形の深い人がどんなふうに見るのか、あるいは捉えるのか、すごく興味があります。
WebGL の開発者の目線でいえば、技術的に難しいことというか、実現することが難しいことというのはほぼ使っていないですね。
画面のスクロールやページの状態に合わせて、オブジェクトが回転したり移動したりするだけです。
スクリーンショットの画面左上、青いダイスが顔をのぞかせているのが見えると思いますが、この部分が WebGL によって描かれている CG になっています。
WebGL を使っていない部分もしっかりと作り込まれており、インタラクティブ性やシームレスなページ遷移など、ウェブサイトとしての要件は卒なく実装されている感じがします。
下層ページの一部では、ダイスがおもむろに動き出して画面の中央にまで出てくるような場面もあります。
CG 的にすごいとか、技術的に難しいことをしているということじゃなく、こんなにシンプルな WebGL 実装なのにサイト内でいろんな役割を果たしていることがすごいですよね。
たとえばこのダイスが一切存在していな状態のウェブサイトを見せられて、どういうふうにダイスの 3D 表現をサイトに落とし込みますか、となったら（もちろん制作にあたってそんな順序では考えないでしょうけれども）これはすごく難しい問いだと思ってしまいます。
とてもおしゃれで、かっこいいです。
WebGL というと、どうしても飛び道具的というか、奇抜なもの・派手なものというのを連想してしまいがちです。
あるいは、シンプルなものであったとしてもポストエフェクト的なものや、背景の一部として描かれるものがやっぱり事例としては多いと思うんですよね。あるいはやたらウニョウニョ動くとか……
その点、今回のサイトの WebGL 実装って、3D モデルの元データさえあれば three.js などを用いてこういうふうにサイト内に配置すること自体はだいぶ簡単なことなので、ほんとに難しいことなにもやってないんですよね。
それなのに、こんなに存在感や存在意義があるというのはすごいことだと思いました。
ぜひチェックしてみてください。
