WebGL を利用しサイト構成の隅々まで工夫を凝らした Patrick Heng 氏のポートフォリオサイト
WebGL だけに頼らないサイト作り
今回ご紹介するのは、若い才能が輝く Patrick Heng さんのポートフォリオサイトです。
彼の作品はいずれもデザインセンスあふれるものばかりで、見た目にもかっこいいものが多いですね。そして、それらを並べたこのポートフォリオサイトも、非常にセンスのある素晴らしい仕上がりになっています。
サイト全体の構成にもかなり工夫が凝らされていて、WebGL だけに頼らない、素敵なサイトになっていると思います。
スクロールに連動したコンテンツ
今回のサイトはページを開くと不思議な波紋のような模様と一緒に、画面の中央に柔らかい、波打つような動きをする球体が浮遊しているシーンが登場します。
この画面の中央に浮かんでいる球体には、彼の作った作品やサイトの様子をキャプチャした画像が、テクスチャとして貼り付けられるようになっているみたいですね。
まるでふわふわと水の中を漂っているかのようなその動きが、周囲にある波紋模様と合わさってなんとも言えない癒やし空間を演出しています。
画面の左側には、ルーラーのような数字と目盛がうっすらと見えていますね。
画面をスクロールすると、このルーラー部分がスクロールに連動して動きながら、階層を移動することができるようになっています。
それぞれの階層がひとつの作品、あるいはひとつのサイトと紐付いており、画面の中心にあるふわふわ球体上のテクスチャも、それに連動して変化します。
スクロールすることで画面自体がスクロールすることはなく、レンダリングされているモデルに対してのみ変化が起こるわけですね。
浮かんでいる球体部分がリンクの代わりになっていて、そこをクリックすると、該当するサイトや作品へとジャンプすることができます。
掲載されているサイトには、上の画像にあるように小さな作品を詰めあわせて並べている、いかにも Lab という感じのページもあります。
彼の場合は three.js をベースに作品を作っていることが多いようですが、中には Pixi.js などを利用した作品もあるようです。
その他のサイトやデモは、一点もののデモ作品という感じになっていて、どれもなかなかの完成度です。
二種類あるサウンドビジュアライザは、いずれもワイヤーフレームがメインテーマのようですが、見た目が全然違っていて面白いですね。
サウンドを利用したデモや、最後のキャプチャ画像にあるようなムービーに対して WebGL でエフェクトを追加するデモなど、ビジュアルだけにこだわらない、柔軟な発想が彼の大きな武器なのかもしれません。
見た目や機能性といった意味でのデザインセンスにも光るものを感じさせるところがありますし、これからもたくさんのいい作品を生み出していってくれそうな気配がありますよね。
私はあまりかっこいい作品とか作れないので、とても感心させられました。
全体的な印象として、とてもクオリティの高いウェブサイトに仕上がっています。WebGL だけに頼ることなく、サイト全体としてのまとまりも素晴らしいサイトとなっています。
ぜひチェックしてみてください。