Shap-Eで生成した頂点カラーGLBをUnityにもっていく方法

# 使ったもの

- Unity 2019.4.31f1
- blender 2.83.20.0

UniGLTFは使いません。理由は後述。

# まえがき

こんにちは。VRにドハマりしてる、きくはなと申します。
最近、テキストから3Dモデルを生成できるAI、[Shap-E](https://github.com/openai/shap-e)で遊んでいます。

このShap-Eで遊ぶためには、Google Colabなどのpython環境でコードを動かす必要があるのですが、
hysts氏作成の[デモサイト](https://huggingface.co/spaces/hysts/Shap-E)を使うことで、簡単に体験することができます。

上記のデモサイトで3Dモデルをダウンロードすると、glb形式で出力されます。
これを[UniGLFT](https://github.com/ousttrue/UniGLTF)でインポートできるようにして、Unityで使ってみよう！

と、思ったのですが...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2659212/14369954-9c1c-a238-217d-dc125cedc736.png)
あれ？

エラーが出て上手くインポートできませんでした...

原因がよく分からなかったので推測にはなりますが、UniGLFTは頂点カラーglbをそもそもサポートしていないのかもしれません。
というのも、まず前提として、Shap-Eが出力する3Dモデルは頂点カラーで着色がされています。
（ここら辺の原理は[Shap-Eの論文](https://arxiv.org/abs/2305.02463)を読み込んでみると理解できるかと思います。興味があればぜひ。）

試したところ、テクスチャが存在するglbはインポートができたので、そういうものなのかもしれません。


:::note
Shap-Eで生成したカービィちゃんです。"頂点の色"という項目がアクティブになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2659212/c182bfa2-c65e-ec8a-afa8-c2ca9d2e229e.png)
:::

:::note
[ミノカサゴのフォトグラメトリモデル](https://sketchfab.com/3d-models/luna-lionfish-pterois-lunulata-701f33ba0db84058900232bf7ee91fec?utm_medium=embed&utm_campaign=share-popup&utm_content=701f33ba0db84058900232bf7ee91fec)です。"UVセット0"がアクティブで、テクスチャデータが存在します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2659212/e9487bb4-9355-8896-b17a-2844ddd6f248.png)
:::

気を取り直して、頂点カラーglbをUnityにもっていく方法を探してみます。

調査した結果、頂点カラーを表示するシェーダーを作成できることが分かりました。

さっそく試してみましょう！

# 1. blenderでglb->FBXの処理を行う。

とは言ったものの、glbをそのままUnityにインポートすることはできません。
頼みの綱のUniGLTF君には断られてしまったので、ここではblender君の力を借りましょう。
![2023-05-13 (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2659212/c5e14495-2f64-17d7-5664-54ce80beaaac.png)
glbをインポートして、
![2023-05-13 (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2659212/789791b5-dc7e-bdba-2e0b-69a36ec76fa0.png)
FBXとしてエクスポートします。

::: note
おまけでUnity用FBXの設定をのっけておきます。
ボーンはないのでこの設定で十分だと思いますが、不備があれば気軽にご指摘ください。
![2023-05-13 (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2659212/cb336fc4-f57a-c294-53c6-d52c93c67258.png)
:::

はい、blenderくんの仕事はこれで終わりです。
一応、頂点カラーを画像テクスチャにベイクしたり、ポリゴン数を削減して軽量化を図ることも可能ではあるのですが、かなり面倒なので、今回は割愛したいと思います。

# 2. Unityにインポートする
FBXにしてしまえば、Unityにもっていくのは簡単です。
あとはシェーダーですが、[こちら](https://tsumikiseisaku.com/blog/shader-tutorial-vcolor/)で紹介されていたものをそのまま使用させていただきました。

https://tsumikiseisaku.com/blog/shader-tutorial-vcolor/
    
    Shader "Custom/Shader_VertexColor" {
    	Properties {
		
    	}

    	SubShader {
    		Tags {
    			"Queue"      = "Geometry"
    			"RenderType" = "Opaque"
    		}
		
    		CGPROGRAM
    			#pragma target 3.0
    			#pragma surface surf Standard fullforwardshadows

    			struct Input {
    				fixed4 color : COLOR;
    			};

    			void surf (Input IN, inout SurfaceOutputStandard o) {
    				o.Albedo = IN.color.rgb;
    			}
    		ENDCG
    	}

    	FallBack "Diffuse"
    }

このシェーダーをFBXに適用してあげると...
![2023-05-12 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2659212/bc5b5970-eb4d-dad1-9c3d-8906de5b0377.png)
こうなります。
後ろのカービィちゃんは前述しためんどくさいやり方（画像テクスチャベイク・ポリゴン数削減済み）で実装したもので、画像テクスチャが存在しますが、VRHMDのモデルは画像テクスチャがなくとも着色されていることが分かるかと思います。

# おわりに
以上が頂点カラーGLBをUnityにもっていく方法になります。
皆さんもShap-Eで3Dモデルを生成しまくって、Unityにもっていって遊んじゃいましょう！

## 参考

https://zenn.dev/eightbeat/articles/8530fc7c833ba1

https://tsumikiseisaku.com/blog/shader-tutorial-vcolor/