
フォトリアルな質感と臨場感のあるポストエフェクトが美しい Virtual Car Showroom がおもしろい
自動車系は WebGL の十八番
今回ご紹介するのは Othrelife が実験作などを一般に公開している Labs の作品、Virtual Car Showroom です。
いわゆる自動車のカスタマイザの実験作的なものとしてここでは公開してくださっているのかなと想像しますが、WebGL のユースケースとしては非常に一般的と言いますか……
WebGL の黎明期から、この手の自動車のカスタマイザはたくさん実例があります。今回の一作も、とても高い質感で見事に美しい CG を描き出しています。
リンク:
Otherlife Labs | Virtual Car Showroom
技術記事も公開中
今回のサイトの実装は、ベースとしては three.js を使っているみたいです。
それを独自に拡張するなどして今回のサイトの実装は動いているようですが、そのあたりの技術的な詳細は、サイト内からもリンクされている CASE STUDY のページで解説記事が書かれています。
そういった背景などをより詳しく知りたい場合は、記事のほうも(英語ですが)見てみるとよいかもしれません。
ご覧のとおり、ビジュアルはかなりフォトリアル系の質感です。
この手のスポーツカーなどを主役に据えた WebGL 実装は本当に枚挙にいとまがないというかたくさん過去にも実例がありますが、今回のサイトもかなり気合が入っていますね。
カスタムできる項目はなかなか多いですし、車の内装なども見ることができるようになっています。
ライトの明かりが床に映り込んで光っていたりする部分は、先程も少し触れた three.js を独自に拡張した実装で表現しているらしいです。
そのほか、HDR 対応を行ったり、SSAO の実装を行ったり、独自の工夫がいろいろと取り入れられているようです。
CASE STUDY の記事ではそれらのエフェクトなどが一切ないスクリーンショットとの比較などもされているので、どういった違いが生まれるのか気になる方は記事を見てみるのもよいでしょう。
何度も同じことを書いてしまいますが、この手の「フォトリアル系の自動車系カスタマイザ WebGL 実装」って本当にたくさん見てきました。
正直に言えば、WebGL で表現できる範囲での質感という意味では、結構むかしの時点でそれなりに最高到達点に近いものはすでに存在していたと思いますし、それと比較して今回の実装が飛び抜けて優れているということは言えないと思います。
ただ、描画の負荷や質感の細かい部分の調整などでやはり個性というものはあり、今回の実装は負荷は度外視して質感重視で表現しているのかなという感じがあります。
ハイクオリティのモードでは本当にきれいな CG を見ることができます。
ぜひチェックしてみてください。