Skybox AIで生成した360°画像をUnityで取り込んで非パノラマ画像として出力する

# モチベーション
私はゲームは作っていないのですが、趣味でイラストやアニメーション制作をしています。
とくにアニメでは同じ場所の、いろんな角度の画像が欲しくなるのですがこれを一枚ずつ描いていくと途方もないです。
というわけでできるだけ手を抜ける方法を探してこの記事の内容に至りました。
# 目標
BlocadeLabsの[Skybox AI](https://skybox.blockadelabs.com/)で生成した360°画像を非パノラマ画像として出力する。

こんな感じの360°画像を
![manga_blue_sky.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661548/136b3d9b-69d7-2c0f-440e-031c30b40840.jpeg)

こんな感じで出力したいてなわけです。
![Qiita.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661548/8f2bc405-6165-310f-e2c3-85fb6afb8495.jpeg)

# 360°画像の生成
これはこの記事の主旨から外れるので詳しくは紹介しませんが、こんな感じでテキスト・アウトライン・テクスチャなどを入力すると360°画像を生成してくれます。
DOWNLOADボタンをクリックしてjpg画像をダウンロードしましょう
(利用規約に則った利用をしましょう)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661548/92790a76-b44d-784c-1c02-e03c1caf55c0.png)

# Unityで取り込む
## 1. 空のプロジェクトを作成
- UnityHubを開く
- New Project
- Core > 3Dを選択してCreate project
    - 必要に応じてプロジェクト名と保存場所を設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661548/7c0df745-b43d-ec53-7a22-2ce6faf4ce04.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661548/0c04b77d-efe7-d97c-a6e8-e6d7376aef61.png)

これで空のプロジェクトができました

## 2. Skyboxにダウンロードした画像を設定
- 生成した画像をAssetにドラッグ＆ドロップ
- Project paneの+ボタンからMaterialを作成（名前をつけると良いと思います）
- 作成したMaterialを選択してInspector paneの Shaderを Skybox > Panoramic に設定
- 同Materialを選択した状態でAssetから生成した画像をSphericalにドラッグ＆ドロップ
- メニューのWindow > Rendering > Lightingを選択してLightingメニューを表示
- LightingメニューのEnvironmentタブを選択
- SkyboxMaterialの→ボタンをクリックして先ほど作成したMaterialを選択

![スクリーンショット 2023-05-30 23.29.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661548/39fb13ae-6d95-c0fc-bf85-fd3977edb524.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661548/c48a85eb-4716-5fea-25c8-a592792c3209.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661548/355e34cc-ac91-ae22-c1e9-9a46073adfb0.png)

![スクリーンショット 2023-05-30 23.33.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661548/6f874639-1305-6167-9c85-e100634288f1.png)

![スクリーンショット 2023-05-30 23.37.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661548/8fd18858-a71c-fd93-f3cb-0df89a41b6d7.png)

![スクリーンショット 2023-05-30 23.39.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661548/5c5fb4b1-5fce-1b9c-14de-00f27cc69f0a.png)

これでSceneの背景に画像が読み込まれました

# 画像を出力する
## 1. Unity Recorderをインストール
- Window > Package Managerを選択
- PacakgeManager windowのPackages: in ProjectとなっているプルダウンからUnityRegistryを選択
- 🔍マークの検索フィールドにrecorderと入力して表示されたRecorderを選択、右下のInstallをクリック

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661548/612554ba-ea59-78e5-e156-26b33ca61f73.png" width=30% />

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661548/a10db8d3-dfb0-d998-191a-0c96c9d82391.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661548/9666a965-608d-b145-f4c4-cc506991de17.png)

これで撮影の準備ができました

## 2. Unity Recorderで静止画を出力
今回は画像が出力できればいいのでMain Cameraの向きを変更して撮影に使います。

- Window > General > Recorder > Recorder Windowを選択
- Recorder WindowのRecording ModeをSingle Frameに
- +Add RecorderをクリックしてImage Seqenceを追加
- 追加したImage Sequenceを選択してSourceをTargeted Cameraに
- Output Fileで出力先やファイル名を設定
- 録画ボタン（デカ三角ボタン）をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661548/ec61f301-3e9b-d8c9-b62c-67c742f3697d.png)

![スクリーンショット 2023-05-30 23.51.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661548/5167e987-23b6-3f0c-c034-dc8539bc874f.png)

![Qiita.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661548/8f2bc405-6165-310f-e2c3-85fb6afb8495.jpeg)

やったね！これで出力できました！
カメラについての設定はHierarchy paneからMain Cameraを選択してInspector paneから設定できます。

以上！

# 参考
https://fineworks-fine.hatenablog.com/entry/2023/04/24/073000

https://note.com/upfrontier/n/n301399729066#2c1b4547-73ea-4655-96b3-6c619da5d356