フル 3D で作られた小さな島を舞台にスクロール連動型で見せる Maxime Guillon さんのポートフォリオサイト

doxas : 2025-03-13 12:46:54

とても個性的なポートフォリオ

今回ご紹介するのは、クリエイティブ・デベロッパーとして活動されている Maxime Guillon さんのポートフォリオサイトです。

全編が 3D シーンで構成されたポートフォリオサイトとなっており、おそらくですが、その 3D モデル自体もご自身で作られたものなのかなと想像します。

スクロールに連動してカメラが動く、ストーリー仕立てのような感じになっています。

今回のサイトは全体が 3D シーンなので、それだけを聞くと 3D で重いサイトになってしまっているのかなと想像してしまう方もいらっしゃるかもしれません。

しかし今回のサイトは 3D モデルデータをかなり軽量化している感じがあり、最初にシーンが表示されるまでにほとんど待たされることはありません。

そのあたりは結構ロード時間にもこだわって作られているのかもしれません。実際、3D シーン内のテクスチャはかなり解像度が低いので、そこは速度を優先しているんじゃないかなと思います。

今回のサイトはスクロールに連動してシーンが自動的に進行していくタイプです。

あらかじめ決められたカメラワークの軌道があり、スクロールすることでその上を滑るように進んでいく感じですね。

島の上に建てられた一軒家の、あらゆる空間を活用してさまざまなオブジェクトが配置されており、それをなぞるようにカメラがスイスイと進行していきます。

途中まで進めると、空中に文字が浮いているところとかもあって、情報量自体は結構多いことがわかってきます。

さらにカメラがどんどん進んで屋根裏に行くくらいになると、シェーダを使った 2D エフェクトが動いているディスプレイがあったり、アニメーションするパーティクルが表示されていたり……

結構芸が細かいというか、いろんな部分に工夫が見られる感じがしますね。

たぶん、Bruno simon さんの Three.js Journey をお手本にしているんだと思います。

普段から WebGL で開発されている方にはもうおなじみの話だとは思いますが、3D データで容量を食うのはほとんどがテクスチャです。

頂点情報などに比べると、圧倒的にボトルネックになりやすいのがテクスチャなんですよね。

今回のサイトでは軽量化をとことん突き詰めていった結果、やや劣化した JPEG のような、低解像度な質感が表に出てきてしまっている部分があります。

これはもうトレードオフなのでなんらか方針を決めて、割り切って作るしかないところがあり、今回のケースは軽量化を優先したということなのだと思います。