炎エフェクトとドクロが印象的! WebGL を大胆に使ったハイエンドな Yoichi Kobayashi さんのポートフォリオサイト!
エフェクトてんこ盛りのハイエンド実装
今回ご紹介するのは、TSUMIKI INC. 所属、日本の three.js の使い手 Yoichi Kobayashi さんのポートフォリオサイトです。
以前から、氏のポートフォリオ上では three.js を利用した様々なデモ実装を見ることができたのですが、今回は Vue.js を利用して全面的にリニューアルされた形みたいです。
サイト全体が WebGL を余すところなく活用しており、その完成度はここ最近見かけた WebGL 実装のなかでも群を抜いて高いです。
これはすごい……
リンク:
スクロール連動のエフェクト発動にしびれる
今回のサイトはいわゆる SPA で、縦にスクロールしながらコンテンツを閲覧していく形になっています。
最初のロードの部分から迫力満点なので、SPA の比較的シンプルな構成ながら非常に見応えのあるサイトになっていますね。
ロードが完了すると最初に暗闇からドクロが浮かび上がってくるような演出があるのですが、ここからもう既に大迫力のかっこよさです。
スクリーンショットではちょっとわかりにくいかもしれないですが、炎の中で叫ぶように口を開くドクロがとてもかっこよく描き出されます。
半分想像ですが、たぶん今回のサイトの場合ノイズはプロシージャルではなくて画像由来のものを使っていると思います。しかしそのノイズの使い方が非常に上手なので、演出が単調になることなく見事に表現に転化されていますね。
背景の部分や炎のエフェクトなど、様々な部分でノイズを活用しているのですが動作がめちゃくちゃ軽快なのが素晴らしいですね。
プロシージャルにノイズを作るパターンだとこの軽量さは恐らくちょっとむずかしいんじゃないかなと思います。
そして圧巻なのが、Works を紹介するコンテンツの中盤あたり。
ここでは事例が切り替わるたびに、たなびく旗が炎に包まれるような演出が発生するのですが、これが本当に……とにかくめちゃくちゃいいですね。
これはたぶん、海外でパクるひとたちが出てくるんじゃないかな……
それぐらい、インパクトのある演出に仕上がっていると思います。
ここでもノイズが使われていますが、動作は非常にスムーズです。
文字の描画もノイズで揺らぐように動きます。芸が細かい。
Yoichi Kobayashi さんは、過去には WebGL スクールのプラスワン講義で講師を務めてくださったこともある方で、特に three.js を利用した様々な表現のバリエーションに関しては突出した技術力を持っていると思います。
今回のリニューアルでは、Vue.js と組み合わせて UI/UX の部分も磨き上げられており、本当にフロントエンドの実装として参考にできる部分が多く盛り込まれているサイトだと思います。
とてもステキな演出も、単純に見ていて楽しいです。
ぜひチェックしてみてください。