Shap-E×DreamTextureで生成したモデルをPlayCanvasにインポートしてみよう

# Shap-E  とは
自然言語または画像から3Dコンテンツを作成するAIの強力なデモンストレーションです。 これにより、コンピューターゲーム、インタラクティブなVRエクスペリエンス、プロトタイプなどの目的で3Dオブジェクトを作成できます。

# DreamTextureとは
「Dream Texture」はCarson Katri氏作の「Blender」用アドオンです。 入力したキーワードや画像情報などを元に、画像生成AI「Stable Diffusion」を使ってテクスチャ画像を自動生成します。

# PlayCanvas とは

[PlayCanvas](https://playcanvas.jp)は、JavaScriptで作られたHTML5/WebGLで動作するゲームエンジンです。
インストールの必要もなく、開発から公開までWebブラウザ一つで動くクラウドにホストされるため、URLにWebブラウザからアクセスすることで複数人で開発、公開したコンテンツを一緒に遊ぶことも可能です。

かなりのハイポリゴン＆テクスチャサイズと量を持っているキャラクターでも、問題無くweb上で動かすことができるのがPlayCanvasの特徴です。
品質の高いマテリアルセットをデフォルトで持っていますので、リアルな質感を出すことも容易に出来ます。

# 本題

今回は **Shap-E**で生成した3Dモデルをカスタマイズし、Blenderアドオンの**DreamTexture**でテクスチャを生成し、PlayCanvasの3Dモデルビュワーでweb上から見られるようにしていこうと思います。まだshap-Eで生成される3Dモデルは精度が高くないのが現状ですが、今後に期待し実験的に行っていきたいと思います！

記事の内容は以下になります。

- **Shap-Eで3Dmodelを生成する**
  - text to 3D
  - image to 3D
- **Blenderでシーンを整える**
- **Dream TextureをBlenderにインストールする**
- **Dream Textureでテクスチャーを生成する**
- **PlayCanvasへインポートする**

# Shap-Eで3Dmodelを生成する
まずは**Hugging Face**へアクセスします。
https://huggingface.co/spaces/hysts/Shap-E
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/c1218ed2-e049-f730-d339-0b4eec584378.png)
## text to 3D
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/bf44fd61-d627-e7b7-3378-a7f2ddb9c414.png)
使用方法はとてもシンプルです。赤枠内に生成したいモデルのプロンプトを入力しするだけです。
ここでは、小さな家[small house]とだけ入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/c3977d53-e561-2ad3-4665-b9a1dfbe2b6d.png)
Runボタンをクリックすると生成が開始されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/72a473d7-ce3c-bfa7-527a-8f3d9169ce64.png)
30秒程で生成が完了します。Runボタンをクリックごとに違った形状で[small house]をベースとした3Dモデルが生成されます。プロンプトの単語数が長く複雑になると、その分生成に時間が掛かるようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/a8d86d28-1588-1ab4-f8b5-3d499c852b7a.png)
赤枠内のダウンロードボタンをクリックするとglb形式でダウンロードされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/990650ad-6804-afb8-1804-943c82a46031.png)
10分も掛からず6～7個のモデルを生成することができました。
## image to 3D
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/13d35fee-7ae1-e7c8-3161-5b5a6b0f46cd.png)
※イラストはmidjourneyで生成したものです。
こちらは画像からimage to 3Dでモデルを生成したものです。ちょっと…現状では使える感じではないですね。
続いて、このモデルデータをblenderへインポートし、形状を整え、テクスチャを付けていきたいと思います。

# Blenderでシーンを整える
まずは、Blenderを起動し、ダウンロードしたデータをインポートします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/ece7a627-c140-9994-bcc3-6545daf56076.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/599c78bf-4bb5-0b79-10d4-01865d76599a.png)
インポートしたデータを見てるとかなりのポリゴン数です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/8520447e-6f1f-1312-53e2-d74c06273326.png)
リメッシュモディファイアーを選択し、ポリゴン数の削減と形状をなるべくシンプルなものになるよう調整します。
positionを調整し、下辺が原点へ来るように移動しておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/d929f081-bd77-e28e-a729-69cd778549b3.png)
ダウンロードした複数のデータを並べてシーンを構成します。

# Dream TextureをBlenderにインストールする
Dream TextureのGithubページにアクセスし、ページ下部にある[dream_textures-windows-cuda.7z
]をダウンロードします。
https://github.com/carson-katri/dream-textures/releases
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/fea06e20-6c7e-43cc-0c77-912ca2b42c56.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/d1cc04bf-f8f1-8d70-7bb4-88d6b67f19fa.png)

7zipで解凍すると[dream_textures-windows-cuda.zip]が表示されますので、これをblenderのアドオンとして使用します。
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/501d187d-7512-28a8-5fb5-86d4914ddeec.png)
編集→リファレンス→アドオン→インストール→解凍したzip[dream_textures-windows-cuda.zip]の順でアドオンをインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/542a4885-0fe2-1c64-5e36-4becedd9f841.png)
その後、検索欄で[Dream texture]と入力し、アドオンを有効化します。
Download Stable Diffusion v2.1をクリックすると、Stable Diffusionの学習モデルをユーザーフォルダーにダウンロードし始めます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/bbc98ebc-133d-1e4e-1231-f205c4f3a031.png)
［Find Models］検索欄に「depth」と入力し、［Enter］キーを押すと、
「stabilityai/stable-diffusion-2-depth」モデルがリストに出てきますので、囲み内の［↓］ボタンをクリックするとダウンロードを開始します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/802451ec-b6fe-b3cd-d41b-65fe30d34918.png)
ビューポート右側に新規で[Dream]というタブが追加されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/7f329582-9146-3b39-c4ce-16ec79ec07cf.png)
modelを[stabilityai/stable-diffusion-2-depth]に変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/ba3c0f0c-6de0-dcb6-534c-f2019b55c687.png)
Blenderのインターフェイスが日本語の場合、生成時にエラーが発生するのでプリファレンスから言語を英語に変更しておいてください。

# Dream Textureでテクスチャーを生成する
テクスチャーを生成するための設定を行っていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/3f2ec50c-8d8c-ed6a-d98c-33bb350f62c6.png)

**Dream Texture Projection**
Pipline = [Stable deffusion]
Model = [stabilityai/stable-diffusion-2-depth]

**Prompt**
subject = [house]
Subject Type = [environment]
Genre = [Cinematic]
今回は、上記の設定で生成します。
テクスチャを生成できるのは、ビューポート上で見えている範囲と距離のみです。
対象のモデルを編集モードにし、全選択すると[Project Dream Texture]ボタンがアクティブになりますので、クリックしてください。生成が開始されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/f28c1f75-2316-f69b-b9b5-1395f13b928f.png)
生成が開始されると、UV編集画面で確認すると上記のような画面になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/765d88c0-8a6c-8708-f545-d7fa74d7f508.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/75d3cbf5-7bc9-f9b1-61df-bd77195d9111.png)
生成が完了しました。モデリングモードでLightingをFlat、ColorをTextureに変更して確認してみましょう。
気に入るテクスチャになるまで、何回でも生成してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/0124fbfb-0187-f941-eda7-3854ca09309d.png)
色々なテイストのテクスチャーが生成できました。ただし、あくまでもビューポート上から視認できる範囲のみなので、見えていない部分は正確にレンダリングされません。

# PlayCanvasへインポートする
モデルを全て選択し、glbでエクスポートします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/a6d71804-2db5-9caa-2dc5-9a23a7218ce6.png)
PlayCanvasのアカウントが無い方は、こちらからアカウント作成をお願いします。
https://playcanvas.jp/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/e8a937ae-077b-a1c8-1ecf-e9d0196a72bf.png)
エクスポートしたglbデータをASSETSへdrag＆dropするか、[+]ボタンからUploadをクリックし、該当ファイルをインポートしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/82390664-3780-7534-869e-89993988d915.png)
赤枠のTemplateをビューポートへdrag＆dropし、完成です。
完成シーンはこちらです。
https://playcanv.as/p/xpbNuPr9/

いかがでしたか？自分でモデリングを行わずに3Dモデルとテクスチャーを短時間で生成し、シーンを構成することが出来るようになりました。まだまだ精度は低いですが、生成AIは日々進化し続けています。今後のアップデートでもっと精度の高い生成3Dモデルを作成できるようになると思います。今後も楽しみに情報をキャッチアップしてきますので、宜しくお願い致します。