ソースコードやブログの記事も公開されている Georgi Nikolov さんの TypeScript 製ポートフォリオサイト
フル 3D で実装された面白いポートフォリオ
今回ご紹介するのは Georgi Nikolov さんのポートフォリオサイトです。
ブルガリア出身で、現在はドイツで活動されているウェブのフロントエンド・デベロッパーさんで、WebGL の作例をこれまでにも多く手掛けています。
今回のポートフォリオサイトは 2022 年に入ってリニューアルされたもののようで、TypeScript と WebGL 2.0 の機能を組み合わせご自身でフルスクラッチで作ってらっしゃるようです。
リンク：
使われている技術に触れたブログ記事も参考になる
今回のサイトはすべてのインターフェースが 3D 空間上に作られていて、いわゆる普通の DOM を使って描画される UI はありません。
三次元空間に置かれたパネル状のオブジェクトは、クリックしていくことでコンテンツが展開されていく階層構造を持っています。
たとえば projects のパネルをクリックしたら西暦が書かれたパネルが画面上に現れ、それらをさらにクリックすることで対応した年度の作例の一覧が表示される、といった感じです。
パネルが展開される際は、ねじれるようなアニメーションやカメラ位置の変化などが起こります。
いわゆる線形な変化ではなく、適度な慣性を感じるイージング処理が行われていて、動きはとてもスムーズで心地よい質感に仕上がっていると思います。
一見するとわかりにくいかもしれないのですが、ホバーエフェクトにノイズが使われていたり、結構演出面もこだわって実装されている箇所が多くありますね。
単純に掲載されている事例も多く、順番に見ていくだけでも楽しめます。
今回のサイトの公開に併せて、実装内容について言及したブログ記事、またサイトのソースコードなども公開されていて、それらを一緒に見てみるとまた見え方が違ってくるかもしれません。
イージング処理やレイキャストを行ってマウスカーソルのホバーを検出する処理などもご自身でフレームワークから自作しているらしく、技術的にもとても面白い作例だと思います。
WebGL 2.0 は最近 iOS Safari などでも一応サポートされた形になりましたので、今後はこういう WebGL 2.0 を前提とした構成のサイトも増えていくかもしれませんね。
近年では、three.js や Pixi.js、Babylon.js などの WebGL を利用するためのライブラリが充実してきていますし、なかなかフルスクラッチで WebGL の実装を作るということ自体が機会としては少ないと思います。
今回のポートフォリオサイトでは、WebGL 2.0 や TypeScript など比較的新しいトピックを上手に取り入れながら、技術的にもかなり挑戦的というか、多くのものを自作しながら技術力を向上させていくストイックさみたいなものを感じました。
私自身も最近は業務で three.js を前提に考えないといけない場合が多いのですが、こういったサイトを拝見するとすごく刺激になりますね。
ぜひチェックしてみてください。
