質の高い 3D シーンを豪華に組み合わせて雰囲気たっぷりに演出した Merouane Bali さんのポートフォリオサイト
3D モデルを多用したリッチな表現
今回ご紹介するのはウェブのフロントエンドの開発者として活動している Merouane Bali さんのポートフォリオサイトです。
WebGL でガッツリと 3D シーンを作り込んでおり、いい意味でかなりこだわりの強さを感じさせる仕上がりになっています。
若干負荷は高めに設定されていますが、軽量化するオプションも同時に提供されています。
リンク：
コンテンツの量もそれなりに多い
今回のサイトでは大量の 3D モデルを利用していますが、その割にはローディングはかなり高速な感じがします。
ある程度使い回せる部分もありそうなので、そういったところも含めてかなり工夫が凝らされているのかなという想像が働きます。
また 3D シーンの作り方が巧みなので、3D モデルの品質に頼りすぎない、見せ方としてのうまさみたいなところもあるんだろうなと思います。
この俯瞰のシーンを見ても、なんとなく今回のサイトの雰囲気が伝わるのではないでしょうか。
俯瞰の視点となる状態をベースに、そこから各セクションを選択することで下層ページのようにそれらがクローズアップする仕組みです。
カメラが引いた状態の俯瞰視点では各セクションを象徴するようなオブジェクトのみが描かれている形ですが、選択したあとに描かれるセクション詳細では、より大量のオブエジェクトが追加で登場するようなものもあります。
画面の左下にはクオリティを犠牲に軽量化するためのオプションなども配置されており、なかなか手が込んでいます。
とはいえ、描画しないといけないオブジェクトの絶対数が多いため、全体的に負荷は高めの事例といえると思います。
おそらく開発している時点で若干負荷が高いことは制作者も理解していて、それで軽量化のオプションを用意した部分もあったのかもしれないですね。
結構コンテンツの量も多くて見応えもありますので、負荷が気になる場合は軽量モードを試してみるのもよいかもしれません。
しっかりとした世界観を持ち、それを独自の技術でウェブサイトという形に整理した見事なポートフォリオサイトだと思います。
反面、すべてのセクション（下層ページ）に遷移する際になにかしらのアニメーションやトランジションが発生するので、サクサクと閲覧していくという感じの体験ではありません。そこは最初から、割り切って作っているのだと思います。
ストーリー性のある各種演出はなかなかに見事なので、そういった部分はかなり参考にできそうです。
ぜひチェックしてみてください。
