「Sketchfab」車の色変えコンテンツを作ってみました。

こんにちは、チャリセです。
今回はSketchfabのViewerAPIを使って車の色を変更できるコンテンツを作ってみたのでご紹介したいと思います。

その前に、Sketchfabというサービスはご存じでしょうか？
Sketchfabは3D、VR、ARコンテンツを公開、共有、売買するためのプラットフォームです。
3Dモデルをウェブ上で表示することやモバイルブラウザ、デスクトップブラウザ、バーチャル・リアリティヘッドセットで閲覧ができるWebGLとWebVRを基にしたビューアを提供しています。
この数年WebGL技術が急激に発展していて、アプリをインストールしなくてもインタネットさえあればどこからでもアクセスできるブラウザベースコンテンツやアプリの開発や公開がものすごく楽になりました。

SketchfabもWebGLの一つで自分で作った３Dデータをwebブラウザ上で簡単に公開ができたり、また他人の作った3Dデータを見ることができます。
・Webブラウザ上で3Dデータを360度閲覧できたり、・ユーザー間で３Dデータを共有できたり。
・３DデータをWebXR（VR、AR）で体験することもできます。
・さらに、ViewerAPIを使えば、Sketchfabの3Dビューアの上でWebアプリを構築することができます。
　基本的にJavascript を使ってビューアの制御します。

今回は社内にある車の３DモデルデータをSketchfabにアップロードし、環境を整いました。
その後、Sketchfabから埋め込みコード「iframe」を発行しました。
これからはすべてがJavascriptを使ってテクスチャの変更、アニメーション制御、色パターンの変更などを行いますが、
今回は車のデータなので、色変更をしました。もちろん車のタイヤホイールなどの変更も可能です。

プログラムでどうにか色の変更はできたのですが、RGBAで当てた色と実際コンテンツを起動してみたときのいろがかなり違っていました。
その原因を調べてみた結果、基本的にJavascript でPBR色に自分の好きな色を置き換えるだけで、EmissionなどをすべてOffにする必要がありました。

実際できたコンテンツのサンプルは以下のURLより確認できますので、是非一度ご覧ください。

以下のURLからもコンテンツを体験することができます。
https://office-3dcg.net/sketchfab/car_color_change.html
これからアニメーションの制御なども組み込んでいきますので、できたらこちらのブログにて公開していきます。
ご興味のある方は是非ご覧ください。

現在
株式会社チョモランマ
 株式会社シェルパ
 3Dmodeljapan株式会社
ではスタッフを大募集しております！！
Unreal Engine4、AI、プログラミングや建築パースに興味がある方！
ぜひご応募下さい！！
初心者の方、未経験の方やインターンを受けてみたい方々でも大歓迎です！！