墨が落ちて広がるようなシーン遷移も見事な WebGL 製ポートフォリオ BLACKOUT がすごい
海外でも話題沸騰
今回ご紹介するのは、日本人の方が作者のポートフォリオサイトです。
作者はホムンクルスに在籍するフロントエンド・デベロッパーの @mmmmusasabi さん。Twitter での発信などはほとんど英語なので、日本国内よりもむしろ海外の WebGL 勢のほうが知っている人が多いかもしれません。
ホムンクルスと言えばその制作物の多くに WebGL を導入してきた実績のある制作会社さんですが、今回のポートフォリオサイトも、それらの制作実績と見比べても引けを取らない、高い完成度に仕上がっていると思います。
シームレスに WebGL 部分をつなぎこんだシーン遷移が秀逸
ひとくちに WebGL を使っている作品と言っても、最近では主に Pixi.js を利用した二次元的な表現が多く見られるようになってきていたり、様々なトレンドがあるように感じています。
今回のポートフォリオはそういったトレンドにあまり左右されないような、どちらかというと制作者個人のセンスや感性が投影された仕上がりになっているように思います。
ページのロードが完了すると、今回のポートフォリオのタイトルでもある「BLACKOUT」を連想させるような演出を見ることができます。
インクというよりは、どちらかというと墨のような感じの質感が非常に面白いと思います。
静止画で見るとその魅力がうまく伝わらないのですが、アニメーションする様子は非常にスムーズですので、ぜひ実際に作品をご覧いただくことをおすすめします。
また、今回のサイトの非常に優れた点として個人的に感心してしまったのが、そのシームレスなシーン遷移のつなぎ込みです。
WebGL を用いたビジュアル部分と、DOM を中心にしたいわゆる普通のウェブページの表現との間を、絶妙なタイミングと自然なシーン遷移で繋いでいます。こういうのはこだわりを持って作成していないとたどり着けない境地なんじゃないかなあと思いました。
ポートフォリオサイトという形なので、もちろん作品も掲載されています。
いわゆるオーディオビジュアライズ系の作品で、それぞれに「Sphere」や「Ring」などのテーマになっている形状が使われています。
ここでもやはり墨のようなシーン遷移が印象的。
オーディオビジュアライザ作品なので、シーンの中にあるオブジェクトがサウンドに反応する様子を鑑賞して楽しむのが正しいとは思いつつも……
個人的にはオブジェクトそのものよりも、背景の描画や、シーン全体に適用されているポストエフェクトのほうが気になりました。
たとえば上で紹介したピンク色の背景のキャプチャ画像は「RING」のものですが、リングの背景に描かれている模様や、シーン全体に掛かっているノイズをベースにしたポストエフェクトなど、かなり工夫の凝らされた演出になっていると思います。
また、スペースキーを押下することによってシーン全体の色合いを変更することができたりと、ただ単にオブジェクトを描画するだけに留まらない、様々な楽しみ方ができるようになっているのもいいですね。
よーく観察してみるとまるで手描きしたかのようにワイヤーフレームが歪んでいるのがわかる。
ときにはグラデーションを、ときにはパリッとエッジの利いた配色を……といった具合に、それぞれの作品ごとに表現にも統一感があり、しっかりと表情の異なる作品に仕上げているのが素晴らしいと思います。
また、オブジェクトを手書き風の歪んだラインで表現するといったアイデアは、私のような堅い頭では到底思いつかない表現で、本当に驚きました。
すごく個人的な話になってしまうのですが、WebGL は習得が難しいジャンルではありますが、かといって、技術的に使いこなせるだけでは到達することのできないセンスや表現の世界っていうのがあるように日々感じています。
今回のポートフォリオサイトは、技術的にも興味深いところがたくさんありつつ、しかしそれらに甘んじることなく、表現としての面白さにもたくさんの工夫が込められていると思います。
ぜひチェックしてみてください。
