選択できるオプションの豊富さに驚かされる PlayCanvas 製ロードバイクのカスタマイザがすごい

doxas : 2022-09-27 13:55:24

質感も素晴らしくリアル寄りな表現

今回ご紹介するのは、PlayCanvas で実装されているロードバイクのカスタマイザ実装です。

こちらはあくまでも技術デモとして公開されているもので、実際にカスタムしたあとの機体を購入できるといったものではありませんが、それにしても本当によくできていてすごいですね。

特に驚くのがカスタマイザで操作できるオプションの豊富さです。

ここまで細かく調整できるのは珍しい感じがします。

今回のサイトはあくまでも技術デモなので、一部の項目は「表示はされるものの選択はできない」状態です。

たとえば画面の左上にあるアイコンからバイクの本体（の機種）がズラッと表示されるのですが、そこから別のバイクを選択したりは現状できるようになっておらず、技術デモということもあって今後もそこが拡張されたりはしないのでしょう。

こういう見せ方ができますよ、というデモンストレーションなんだと思いますが、実際に選択はできなくてもこんなふうにインターフェースが作れるよというのは十分伝わってきます。

画面の下のほうにあるアイコンをクリックして表示されるインターフェースは、ほとんどが操作可能です。

バイクのボディ全体に対する質感を変えることができるようになっている他、より細かく、ボディの表面にプリントされている内容をカスタムすることができます。

このプリント内容のカスタマイザ部分が本当にすごいですね。

色、大きさ、位置、さらには影の落ち方などなど……

本当に様々な項目を自由自在に設定できます。まるで HTML 要素に CSS を適用しているかのような感覚が芽生えるほど、本当に詳細で緻密な設定ができます。

また、スクリーンショットを見ても伝わってるんじゃないかなと思うのですが、金属やプラスチック、またシートの部分など、質感がリアルな感じで本物っぽいテイストがとても美しいですね。

さらに、画面の右上にあるアイコンからは背景を変更することもできるのですが……

背景を変更するとより雰囲気が出ると言いますか、ぐっと本物感がアップするような感じがします。

完全な球体を使った天球描画ではなく、地面の部分と球体の部分とを上手に繋いで背景がレンダリングされるようになっていて、とても自然な遠近感を描き出しています。

PlayCanvas は、結構昔からこういった本物っぽい質感を表現する機能が充実していて、今回の実装もそういう意味では納得のクオリティになっています。

ただ、個人的には今回は 3D 表現の部分よりもパラメータを変更するためのインターフェースの実装が本当に見事だなと感じました。

単純に GUI の見た目的なこともそうですが、操作すると即座にそれが 3D シーンに反映され、思わずいろいろこだわりたくなってしまうような気持ちにさせられるほどの作り込みは、一度触ってみる価値があるんじゃないかなと思いました。