本格的なカーモデルの WebGL 作品を見てみたいならやっぱりおすすめは Plus 360 Degrees
過去にもハイエンドな作品を輩出した老舗
今回ご紹介するのは、以前にも何度かご紹介したことがある企業なのですが、Plus 360 Degress というドイツに居を構える企業の作った、カーモデルのビジュアライザデモ作品です。
この企業の作るカービューアは毎回レベルがとても高くて、本当に感心させられます。
今回のデモは以前のものと見比べた場合に、ずば抜けてすごいということはないのですが、それでもやはり、世界でも有数の見事なビューアであることは間違いないでしょう。
このクラスのやつが作れれば、楽しいんだろうなあ……
カラーや車種の変更もできる
今回のデモは、以前のデモ作品と同じように複数の車種と、カラーリングの変更等が行えるようになっています。
車種は今回は全部で三種類。
ベンツやマスタングなど、日本でもおなじみのモデルですね。(好きかどうかは別として……)
マウスによるドラッグ操作で視点を自由に動かすことができる他、ホイールによるズーム操作、画面の右下にあるアイコンから表示されるメニューによる操作などが行なえます。
やはり驚くのはそのリアリティ溢れるレンダリング。
ただ今回はちょっと全体的に頂点が少なめのモデルを使っているみたいで、曲線は若干ポリゴン感がありますね。
それでも、映り込みやマテリアルの使い分け、HDR っぽい表現など、基本以上のものがキッチリ押さえられているように見えますね。
画面の右下にあるメニューを引っ張り出してやれば、カラー変更などを行いながら、自分の好きな角度からその美しい描画結果を眺めることができます。
遠巻きに見たらまるで写真みたいです。
パッと見た感じではもしかするとわかりにくいかもしれないですが、ポストエフェクトも使っています。
どのあたりに使われているのか、わかるでしょうか。
私自身もあまり細かいところまで検証したり調査したりしたわけではないのですが、ブルームのポストエフェクトについては掛かっているのがよく見るとわかりますね。
地面の白いラインのところがぼんやり光っている様子とか、妙にリアルです。
別に粗探しとかをしているわけじゃないのですが、ブルームをもう少し観察してみると、縮小バッファを使っていることもわかりますね。
縮小バッファを使った処理というのは、ブルームやブラーなどの比較的重い処理を行う際に、小さい解像度のバッファを用いてポストエフェクト処理を行い、それを最終的なレンダリングに使う際に元の拡大率に戻すような処理のことを言います。
静止画ではちょっとわかりにくいと思うのでぜひ本物のサイトで確認してみてほしいのですが、ベンツのエンブレムの近くとか、きっとわかりやすいと思います。
縮小バッファを使っていることで、若干ですが、ブルームのエッジが見える感じになっています。
WebGL はブラウザ上で動作するため、いわゆるネイティブなゲームアプリケーションなどと違って、推奨環境をユーザー側に求めるのが難しい場合が多いですね。
ですからどうしても、より多くの人に閲覧しやすい実装ということを考えていくと、頂点の数を減らしたり、ポストエフェクトを削減したり、あるいは今回説明した縮小バッファを使ってみたりと、なにかと工夫が必要になります。
今回のデモはけして「軽い」という部類ではないと思いますが、かといって「重い」という感じもあまりしないと思います。(たぶん)
これほどの高いクオリティを維持しながらも、あまり重くならない実装になっている点など、本当に頭が下がる思いです。みなさんもいろいろなところを観察して、自分なりの実装や知識の蓄積に役立ててみてください。
まあそんなことは抜きにしても、単純にとてもかっこいいデモなので、見ているだけでも楽しいです。
ぜひチェックしてみてください。