
美しいエフェクトとシームレスなシーン遷移が高い技術を感じさせる Hashgraph Ventures のウェブサイト
かなり手が込んでいるがトーンは落ち着いている
今回ご紹介するのは Hashgraph Ventures というベンチャーキャピタルのウェブサイトです。
WebGL を使った派手な演出を加えた事例は、マッチする業界とそうでない業界があると思うのですが、VC の分野は結構この手の事例が多い気はします。いやマッチしているのかはわからないですが……
技術的にはすごく作り込みがなされているのですが、全体のトーンが落ち着いているのでただ派手なだけという感じでもなくて味わい深いです。
リンク:
Hashgraph Ventures | AI & Blockchain Venture Capital
シームレスなシーン遷移
今回のサイトの WebGL 実装は、サイト内の背景部分に絶えず存在しているようなタイプです。
ページ遷移の際にも WebGL の描画が止まることはなく、絶えず状況に応じて変化しながら背景を彩り続けます。
トップページのファーストビューのシーンでは、岩の隙間から光が漏れ出す、なんとも幻想的なシーンが描かれます。

スクリーンショットではちょっと伝わりにくいと思いますが、カーソルを動かすと流体エフェクトも発生するようになっています。
暗い海が揺れ波打つ様子も、その水面に映り込む光の様子も描かれており、だいぶ本格的なビジュアルを実現しています。
また、今回のサイトではシーン遷移がシームレスと冒頭にも書いたのですがスクロールしてやるとその一端を見ることができます。

下からせり上がってきたシーンも、もともとあった上半分の側のシーンも動き続けている状態で描画されます。
CG の知識がある人とない人で、こういった2つのシーンが同時に存在している状態に対する意識はもしかしたら違うかもしれませんが、わかりやすく言えば、この手のことをやろうと思ったら負荷は2倍になります。
それぞれのシーンのいずれもしっかり作り込まれているのに、さらにその2つが同時に画面上に描かれるというのはなんともすごいなと感心してしまいます。

GPGPU のような処理からポストエフェクトの処理まで、とにかく CG のテクニックをいくつも組み合わせてリッチなグラフィックでウェブサイトを演出している事例です。
全体の色合いが落ち着いたトーンで、しかも寒色で描かれるのでド派手という感じではないんですよね。ただ、やっていることは結構難しいことばかりですごいです。
あくまで個人的な印象に過ぎませんが、最適化・軽量化も結構しっかり意識して作られているようには感じます。もしかしたら、GPGPU 的な処理とかはフレームレートを落として実行し、負荷が想定以上に高くなりすぎないようにしているかもしれません。
こういう事例はデザイン、あるいはブランディングという意味で本当にそのビジュアル必要でしたか? みたいな気持ちが湧いてしまうことがありますが、とにかく圧倒的な技術力でゴリ押ししてる感じがして本当に驚きますね。
ぜひチェックしてみてください。