WebGL 製のハイエンドなポートフォリオサイトで知られる Bruno Simon 氏の技術デモ Woodkid Volcano Robot

doxas : 2021-08-18 14:46:03

ソースコードも公開されている

今回ご紹介するのは、以前に当サイトでも紹介したことのあるまるでゲーム作品のような完成度の高いポートフォリオを公開している Bruno Simon さんが、技術デモとして公開している Woodkid Volcano Robot です。

こちらの作品は Wookid というアーティスト（ミュージシャン）のライブ演出からヒントを得て制作されたもののようで、巨大なロボットが登場する WebGL 作品となっています。

キー入力で操作が可能なほか、どうやらゲーム用のコントローラーで操作することもできるみたいです。

今回のサイトは技術デモ的なウェブサイトなので、ストーリー性やプロモーション的なコンテンツがあるわけではありません。

ただ、作り込みは結構しっかりと行われていて、特に GUI のメニューから操作できる項目の数がとても多くなっています。

まず最初は、キーボードからの操作でいろいろ遊んでみるのがいいでしょう。

画面の左下あたりにガイドが表示されているので、どのキーを押すとインタラクティブな反応があるのかはわかりやすいと思います。

左右に２本ずつ、合計４つ配置されている腕の部分はキーボードのアローキー（矢印キー）で操作できます。

曲げたり、回転させたりしつつ、思い思いのポーズを付けることができます。一方で WASD キーのほうは腰の部分の可動域に干渉することができ、体の向きを変えることができるようになっています。

無骨なデザインのロボットが自由に操作できるだけでも、なんだか楽しい気分になってきます。

さらに、特定のキーを押した際にはロボットをレンダリングする際のマテリアルが変化したりすることもあります。

キーの入力によって自動的にマテリアルが切り替わるだけでなく、画面の右上にある GUI を開いていくと、大量のカスタマイズ用メニューが展開されます。

この項目の量の多さを見ると、CG がいかに多くのパラメータに影響を受けているかがわかりますよね。かなり細かい部分まで調整が可能となっていて、それぞれの効果の違いを観察しながら理解を深める……そんな教材的な使い方もできそうだなと思いました。

CG の画作りがどういった項目の組み合わせによって成り立っているのか、WebGL に興味があるならこういうデモを通じて感触をつかんでみるのもいいかもしれません。

見た目がインタラクティブに変化するので、とてもわかりやすいですしね。

この記事のタイトルにも書いたとおりで、Bruno Simon さんが公開しているポートフォリオサイトは、まるでゲーム作品のような非常に高い完成度のウェブサイトになっていて、もし見たことが無いなら一度訪れてみることをおすすめします。

今回の技術デモも、CG に対して真摯に向き合う丁寧な作り込みが感じられる作品となっています。

ただ単に 3D モデルをポンと配置して描画するだけなら、比較的誰にでも簡単にできますが、それをどう作り込んでいったらより高品質な外見を実現できるのか…… そのヒントがたくさん詰め込まれた実装だと思います。