
まるで本格的なゲームをプレイしているような没入感を持つ Jérôme Reynet さんの体験型ポートフォリオがすごい
ロードなどやや負荷高いです
今回ご紹介するのは Jérôme Reynet さんというクリエイティブ・デベロッパーの方が公開している、ゲーム型のポートフォリオサイトです。
ポートフォリオサイト、といってもかなり体験やビジュアルに寄った設計になっていて、一見した印象はもうほとんどゲーム作品のような感じに仕上がっています。
ビジュアルは非常に素晴らしいですが、その分、ロードの負荷や初期化に掛かる時間などもかなり高めになっているので、その点はちょっとだけ注意が必要です。
リンク:
Where Worlds Take Shape - Interactive WebGL Portfolio
玉ボケのような効果が美しい
今回のサイトでは、かなり細かくユーザーの環境に応じたカスタムができるようになっています。
レンダリングの品質だけでなく、コントロールについてもキーボードはもとより、タッチ操作が可能になっている他、なんとゲーム用のコントローラーでも操作ができるようになっています。
このあたりは設定画面などから細かくチューニングすることができるようになっており、いずれの操作系統でもコンテンツが破綻しないように、注意深く組み立てられている感じがします。

レンダリング結果は非常に美しく仕上がっていて、物理的なレンズで映像を撮影しているときのような玉ボケっぽい効果など、なかなかリッチです。
わたし個人は、WebGL でゼロからこういった玉ボケ的な効果を実装した経験がないので実装難易度的な部分についてはなんとも言えないのですが、フォーカスが合っている場所とそうでない場所とで絵としての情報量の差が生まれ、すごく没入感のあるグラフィックスになっています。
さらに葉や草などの動きもかなり凝っていて、すごく手が込んでいます。

世界の中にはいろいろなキャラクターや施設があり、探索しながらいろいろな情報に触れられるようになっています。
インベントリという概念があってそこにいろいろ情報が追加されていったり、特定の箇所に足を踏み入れたときに演出が始まったり、本当にゲームのような体験ができますね。
デザインから実装までお一人でされたみたいな感じのことが SNS などには書いてありましたが、表現したいと考えた世界観を妥協なく作り込んだ、そんな印象を受けるポートフォリオサイトとなっています。

こういった 3D シーンで構成されたオープンワールドのような建付けの WebGL 実装はたまに見かけますが、そのクオリティってどうしても(作業量が膨大になることなどが要因で)中途半端になりやすいと思うんですよね。
今回のサイトには本当に妥協することなく作り込んだ、という印象がありますし負荷の高さなどはある程度は仕方ないと割り切っているような気もします。
一方でさまざまなカスタムができるようになっていて、幅広い端末で閲覧できるようにという工夫も感じられますし、本当に驚くことばかりです。
ぜひチェックしてみてください。