Reality Composer Proでシーンを作ってiOSのRealityViewのVirtual Cameraで表示

# はじめに

Reality Composer Proは、GUIで3Dコンテンツを配置したり、Shader Graphでシェーダーを作成することできるツールです
iOS 18からRealityKitの[RealityView](https://developer.apple.com/documentation/realitykit/realityview)が利用できるようになりました
Reality Composer Proで作成したシーンを、RealityViewの非ARモードのVirtual Cameraで表示してみました
(Reality Composer Proで作成したシーンをiOSなどvisionOS以外で利用できるようになったのもXcode16からかも？)

| Reality Composer Pro | iOS |
| :-: | :-: |
| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214313/3073a17e-5f0a-5dbd-7ebd-e220c8790620.png) | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214313/5b1486f1-f65f-d189-9aa4-46e98227bca6.png) |

リポジトリはこちら

https://github.com/fuziki/NonARSampleView
# Reality Composer Proでシーンを作ってiOSのRealityViewのVirtual Cameraで表示する
## アプリターゲットの作成
普通にアプリターゲットを作成します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214313/243a16b2-8042-40c5-fa98-f91d214d6d83.png)

## Reality Composer Pro用のPackageの作成
Xcodeの File > New > Package から新しいLibraryのPackageを作成して、SampleAppのプロジェクトに追加します
RealityKitContentという名前にしました
これは、後で作成するReality Composer Proのプロジェクト名と揃える必要があるようです

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214313/10f8787f-c0a0-eba7-0841-ac4db6ba12a6.png)

## Reality Composer Pro用のプロジェクトの作成
Reality Composer Proを起動し、Create New Project...から新しいプロジェクトを作成します
RealityKitContentという名前で適当な場所に保存します

## RealityKitContentをコピペする
Reality Composer Proで作成したRealityKitContentを、アプリのRealityKitContentにコピペします

* Package.realitycomposerpro
* Package.swift
* Sources/ 以下

これでXcodeからReality Composer Proで開けるようになります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214313/08b8a848-236e-79c0-ff0b-d73a0a56104f.png)

## RealityKitContentの依存関係を追加
SampleAppのFrameworksにRealityKitContentを追加します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214313/b943a551-f8a6-2d4c-2653-fa65aee2f119.png)

## RealityViewを実装
cameraを[virtual](https://developer.apple.com/documentation/realitykit/realityviewcamera/virtual)にします
cameraをvirtualするだけでは表示されず、PerspectiveCameraを明示的に追加する必要があるようです
realityKitContentBundleからSceneをロードして、**カメラと同じアンカーにまとめてcontentに追加します**

```swift
import RealityKit
import RealityKitContent
import SwiftUI

struct ContentView: View {
    var body: some View {
        RealityView { content in
            content.camera = .virtual

            let camera = PerspectiveCamera()
            camera.camera.fieldOfViewInDegrees = 60
            camera.look(at: .zero, from: [0.2, 0.2, 0.2], relativeTo: nil)

            let scene = try! await Entity(named: "Scene", in: realityKitContentBundle)

            let worldAnchor = AnchorEntity(world: .zero)
            worldAnchor.addChild(scene)
            worldAnchor.addChild(camera)
            content.add(worldAnchor)
        }
        .ignoresSafeArea()
    }
}
```

## Reality Composer Proでコンテンツを作成する
Reality Composer Proで開きます
右上の+ボタンからToy Biplaneなどをダウンロードして追加します
位置は原点に配置しました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214313/a3c59b34-40e9-7ecc-569f-9bf181adddcb.png)

また、左の+ボタンからEnvironment > Sky Sphereを追加します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214313/d6594457-5c0a-2090-f944-27056f9c7c5a.png)

## 動作確認
実機ビルドすると飛行機とskyboxが表示されます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214313/76cd299e-4112-8744-b6b6-69dbba8d6967.png)

## 詰まりポイント
RealityKitContentのPckageを作成後に任意の名前に変更するのはできなさそうでした
また、RealityKitContentのPckage.swiftにReality Composer Pro以外のtargetを追加できなさそうでした
Package.swiftでモジュール管理する場合は、RealityKitContentとは別にPackage.swiftを作成し、そちらで管理するのが良さそうでした

# まとめ
Reality Composer Proで作成したシーンを、RealityViewの非ARモードのVirtual Cameraで表示してみました
Package管理周りが手こずりましたが、サクッと実現できました

せっかくなので、Shader GraphでToon Shaderっぽいのを作ってみました
GUIでノードを接続してShaderが作れるのは楽しいです

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214313/3073a17e-5f0a-5dbd-7ebd-e220c8790620.png)