同じテーマの中にも異なる質感で変化を演出! Nojima Kosuke さんのポートフォリオサイト

doxas : 2018-06-22 13:57:08

オリジナルのシェーダマテリアルで演出

今回ご紹介するのは、日本人のフロントエンド・デベロッパーでありデザイナーでもある Nojima Kosuke さんのポートフォリオサイトです。

今回のサイトはまだまだ「できたて」という感じですが、既存の three.js のマテリアルをそのまま使うのではなく、独自にシェーダを記述したマテリアルを使って表現力を高めている WebGL のデモが置かれています。

デザインから実装までをひとりですべて手がけたということみたいですが、シンプルにまとまった、キレイなサイトに仕上がっています。

音に反応するビジュアライザにも挑戦

今回のサイトの持ち主である Nojima Kosuke さん、実は WebGL スクールの過去の受講者のひとりです。

スクールの受講を通じて、もちろん何度かやりとりを交わしたことがあるのですが、この際、いっそ正直に書いてしまうと、当時の Nojima さんはなかなか自分の技術に自信が持てずに必要以上に自分を低く見てしまうようなところがありました。

スクール講師として、実は当時、結構心配していたんですよね……

WebGL はどうしてもハイレベルな実装ばかりが世界中でポンポン発表されるので、私自身もそうなんですけども、自分に自信が持てなくなってしまうことが多いのかなと思います。

しかし、今回ご紹介するポートフォリオサイトでは、自分なりにシェーダを実装し、インタクションやアニメーションにもこだわったサイトづくりがなされていて、本当に感激しました。

画面の左側の部分には、彼のアバター的な存在で Twitter のアイコンにもなっているちょっと眠そうな目のような形をした、丸いボール状のモデルが描かれます。

この左側のエリアはクリッカブルになっていて、クリックすると、アニメーションと共にシェーダが変化するようになっていて、テーマカラーと独自のシェーダを利用したマテリアルがガラッと変わるようになっています。

ノイズを上手に利用した表現が使われていて、見た目にも鮮やかに、シンプルながらとても印象的な質感を実現していると思います。

流れるようなグラデーションが美しいもの、メタボール的な表現が面白いものなど、とても工夫が凝らされています。

また、ちょっと件数としては少ないのですが Sketch のページには WebRTC を利用してマイクの入力を取っている音声データの可視化デモなども置かれています。

デモを実行するときは、マイクへのアクセスを問われますので、許可してあげてみてください。

平面的に並んだパーティクルが、リアルタイムな音声入力に反応してインタラクティブに動く様子は、ここからさらに発展させることで面白い効果を生むのではと思わず感じさせてくれるような、そんな作品になっていると思います。

私の開催している WebGL スクールでは、WebGL の API の単純な使い方だけでなく、それを自在に操るための数学の知識やシェーダの知識などを幅広く扱います。

講義の開催中の期間だけでは、どうしても、一般的なフロントエンドの実装内容とはかけ離れた考え方や知識が多くなりますし、短時間で理解するのが難しい概念も多く登場します。

講師の立場としては、諦めずに継続して取り組むことをできるだけ伝えるということしか、できないのですよね……

それは講師としてはすごく歯がゆいことでもあり、実は結構、受講者さんたちのその後については、いつも(実装で困っていないか)心配ですし、気になってしまいます。

でもだからこそ、今回のポートフォリオサイトを通じて WebGL と諦めずに向き合ってくれているのを知ることができ、私自身もとても勇気づけられましたし、同時にとても嬉しかったです。

ポートフォリオサイトとしては、まだまだこれから進化していきそうな、本当にスタートラインという感じのサイトですが、シンプルにうまくまとめられていると思います。

ぜひチェックしてみてください。

リンク:

FAB2

share

follow us in feedly

search

search

monthly

sponsor

social