スクエアを活用したデザインの 3D キャラクターや造形がおもしろい Byte Trading のウェブサイト

doxas : 2022-12-06 13:46:59

徹底したコンセプトで描く世界

今回ご紹介するのは、Byte Trading といういわゆる暗号資産系の事業を展開している企業のウェブサイトです。

日本でも、あるいは欧米でも同じだと思いますが、暗号資産系の話はあまり好きではないとか信用ならないみたいなイメージがある方が多いかなと思います。

今回はその事業の内容やビジネスモデル云々はいったん置いておき、あくまでも WebGL の実装について見ていけたらと思います。

今回のサイトはほぼすべてのコンテンツが 3D シーンをベースにした絵作りを行っています。

どこかアメリカっぽい空気感の街並みをまるっと 3D 化したような世界観になっていて、かなり徹底してテーマというか、見た目のコンセプトが揃えられている感じがします。

テーマがしっかりしているので、こういう感じのビジュアルが好きなひとはすごくハマるウェブサイトなんじゃないかなと思います。

この 3D シーンの中央にあるビルが Byte Trading の社屋、みたいな感じに（この 3D 世界のなかでは）設定されているようで、今回のサイトを順に読み進めていくと、どんどんビルの上のほうに向かって場面が転換していきます。

フォトリアルな感じの作例だと、オブジェクトの陰影や地面に落ちる影などはベイク（あらかじめテクスチャに陰影を焼き込んでおくこと）することが多いですが、今回のサイトの場合はビジュアルの方向性的にあまりベイクは使っていないみたいですね。

それが逆にいい味付けとして機能しているのかなと思います。

ドロップシャドウ、つまり床や壁に対して落ちる影というのはリアルタイム系の CG では描画負荷が高くなったりしてボトルネックになりやすいのですが、影を生成するためのシャドウマップの解像度を落とすことで負荷が下がります。

普通だと、シャドウマップの解像度を下げれば下げるほど影の解像度も落ち、ガビガビ・トゲトゲした影になってしまうのでなんとかそれを避けようとすることが多いです。

しかし今回のサイトの場合、そんな低解像度な影も逆に雰囲気にマッチしているように見えてしまうような場面もあり、なんとも言えない不思議な世界観になっているなと思います。

登場するキャラクターの外見的な特徴や、そのモーションなども非常に多彩で、とにかく描き出されるシーンそれぞれにエモーショナルな雰囲気があります。

アンチエイリアスが掛かっていなかったり、影の解像度が低かったりするのも、なんとなくむしろ味付けとしてアリなのではと思わせてくれるような独特な空気感があります。