Reality Composer Pro 알아보기

♪ 감미로운 인스트루멘탈 힙합 ♪ ♪ 안녕하세요 저는 에릭입니다 오늘 살펴볼 것은 Reality Composer Pro입니다 저희가 2019년에 소개한 Reality Composer는 증강 현실에 발을 들이는 도구였죠 이번 xrOS 출시와 함께 Reality Composer Pro를 소개합니다 3D 콘텐츠를 구성 및 편집 프리뷰할 수 있는 프로 개발자 도구죠 Reality Composer Pro로 몰입감 있는 3D 경험을 만들 수 있습니다 상호 작용 Dioramas 앱을 예로 들어 볼게요 근사한 국립 공원과 관심 지점을 축소된 크기로 살펴볼 수 있죠 이번 세션에서는 이러한 씬을 제작하는 데 활용할 수 있는 Reality Composer Pro의 다양한 기능을 알아보겠습니다 새로운 프로젝트로 시작한 후 Reality Composer Pro의 기본 UI를 살펴보고 3D 지형 및 위치 핀을 사용해 메인 씬을 구성해 보겠습니다 지형 위에는 구름과 지저귀는 새를 추가하죠 통계를 활용하여 성능을 최적화한 다음 마지막으로 기기에서 씬 프리뷰를 확인하겠습니다 그럼 시작하죠 먼저 프로젝트 설정입니다 설정 방법은 두 가지인데요 하나는 Xcode의 Open Developer Tool에서 Reality Composer Pro를 여는 겁니다 이 방법은 단독 Reality Composer Pro 프로젝트를 만들 때 적합하죠 다른 방법은 xrOS 앱 템플릿을 사용해 새 Xcode 프로젝트를 생성하는 겁니다 템플릿은 자동으로 Reality Composer Pro 프로젝트를 생성해 Xcode 프로젝트에 연결하죠 이 방법은 Xcode 앱에서 Reality Composer Pro 프로젝트를 사용할 때 적합합니다 이 방법으로 Dioramas 앱을 빌드해 보죠

Reality Composer Pro 프로젝트는 Swift 패키지입니다 Swift 패키지를 쓰면 Reality Composer Pro 작업이 쉬워지고 빌드 과정에서도 Xcode 앱에서 사용할 수 있게 콘텐츠가 프레임워크로 패키징되죠 Finder에서 Reality Composer Pro 프로젝트의 구조를 살펴보겠습니다 참고로 3D 콘텐츠 편집에 사용하는 파일은 USD입니다 Universal Scene Description이라고도 하죠 Apple이 3D 콘텐츠에 선호하는 파일 형식입니다 자세한 내용은 USD 파일 형식을 다루는 하단의 WWDC 세션을 참조하세요 파일을 구성하면 .rkassets 폴더의 모든 USD가 프레임워크로 컴파일되어 Xcode 프로젝트에서 사용할 수 있습니다 Xcode로 돌아가서 패키지를 선택하면 기본 씬의 3D 프리뷰가 나타납니다 씬을 더 자세히 살펴보거나 편집하려면 Open in Reality Composer Pro를 클릭하면 되죠 이번에는 Reality Composer Pro를 살펴보고 UI를 익혀 보겠습니다 중앙에는 뷰포트가 있습니다 뷰포트에서는 씬의 3D 물체를 시각화하고 살펴본 후 프리뷰할 수 있죠 뷰포트에서 이동하려면 W, A, S, D 키나 화살표 키를 쓰면 됩니다 더 정교하게 뷰포트를 제어하려면 Mac 호환 게임 컨트롤러를 연결하여 뷰포트에서 움직일 수 있습니다

맨 앞에는 계층 구조 패널이 있습니다 계층 구조 패널을 통해 손쉽게 씬의 3D 물체를 검색 및 선택 구성할 수 있죠 뒤쪽에는 인스펙터 패널이 있습니다 인스펙터 패널에서는 선택한 오브젝트의 프로퍼티를 쉽게 편집할 수 있습니다 예를 들어 위치나 회전, 스케일 등이죠

인스펙터 패널 하단의 컴포넌트 추가 버튼을 누르면 물체에 구성 가능한 내장 RealityKit 컴포넌트를 볼 수 있습니다 밑부분은 에디터 패널입니다 에디터 패널의 첫 번째 탭은 프로젝트 브라우저인데요 프로젝트 브라우저는 Reality Composer Pro의 프로젝트에 담긴 파일을 탐색하는 사용자 친화적인 기능입니다 또한 고급 편집에 쓰이는 다른 탭도 있죠 셰이더 그래프와 오디오 믹서, 통계입니다 Reality Composer Pro 프로젝트를 설정하고 UI도 둘러봤으니 이제 씬을 구성해 보죠 Reality Composer Pro 프로젝트에 에셋을 추가하는 방법은 세 가지입니다 첫 번째로 이미 컴퓨터에 있는 에셋을 프로젝트 브라우저로 불러오는 방법입니다 Dioramas 앱에 쓸 에셋을 불러와 보죠 프로젝트 브라우저에서 불러오기 버튼을 누르면 됩니다

좋아요, 프로젝트 브라우저에 에셋을 모두 불러왔습니다 두 번째는 콘텐츠 라이브러리입니다 Reality Composer Pro에서 선별해 제공하는 에셋 라이브러리죠

세 번째는 Object Capture입니다 실제 사물의 사진을 3D 모델로 변환하는 기능이죠 자세한 내용은 'iOS용 Object Capture 알아보기' WWDC 세션을 참조하세요 프로젝트에 에셋을 불러왔으니 이제 씬을 빌드해 보겠습니다 먼저 템플릿에서 생성한 구체를 삭제할게요 뷰포트에서 물체를 선택하고 딜리트 키를 누르면 되죠 프로젝트 브라우저에 요세미티 3D 모델과 이를 담은 디오라마 베이스가 있는데요 두 에셋을 계층 구조 패널로 드래그하여 해당 에셋에 대한 참조를 씬에 추가합니다 디오라마 베이스에 머티리얼이 없어 보이네요 콘텐츠 라이브러리에서 쓸 만한 머티리얼이 있는지 보겠습니다 도구 막대의 추가 버튼을 클릭해 콘텐츠 라이브러리를 열고 쓸 수 있는 머티리얼을 찾아 보죠 콘크리트 머티리얼이 좋아 보이네요 씬으로 드래그합니다 그러면 에셋을 자동으로 프로젝트에 불러오고 씬에 참조하죠 디오라마 베이스의 머티리얼을 계층 구조에서 선택하고 콘크리트 머티리얼을 쓰도록 업데이트합니다

좋아요, 이번에는 위치 핀을 놓겠습니다 위치 핀을 뷰포트에 드래그하여 엘캐피턴에 놓습니다

Command+D로 위치 핀을 두 번 복제하고 세 가지 핀의 이름을 바꿉니다 엘캐피턴과 커시드럴록스 머세드강으로요 이제 커시드럴록스와 머세드강의 위치 핀을 올바른 위치로 옮깁니다

위치 핀을 올바른 위치에 놨으니 이제 그룹화하여 깔끔하게 정리하고 'Yosemite_Location_Pins'로 그룹 이름을 바꿉니다

위치 핀을 새 버전으로 업데이트하려면 어떻게 할까요? 위치 핀은 모두 이전에 불러온 위치 핀 파일을 참조합니다 USD의 기능을 활용하면 Location_Pin 에셋을 업데이트할 때 새 Location_Pin 에셋을 프로젝트에 불러와 기존 에셋을 대체할 수 있죠

이번에는 파티클 이미터를 살펴보겠습니다 파티클 이미터를 쓰면 씬에서 이런 불꽃 효과를 만들 수 있습니다 파티클 이미터는 두 요소로 구성됩니다 파티클과 이미터죠 파티클과 이미터는 모두 조정 및 수정 가능한 여러 섹션의 변수를 지닙니다 파티클에는 색상과 프로퍼티 포스 필드 렌더링 섹션이 있습니다 이미터에는 타이밍과 모양 생성 섹션이 있죠 파티클 이미터로 구름을 추가하여 씬에 재미와 역동성을 더해 보겠습니다 어떻게 하면 될까요? Reality Composer Pro 프로젝트는 얼마든지 많은 씬을 포함할 수 있습니다 씬은 Xcode 앱에서 바로 사용할 수 있는 완성본이거나 재사용할 수 있는 콘텐츠죠 이 경우 작은 구름이 모여 구름을 만드는데요 먼저 재사용 가능한 구름 조각 씬을 빌드하겠습니다

3D 공간의 서로 다른 위치에 놓인 여러 구름 조각을 합쳐서 완전한 구름 씬을 만들어 보죠 완성된 구름으로 세 가지 변형을 만들고 그 세 가지 구름을 메인 씬에 넣겠습니다 Reality Composer Pro로 돌아와서 File, New, Scene 순으로 가서 새 씬을 생성합니다 씬 이름은 'Cloud_Chunk'로 하죠 새 씬이 생성되면 새 탭으로 윈도우에 나타납니다 씬에 파티클 이미터를 추가하는 방법은 두 가지인데요 첫 번째는 계층 구조 패널 하단의 추가 버튼을 쓰는 겁니다 두 번째는 씬의 물체에 파티클 이미터 컴포넌트를 추가하는 거죠 인스펙터 패널 하단의 컴포넌트 추가 버튼을 클릭해서요 파티클 이미터를 프리뷰하려면 인스펙터 패널 상단의 재생 버튼을 누르면 됩니다 잘 안 보이네요 설정으로 가서 뷰포트 배경을 변경하여 파티클 이미터가 더 잘 보이게 하겠습니다

훨씬 낫군요 파티클은 무척 재미있습니다 이런저런 프로퍼티로 실험하다가 원하는 결과를 얻을 때가 많죠 파티클 이미터를 만드는 데에는 정답이 없습니다 마음에 드는 상태로 만들기만 하면 되죠 한 가지 주의할 점은 씬에 파티클 수가 많으면 성능에 영향을 미친다는 겁니다 따라서 사용하는 파티클 개수에 주의를 기울이는 게 좋습니다 파티클 이미터 컴포넌트에는 두 섹션이 있는데요 파티클과 이미터죠 파티클 섹션은 개별 파티클의 형태를 제어합니다 이미터 섹션은 원점 위치에서 파티클이 나오는 방식을 제어하죠 빌드에 사용할 수 있는 프리셋이 제공되므로 처음부터 시작하지 않아도 됩니다 구름은 Impact 프리셋과 가장 유사하니 Impact 프리셋을 선택하겠습니다 저는 주로 이미터 탭에서 먼저 작업한 후 파티클 탭으로 넘어갑니다 이미터 탭의 첫 번째 섹션은 타이밍입니다 파티클 방출 사이사이에 멈춤 현상이 약간 있는데요 이는 유휴 기간 변수 때문입니다 이 값을 0으로 설정하면 파티클이 일정하게 방출되죠 다음은 모양 섹션입니다 구름은 원통보다는 구 모양에 가까우므로 이미터 모양을 구 모양으로 바꾸겠습니다 또한 구름은 부피 내에 파티클이 있어야 하니 Birth Location을 Surface에서 Volume으로 바꿉니다 구름은 세로보다 가로로 퍼져 있으니 x축 및 z축 스케일을 y축 스케일보다 크게 조정하겠습니다

멋지네요 마지막으로 isLocalSpace를 확인해 앞으로 파티클 이미터의 부모에 대한 이동 및 회전, 스케일 조정이 파티클 이미터에도 적용되도록 합니다 파티클 탭으로 넘어가서 개별 파티클의 모습을 조정해 보죠 Birth Rate는 동시에 존재하는 파티클 수를 정의합니다 성능 변화 주의 차원에서 이 값을 2000에서 500으로 내리고 얼마나 다른지 확인해 보죠 모습이 약간 달라지지만 충분히 멋지므로 500으로 유지하겠습니다 Impact 프리셋 덕분에 파티클의 색상과 텍스처가 이미 잘 설정돼 있습니다 따라서 해당 섹션의 변수는 수정하지 않고 프로퍼티 섹션으로 넘어가겠습니다 파티클이 너무 짧게 나타나는 것 같은데요 지속 시간을 2초에서 5초로 늘려서 결과를 봅시다

멋지네요 모션과 포스 필드 렌더링 섹션에 손볼 수 있는 변수가 더 있지만 지금 나타난 효과도 원하는 것과 비슷하므로 다른 섹션은 수정하지 않겠습니다 단축키 Command+S로 씬을 저장하고 다음 단계로 넘어가죠 좋아요 재사용할 구름 조각을 만들어 봤습니다 이제 새 씬을 열고 여러 구름 조각을 결합해 완전한 구름을 만들어 보죠 단축키 Command+N으로 새 씬을 생성합니다 씬 이름은 'Cloud_A'로 하죠

구름 조각을 세 번 참조하겠습니다 Cloud_Chunk 에셋을 프로젝트 브라우저에서 계층 구조 패널로 드래그하면 되죠

세 구름 조각의 부모를 선택하고 인스펙터 패널 상단에서 재생을 누르면 구름을 프리뷰할 수 있습니다 이제 머니퓰레이터로 구름 조각을 3D 공간의 다른 위치로 움직여 보겠습니다

훌륭합니다 하나의 완전한 구름처럼 보이네요 이번에도 Command+S로 씬을 저장합니다 다양한 구름을 만들기 위해 Cloud_A와 비슷한 과정을 거쳐 구름을 두 개 더 만든 후 구름 조각을 다르게 배치했습니다 이러한 씬을 Cloud_B와 Cloud_C라고 하죠 메인 씬으로 돌아가 보겠습니다 'Clouds'라는 그룹을 만들어서 Cloud_A와 Cloud_B, Cloud_C를 불러왔습니다 지형 위에도 멋지게 배치했죠 파티클 이미터를 한 번에 프리뷰하려면 Clouds 그룹을 클릭하고 인스펙터 패널 상단에서 재생을 누르면 됩니다 좋아요, 잘 완성되어 가네요 다음은 씬에 오디오를 통합하는 방법입니다 오디오 파일 및 오디오 파일 그룹 오디오 소스로 오디오를 추가할 수 있습니다 프로젝트 브라우저로 씬에 불러온 오디오 파일은 반복 등 다양한 방식으로 구성할 수 있습니다 한 오디오 파일은 하나 이상의 물체에서 재생되고 한 물체는 하나 이상의 오디오 파일을 재생합니다

오디오 파일 그룹은 씬의 오디오 파일로 구성됩니다 물체가 오디오 파일 그룹을 재생할 때마다 그룹 내 오디오 파일이 무작위로 재생되죠

오디오 소스는 오디오 파일 및 오디오 파일 그룹을 씬으로 송출하는 방식을 정합니다 오디오 소스의 종류는 세 가지입니다 공간, 주변, 채널이죠 공간 오디오 소스는 오디오 재생을 위한 3D 공간의 위치 및 방향을 제공합니다 테이블 위에 놓인 라디오 에셋에 공간 음향을 사용한다고 생각해 보세요 주변 오디오 소스는 오디오 재생 시 3D 공간의 위치는 제공하지 않고 방향만 제공합니다 동쪽에서 불어오는 바람 소리에 주변 오디오를 쓴다고 생각해 보세요 우리가 아무리 동쪽으로 걸어간다고 해도 바람 소리는 항상 같은 방향에서 들리겠죠 마지막으로 채널 오디오 소스는 오디오 재생을 위한 3D 공간의 위치나 방향을 둘 다 제공하지 않습니다 환경의 배경 음악으로 채널 오디오를 쓴다고 생각하세요 오디오 제작 개념을 알아봤으니 Dioramas 프로젝트에 실제로 적용해 봅시다 재사용 가능한 에셋으로 새 씬을 만들겠습니다 새의 3D 모델에 오디오 파일 및 오디오 소스를 결합한 에셋이죠 Command+N을 누르고 씬 이름은 'Bird_With_Audio'로 합니다

애니메이션이 있는 새와 새소리 오디오 파일을 앞서 프로젝트 브라우저에 불러왔는데요 이러한 에셋을 계층 구조 패널로 드래그하여 씬에 참조로 추가합니다 이제 씬의 모든 오디오 소스가 새소리 오디오 파일 두 개를 활용할 수 있죠 이번에는 계층 구조 패널 하단의 추가 버튼으로 공간 오디오 소스를 추가합니다 또한 공간 오디오 소스를 씬의 물체에 추가할 때는 인스펙터 패널 하단의 컴포넌트 추가 버튼을 클릭하고 메뉴에서 Spatial Audio를 선택해도 됩니다 공간 오디오 소스에는 위치와 방향이 있으므로 새의 부리 쪽에 배치해야 더 사실적으로 들리죠

인스펙터 패널 상단의 재생 제어로 공간 오디오 소스를 프리뷰할 수 있습니다

공간 오디오 컴포넌트의 추가 프로퍼티는 조정이 가능한데요 예를 들면 초점이나 프리뷰할 새소리 오디오 파일 등이죠

공간 오디오 소스를 재생하라는 지시가 있을 때마다 두 새소리 중 하나를 무작위로 고르는 방법은 뭘까요? 바로 오디오 파일 그룹을 쓰면 됩니다 오디오 파일 그룹은 계층 구조 패널 하단의 동일한 추가 버튼으로 만들 수 있습니다 오디오 파일을 오디오 파일 그룹으로 드래그하고 그룹 이름을 'Bird_Calls'로 하겠습니다

이제 공간 오디오 소스를 프리뷰할 때마다 오디오 파일 그룹의 새소리 중 하나가 무작위로 선택돼 재생됩니다

재사용 가능한 에셋을 만들었으니 이 Bird_With_Audio 씬을 저장 후 닫고 메인 씬을 다시 열어 보죠 Bird_With_Audio의 참조 다섯 개를 Birds 그룹 아래 V 자 모양으로 배열했습니다 Birds 그룹을 선택하고 인스펙터 패널에서 재생 버튼을 누르면 동시에 모든 새의 애니메이션과 오디오를 프리뷰할 수 있죠 보기에도 좋고 듣기에도 좋네요 동일한 방법으로 Forest_Sounds 오디오 파일을 메인 씬에 추가했습니다 'Nature_Ambience'라는 주변 오디오 소스와 함께요 Xcode 앱에서 오디오를 재생하려면 추가 코드가 필요합니다 자세한 내용은 'Xcode로 Reality Composer Pro 콘텐츠 작업하기' 세션에 있습니다 메인 씬의 콘텐츠가 준비됐으니 통계 사용법을 알아보겠습니다 통계는 씬의 성능을 최적화하는 전용 에디터입니다 카테고리는 다음과 같이 나뉘죠 일반, 물리 애니메이션, 파티클 이미터 오디오, 머티리얼 지오메트리, 텍스처 메인 씬에서 통계를 사용해 봅시다 에디터 패널의 통계 탭을 클릭하면 카테고리 컬렉션이 나타납니다 각 카테고리에서 오른쪽 상단의 확장 버튼을 누르면 카테고리를 더 자세히 볼 수 있죠 지오메트리의 확장 버튼을 눌러 볼게요 이 씬에 삼각형이 대략 464,000개 쓰였으며 Diorama_Base가 256,000개로 삼각형을 가장 많이 쓰고 있음을 알 수 있습니다 눈에 띄는 점이 있네요 디오라마 베이스가 3D 지형보다 시각적으로 덜 복잡한데도 삼각형을 훨씬 더 많이 쓰고 있습니다 3D 모델링 소프트웨어에서 디오라마 베이스의 지오메트리를 단순화하면 좋겠군요 Dioramas 앱의 에셋을 제작한 제 동료 스콧 웨이드가 이 작업을 도와줬습니다 프로젝트 브라우저의 가져오기 버튼으로 단순화된 새 디오라마 베이스를 프로젝트에 가져옵니다 새 Diorama_Base를 선택하고 기존 디오라마 베이스를 대체합니다 이제 통계로 돌아가서 지오메트리 카테고리를 확인하죠

Diorama_Base가 쓰는 삼각형이 2,500개로 줄었습니다 씬의 삼각형 개수를 464,000개에서 210,000개로 절반 이상 줄였죠 게다가 씬의 모습은 변경 전과 동일합니다 방금 본 것처럼 통계는 씬의 성능 최적화에 큰 도움을 줍니다 한 가지가 남았습니다 기기에서 씬을 프리뷰하는 법을 알아보죠 헤드셋을 컴퓨터에 연결하고 도구 막대의 기기 내 프리뷰 버튼 옆 드롭다운 메뉴에서 선택한 뒤 기기 내 프리뷰 버튼을 토글합니다 그러면 AR에서 눈앞에 씬이 나타나죠 핀치 및 드래그로 씬을 회전할 수 있고

줌 제스처로 씬 크기를 조정할 수 있습니다 이렇게 하면 목표 xrOS 플랫폼에서 3D 콘텐츠가 어떻게 보이는지 쉽게 파악할 수 있죠 시간 제약 때문에 다른 국립 공원인 카탈리나섬에도 이번 세션에서 진행한 것과 비슷한 절차를 수행해 뒀습니다 동일한 워크플로로 카탈리나섬의 3D 지형을 메인 씬에 추가했죠 또한 위치 핀을 추가해 카탈리나섬의 투하버스와 파슨스랜딩 리본비치를 표시했습니다 마지막으로 Nature_Ambience 오디오 소스에 사용할 Ocean_Sounds 오디오 파일도 추가했죠 지금까지 Reality Composer Pro를 살펴봤습니다 3D 씬을 제작하는 강력한 도구죠 파티클 이미터나 오디오 소스 등 흥미로운 RealityKit 컴포넌트를 추가할 수도 있습니다 또한 씬을 최적화하고 헤드셋으로 프리뷰할 수 있죠 셰이더 그래프를 사용하여 요세미티와 카탈리나섬 지형을 전환하는 방법을 알아보려면 닐의 세션 'Reality Composer Pro의 머티리얼 살펴보기'를 참조하세요 또한 상호 작용형 경험을 만드는 방법은 어맨다의 세션 'Xcode로 Reality Composer Pro 콘텐츠 작업하기'를 참조하세요 여러분이 Reality Composer Pro로 무엇을 빌드할지 기대됩니다 도움이 되었길 바라며 시청해 주셔서 감사합니다 ♪