[VisionOS] Reality Composer Pro 사용법

Reality Composer Pro 의 등장 ! 

 

Reality Composer Pro 랑 Reality Composer 의 차이는 아래 사진을 참고.

Reality Composer 를 아주 살짝쿵 써본 경험이 있어서 뭐가 달라졌는지는 잘모르겠음 ;;; 

 

https://developer.apple.com/augmented-reality/tools/

 

 

참고로 Scene 을 구성안하고 간단히 3D 오브젝트 하나만 띄운다면  Model3D(named:) 를 써도 충분함!! 

✓ 개발환경 - Xcode 15 Beta 3
✓ 레퍼런스 - WWDC 23 > Develop your first immersive app  

 

[1] Reality Composer Pro 진입

여기 다운로드에 없는데, 베타여서 없는 건지 Reality Composer 처럼 독립적인 툴로 쓰는게 아니여서 없는 건지 모르겠음.

 

https://developer.apple.com/augmented-reality/tools/

 

 

Xcode 에서 VisionOS 앱을 만들고 RealityKit 을 렌더러로 선택하면 

 

 

요런 패키지가 자동추가되어 프로젝트가 생성되는데

 

 

 

Open in Reality Composer Pro 를 누르면 

 

 

 

Reality Composer Pro 에 진입 가능! 

 

 

 

이렇게 한번 진입 하면 그 다음부터 검색을 해서 Reality Composer Pro 를 독립적으로 열 수 있음 (Xcode 안열고 )

 

 

 

[2] Scene 만들기

 

File > New > Scene 으로 Scene 만들기

 

 

 

My Scene 으로 네이밍 하고 추가했음 

두군데에서 Scene 을 변경하며 작업할 수 있음.

Immersive 는 원래 있던 것. 

 

 

 

이 툴들을 선택해서 Scene 을 확대/축소, 돌리기 등 할 수 있음 (단축키 무엇일까..)

 

 

 

[2] Object 추가하기 + Transform 설정하기 

 

우선 좌표계는 다음과 같음

 

 

 

File > Import 나 끌어오기를 통해 usdz 타입의 오브젝트를 추가할 수 있음

우측 + 를 누르면 기본 제공하는 오브젝트를 쓸 수 있음

 

 

 

오브젝트 캡쳐로 대충 만든 춘식이를 추가했음 

 

 

2.1 Position

 

x,y.z 는 화살표를 통해 바꾸거나 Transform 필드를 변경하면 됨

 

 

 

 

Scene 하이어러키에서 오브젝트를 더블클릭하면 오브젝트가 가운데로 오도록 뷰포트가 조정됨. 

 

 

 

모든 contents 가 보이도록 다시 돌아가고 싶으면 Root 를 더블클릭하면 됨.

 

 

 

2.2 Rotation

 

링 돌리기

 

 

 

 

2.3 Scale 

 

링을 키우고 줄이기 

 

 

 

물론 직접 입력해도 됨 

 

 

[2.1] Object 에 Component 추가하기 (심화)

 

Add Component 로 Collision 등을 추가할 수 있다.  (테스트안해봄)

 

 

 

관련 코드는 wwdc 마지막 쯤 'Entity Targeting' 부분에 나온다. 

 

 

[3] ImmersiveView에 Scene 로딩하기

 

커멘드 + Save 로 저장을 한 후 Xcode 로 돌아가자. 

ImmersiveView 에 가보면 RealityKit import 와 RealityView가 이미 만들어져있는데,

 

 

 

Scene 네임을 바꿔준다. 

 

 

 

Reality Composer Pro 에서 살짝씩 수치를 바꾸면 프리뷰에서 빠르게 잘 보임 

(큰 수정은 좀 느림;;)

 

 

프리뷰에서는 까맣게 나오는데 실앱으로 빌드하면 괜찮음

Scene에 Light 가 없었음.  (참고로  Voulume 선택해서 앱 만들어보면 Light 코드가 자동으로 추가되어있던데 참고)

 

+ WWDC 랑 달리 나는 윈도우가 같이 보임 

 

[4] 앱에서 Immersive Space 열기 

 

이제 프리뷰말고 앱으로 돌려보자! 

 

App 쪽에서 가서 

ImmersiveView 에 id 를 할당한다. 

(이것도 자동으로 코드가 만들어져있음)

 

 

 

SwiftUI 멀티씬에서 이런 코드로 window 를 추가했던 것과 동일하게 

 

 

이렇게 해주면 Immersive Space 를 열 수 있다. 

 

 

 

참고로 앱에 ImmersiveSpace 등록안해주면 (첫번째 사진)

이때 아래와 같은 에러가 뜬다. 

No Immersive Space with id 'ImmersiveSpace' is defined

 

 

윙 왜 여깄지 ?? 😮

 

 

 

 

참고로 버튼을 여러번 눌렀을때 동일 Space 를 띄운다는 에러가 뜨니까 한번 눌렀는 지 체크하는 코드도 필요하다.

Volume + RealityKit 으로 VisionOS 앱을 만들면 아래 코드가 자동생성되는데 이거 참고하면 됨! 

 

import SwiftUI
import RealityKit
import RealityKitContent

struct ContentView: View {

    @State private var enlarge = false
    @State private var showImmersiveSpace = false
    @State private var immersiveSpaceIsShown = false

    @Environment(\.openImmersiveSpace) var openImmersiveSpace
    @Environment(\.dismissImmersiveSpace) var dismissImmersiveSpace

    var body: some View {
        VStack {
            RealityView { content in
                // Add the initial RealityKit content
                if let scene = try? await Entity(named: "Scene", in: realityKitContentBundle) {
                    content.add(scene)
                }
            } update: { content in
                // Update the RealityKit content when SwiftUI state changes
                if let scene = content.entities.first {
                    let uniformScale: Float = enlarge ? 1.4 : 1.0
                    scene.transform.scale = [uniformScale, uniformScale, uniformScale]
                }
            }
            .gesture(TapGesture().targetedToAnyEntity().onEnded { _ in
                enlarge.toggle()
            })

            VStack (spacing: 12) {
                Toggle("Enlarge RealityView Content", isOn: $enlarge)
                    .font(.title)

                Toggle("Show ImmersiveSpace", isOn: $showImmersiveSpace)
                    .font(.title)
            }
            .frame(width: 360)
            .padding(36)
            .glassBackgroundEffect()

        }
        .onChange(of: showImmersiveSpace) { _, newValue in
            Task {
                if newValue {
                    switch await openImmersiveSpace(id: "ImmersiveSpace") {
                    case .opened:
                        immersiveSpaceIsShown = true
                    case .error, .userCancelled:
                        fallthrough
                    @unknown default:
                        immersiveSpaceIsShown = false
                        showImmersiveSpace = false
                    }
                } else if immersiveSpaceIsShown {
                    await dismissImmersiveSpace()
                    immersiveSpaceIsShown = false
                }
            }
        }
    }
}

#Preview(windowStyle: .volumetric) {
    ContentView()
}