Doorで頂点カラーを使ってライティングを表現したかった

Synamonのデザイナーの武藤です。
皆さんはDoorというNTTのサービスをご存知ですか？
「バーチャルSNS」とか「3D空間型オウンドメディア」とか呼ばれる「3Dの部屋を作ってそこにいろいろな人が様々なデバイスから入ることができる」サービスです。

こちらのサービスの詳細は調べていただくとして、今回はタイトルの通り頂点カラーを使ったライティングをBlenderで行い、それをDoorに持っていきます。
ちなみに結論から書いてしまうとこの方法は屋内のライティングにはお勧めできません。あくまで「こんな方法がある」「Doorでも頂点カラーが使える」程度でご覧ください。

左を右で再現したかった

Step1：準備について

まずBlenderでのライティングですが、詳しい情報があふれているので省略します。今回はHDRPを設定して、ポイントライトを1つ置いただけのシンプルな状態で進めます。

今回用意した3Dモデル

テスト用にBlenderで簡単なシーンを作成しました。分かりやすいように建物とスザンヌ（Blenderの猿）は真っ白、球体にだけテクスチャを適用しています。

また頂点カラーをベイクしたい全ての3Dモデルに対して「頂点カラーインデックス」を追加してください。ここに頂点カラーが記録されます。追加方法は画像をご覧ください。

ここの「＋」を押すと新規で追加されます

Step2：頂点カラーをベイクする

ベイクのやり方は簡単です。
まずレンダラーをCyclesに設定してください。Blender3.0ではEEVEEではベイクできません。
次にベイクしたいオブジェクトを選択してください。1つずつしかベイクできない点にご注意ください。
レンダラーを選んだら「レンダープロパティタブ（赤○、カメラのアイコン）」を選択、その中にある「ベイク」のターゲットを「画像テクスチャ」から「頂点カラー」にしてください。

また、テクスチャなどを使用している場合はその色までベイクされてしまうので、新しく真っ白なマテリアルを用意してください。

テクスチャの色ごとベイクされた例

ここまでできたら「ベイク（フィルムのアイコン）」ボタンを押してください。

Step3：頂点カラーを確認する

ここまで問題なく進み、ベイクもエラーなくできたとして、見た目は何も変化が無いと思います。頂点カラーをどこにも使っていない為です。
頂点カラー確認用のマテリアルを作成します。今回は「Vcol」というマテリアルをすべてのオブジェクトに適用しました。

次に画像の通りにシェーダーエディターを開いて「頂点カラー」を追加します。黄色の点をドラッグすると線が伸びるので画像のように接続します。

「シェーダーエディター」はここにあります

「頂点カラー」を追加

今回は「カラー」と「ベースカラー」
黄色い点から黄色い点をドラッグして繋ぎます

シェーダーエディターを開いたのと同じ方法で3Dビューポートに戻ると頂点カラーが表示されているはずです。シェーディングが「レンダー」または「マテリアルプレビュー」であることを確認してください。

赤枠内のどちらかが選択されていますか？

問題点について

ここまであちこち設定を切り替えて、大変な思いをして作業してきましたが最初にお伝えした通り、私はこの方法をお勧めできません。その理由をご紹介します。

• 頂点に色を付けるのだからそもそも頂点が無いところには色が付かない（天井部分のポイントライト、床の影他）

• 頂点が奥まった場所は真っ黒になる

• ノイズがひどい（球体）

• 頂点がメッシュの中にめり込んだりしていると黒くなる＝差し込むようなモデリングができない（スザンヌの目）

• そもそもBlenderのベイク機能が使いづらい

ライティングとして使うのは難しそうです

ぱっと見でこれだけの問題があります。オブジェクトにAOを付けるなど特定の方法では効果を発揮できそうですが、頂点カラーをライティングとして使うのは厳しそうです。Blenderには「頂点ペイント」という機能があるのでそれを使えば修正できるかもしれませんが、かかる手間がはかり知れません。

ただここで終わるのもあんまりですので3DモデルをDoorに持っていくところまでやります。

Step4：Blenderからエクスポート

まずベイクの際に変更したマテリアルを元に戻します。エクスポートしたい物を選択してください。今回は建物とスザンヌと球体の3つです。「オブジェクトモード」でShiftキーを押しながらクリックで複数選択が可能です。
エクスポートですがファイル形式はglTF2.0を選択します。
画像の通りに設定すると選択したオブジェクトだけをエクスポートできます。

エクスポートはここから
画像だとスザンヌしか選んでいないので失敗してます

赤枠の一番上の項目「選択したオブジェクト」にチェックを入れないと
使用しないものを含めて全ての3Dモデルやライトなどが出力されてしまいます

これでBlenderでの作業は完了です。ここからはWebブラウザでDoorにアクセスします。

Step5：Doorに読み込み

Doorについては細かく説明しませんが、大まかな流れだけでご紹介します。

「新しいシーン」も「新しく作成」も同じです

ややこしいですが「Blenderからインポート」ではなく「空のシーンを使う」を選択

エクスポートしたglbファイルを画面にドラッグ＆ドロップ

これで読み込みは完了です。後は読み込んだ3Dデータを「Viewport」に配置します。これでBlenderで見たの同じ3Dモデルが表示されました。Doorに持っていく方法は以上です。

まとめ

実は頂点カラーでライティングを表現するというのは昔からある方法です。今回Doorが頂点カラーに対応しているという事に気づいてやってみたのですが残念な結果となってしまいました。時間を掛ければできないこともないかもしれません。もっとシンプルな方法があるかもしれません。いつか再挑戦しようと思います。
頂点カラーに触ったこと自体ほとんどなかったのでそういう意味ではいい勉強になりました。本気でベイクしたいなら頂点の位置から気を使う必要がありそうです。

いつかまたDoorのライティングにリベンジしようと思います。上手くいったら改めて記事を書きます。ここまでお付き合いくださりありがとうございました。