フォトリアルな風合いの不思議な WebGL 実装がおもしろい Max Milkin さんのポートフォリオサイト
まるで動く実写映像
今回ご紹介するのは Max Milkin さんというウェブのフロントエンドでデベロッパーとして活動している方のポートフォリオです。
デザインや、あるいは 3D にも造形の深い方なのでしょうか。すごく個性的なポートフォリオサイトに仕上がっていてなんともかっこいいですね。
トップページの冒頭、キービジュアルにあたる部分は実写風の WebGL 実装になっています。
リンク：
Max Milkin · Creative Frontend Developer
もちろんよく見たら CG とわかります
今回のサイトの冒頭、トップページ部分に実装されている WebGL のビューは、それをスクショした結果だけを見ると普通に実写シーンのように見えるかもしれませんね。
ただ、このシーンは WebGL によって描かれるリアルタイムグラフィックスになっており、カーソルを動かしてやると視線が微妙に動きます。
目が CG に慣れていないひとだと最初はちょっとギョッとするというか、普通に驚いてしまうかもしれません。
タネ明かしというわけではありませんが、この WebGL 実装はおそらく実写の写真を上手にテクスチャとして貼り付けている感じだと思います。
もしかしたら、最近では実写と見まごうような CG を作る方法もあったりするので、現物を撮影した写真というよりはフォトリアルな CG を元にしたワークフローを駆使したケースの可能性もありますね。
いずれにしても、まるで現実の空間がウェブ上に再現されたような、妙に生々しい質感があっておもしろいです。
その他、サイト内ではアルファベットの文字がバラバラに動くような演出がいくつか見受けられます。
全体的なスタイリングのトーンにも統一したルールがあるように見受けられますし、王道的な部分と奇抜な見せ方とが上手に組み合わされているように感じました。
WebGL の使い方は徹底してフォトリアル寄りのテクスチャを駆使した 3D 表現という感じで、派手さこそないですが堅実でしっかりとした実装だと思います。
今回のサイトの冒頭のシーン、なにかこう、絵画で言えば静物画のような不思議な風合いを持っていますよね。
インタラクティブに動くのに、静止画や静物画のようなしっとりとした質感があってなんかそのギャップというか組み合わせの異質感が個人的にはすごく興味深く感じました。
スクリーンショットこそ撮りませんでしたが、平面的なエフェクトなども駆使されており、全体的に丁寧に作り込まれている印象を受けました。
ぜひチェックしてみてください。
