滑らかな流体表現と高品質な CG シーンを組み合わせたハイエンド WebGL 実装がおもしろい Hatom のウェブサイト

doxas : 2024-11-18 12:24:56

レベルの高い WebGL 実装

今回ご紹介するのは Hatom という暗号資産関連のプロジェクトのウェブサイトです。

プロジェクトの内容は正直あまりよくわかっていませんが、少なくとも、WebGL 実装としてはかなりレベルが高いので、それだけでも一見の価値があると思います。

ポストエフェクトを駆使した画作りとして、かなり参考になりそうです。

今回のサイトでは多くのシーンで WebGL を用いた高品質な CG を描画しています。

インタラクティブ性も考慮されていますし、WebGL 実装という意味ではかなり手の込んだ事例と言って差し支えないと思います。

どのような場面でも共通するインタラクションとしては、カーソルの動きに応じた流体表現が挙げられます。

この流体表現は、模様がそこに発生するという側面があったりもしますが、どちらかというと UV を歪める系のエフェクトという感じがします。つまり、見ているシーンがカーソルの動きに応じて歪む、という感じですね。

滑らかな流体表現だけでなく、いろいろなポストエフェクトを用いた表現が組み込まれており、本当にビジュアルはこだわって作られていると感じます。

マウスボタンの押し込み＋ホールドで発生するエフェクトも、電脳空間を見ているかのような見た目になったり、アブストラクトな見た目になったり、バリエーションも豊富でおもしろいです。

サイト全体がスクロール操作に応じて進行するようになっており、スクロールするたびに徐々に世界に変化が起こります。

最初は卵だったものが徐々に割れていき、溢れ出す光のまばゆい輝きの中から何かが羽化する…… というようなストーリー性を感じる演出も出てきたりします。

こういった手の込んだ仕込みは作るのも大変そうな感じがしますし、なによりエフェクトと上手に組み合わせて CG のシーンが作られており、レベルが高いなと感じました。

暗号資産関連のプロジェクトでは、公式サイトを WebGL 実装でド派手に演出すること自体はけして珍しくはありません。

しかしよく考えてみると、どうしてみんなそういうド派手なウェブサイトにしてしまうんでしょうね？　やはりコミュニティを大きくしたり、あるいは事業に協力してくれるパートナーを見つけたりといったことを考慮すると、自然とこういうサイトになってしまうということなんですかね……

コンテキストはどうあれ、少なくとも今回のサイトは WebGL 実装としてはレベルがかなり高い方に分類されると思います。

ポストエフェクトも見事ですが、それだけに頼らない、細かい作り込みが多く見受けられる見事な実装例だと思います。