3teneに色を綺麗にしたアイテムを持ち込む

My Name is Izumi.月森イズミです。

先日、3teneにアイテムを持ち込む方法についてツイートしたら、お問い合わせがありました。
そこで記事にまとめておきます。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/3tene?src=hash&amp;ref_src=twsrc%5Etfw">#3tene</a> にアイテムを持ち込むときは<br>Emission Color（放射光）にテクスチャを設定するのが一番よさそう。ほかは意図した通りにならないです。<br><br>ちなみにEmissionは光ものに使われることが多いですが、<br>光源がないと（自分自身だけでは）光ることはできないですよ～</p>&mdash; 月森 イズミ🌜Vエンティスト🌛Vコスレイヤ (@Tsukimori_Izumi) <a href="https://twitter.com/Tsukimori_Izumi/status/1274352349100703745?ref_src=twsrc%5Etfw">June 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

**※記事の前半は3teneの使い方ですので、
飛ばしても良い方は、
(PCであれば右メニューから)見出し「じゃあどうするかという話」まで飛んでください。**

基本的な設定方法は、スタンダードシェーダー、MToonシェーダーとも同じです。

#検証した環境
-Windows 10
-3tene Free v1.10.28
-maya 2019(なくてもいい)
-Unity 2018.4(mayaがない場合)





#検証モデル
3teneは人物のオブジェクトのほかに、.obj、.fbxファイルをステージに持ち込むことができます。
今回、以下のようなグラデーションのテクスチャと、それをmayaかUnityで張ったモデルを持ち込んで検証します。

<img width="300" alt="texture.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492471/ada2f239-8483-1b7d-3220-27d00ff65884.png"> <img height="300" alt="mayaHeart.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492471/bdd4eb71-e87a-eaf5-97ab-d6228017fc00.png">

#3teneで読み込む
3tene上から、**アバター以外の3Dオブジェクトの配置**をクリックします。
<img height="300" alt="3tene01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492471/b1fbc840-5409-c89e-d032-349899725220.png">
フォルダを開く、を押します。
<img height="300" alt="3tene02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492471/fb9ad4e9-9887-bdbe-d42f-31e253d69cfc.png">
<img height="300" alt="3tene03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492471/88d7494b-b62f-2dc7-c5cf-ac6a264a87cc.png">
フォルダを読み込む、を押します
<img height="300" alt="3tene05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492471/3d284d89-d9bf-4919-17bc-5172fd5a8466.png">
検証を簡単にするために、今回は右手に持たせます。
<img height="300" alt="3tene06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492471/35c7d22c-63e1-241d-2816-da6997a3ed6a.png">

読み込む、ボタンを押します。

#検証モデルに、色マップでテクスチャを読み込んでみる
mayaのハイパーシェード（マテリアルエディタ）で、色マップ(Color,Albedo Color,Lit Colorとも言う)にテクスチャを設定しました。
<img height="300" alt="3tene07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492471/8fa31212-cb96-55f8-18a1-82439016962c.png">
mayaを知らない人のために、Unityでマテリアルを開くとこんな設定です。
スタンダードではAlbedoカラー、MToonではLit Color,Alphaに当たる部分にテクスチャが入った状態です。
<img height="300" alt="3tene08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492471/911b5ca7-fbe6-b0a2-52f5-f5c61c940257.png">
3teneでオブジェクトを右手に持たせて読み込むと、黒ぼけました。
<img height="300" alt="3tene09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492471/d2fc5c1b-f3c6-adb7-5522-d16a07734e4c.png">
Ambientカラーやshadeカラーにテクスチャを入れても、同じように黒くなりました。

#じゃあどうするかという話
上手くいったのは、Emission Colorでテクスチャを読み込むことです。
<img height="300" alt="3tene10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492471/2bacb6ab-3108-f312-f36b-faf50c2179e1.png">
Unityで開くとマテリアルはこんな設定です。
<img height="300" alt="3tene12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492471/d74f11c9-fb8a-6e3d-6cb9-5fcd0681b554.png">
読み込むと元のモデルっぽく色が明るくなりました。これは、光が放射（じわっと出る反射）する部分にテクスチャを着色したからです。
<img height="300" alt="3tene13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492471/1aadb717-1757-e819-ff4b-59d54b790487.png">

#もっと寄せる
もっと寄せるために、Emission Colorにテクスチャを設定した状態で、AlbedoColor（Mtoonの場合はLit Color,Alpha）にテクスチャの最も明るい色を充てます。
<img height="300" alt="3tene14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492471/b7260ae0-1bd0-3714-e840-2887d25549ad.png">
こうすると、Emission　Colorで影になる部分にテクスチャがついているので、黒くなるのは防ぐことができ、だいぶ寄せることができます。
<img height="300" alt="3tene15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492471/2816730c-7e12-d93a-3abc-4b6e2b1624f9.png">

#試してないけどもっと良くできそうなこと
試してないけど、テクスチャに複数色を使いたいときや、もっと寄せたいときはこうするかなと思います。
<img height="300" alt="3tene16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492471/4738c083-2f10-b5db-f40b-7f8ff1012e0c.png">

カラーにテクスチャを張ると、黒っぽくなってしまうのが問題なのだったら、
Emission Colorには元のテクスチャ、
Colorにはさらに**レイヤ効果スクリーン**したテクスチャを張れば、黒っぽさが相殺されるかと。

今回はピンクだけ単色に近いテクスチャで検証しましたが、
複数色のテクスチャのアイテムで黒っぽさが問題となったら、やってみてもいいかもしれません。

#まとめ
- 3teneにアイテムを持っていくとき、原因不明の黒っぽさ(影？)ができることがある。
- だから、テクスチャはEmission Colorに充てる。
- さらにAlbedo Colorにテクスチャの最も明るい色を与えると、グラフィックソフトで作った様子に近づけられる。

以上です。