Reality Composer Pro의 머티리얼 살펴보기

♪ 감미로운 인스트루멘탈 힙합 ♪ ♪ 안녕하세요 저는 닐스입니다 Reality Composer Pro 팀의 머티리얼 엔지니어죠 이번 세션은 'Reality Composer Pro의 머티리얼 살펴보기'입니다 지금부터 Reality Composer Pro로 xrOS용 머티리얼을 빌드하는 방법을 알아보겠습니다 먼저 xrOS의 머티리얼 종류를 알아보고 이러한 머티리얼이 어떻게 3D 객체의 모습을 바꾸는지 알려 드리죠 MaterialX 개방형 표준을 기반으로 xrOS에서 사용 가능한 새 머티리얼 유형을 소개합니다 그다음으로 보여 드릴 것은 Reality Composer Pro의 내장 에디터인 셰이더 그래프로 머티리얼을 디자인하는 방법입니다 또한 노드 그래프로 머티리얼의 재사용 가능 부분을 만드는 과정도 알려 드리죠 마지막으로 멋진 3D 콘텐츠를 위한 지오메트리 수정자를 빌드해 보겠습니다 가장 먼저 머티리얼이 뭔지 설명해 드리겠습니다 머티리얼은 3D 씬에서 객체의 외형을 정의합니다 머티리얼은 간단한 단색일 수도 있고 이미지를 사용할 수도 있습니다 목재 텍스처를 의자 모델에 적용하거나 벽돌 이미지를 벽에 매핑할 수 있죠 머티리얼은 매우 정교할 수도 있습니다 물결치는 듯한 애니메이션을 쓰거나 시야각에 따라 외형을 달리할 수도 있죠 각도에 따라 색이 변하는 자개를 떠올려 보세요 또한 머티리얼이 적용된 객체는 지오메트리가 변할 수도 있습니다 xrOS의 머티리얼은 물리 기반 렌더링을 씁니다 줄여서 PBR이라고 하죠 다시 말해 아티스트가 객체의 외형을 디자인할 때 현실 세계의 물체와 유사한 물리적 속성을 쓸 수 있습니다 물체의 금속 속성이나 거친 표면 등이 있죠 물리 기반 머티리얼의 예를 몇 가지 살펴보겠습니다 다음은 간단한 PBR 머티리얼을 사용한 구체입니다 이 머티리얼의 일정한 파란색은 반사율이 40%로 설정돼 있죠 이미지를 적용해서 색상과 표면의 거칠기를 설정하면 사실적인 콘크리트를 만들 수도 있습니다 또는 금속성을 높여서 쇠 같은 물체를 만들 수도 있죠 자동차 페인트를 칠한 듯한 결과를 낼 수도 있습니다 머티리얼은 하나 이상의 셰이더로 구성됩니다 셰이더는 머티리얼의 외형을 실제로 계산하는 프로그램이죠 iOS와 iPadOS의 RealityKit 2에는 CustomMaterial을 도입했는데요 CustomMaterial의 셰이더는 Metal에서 손수 코딩됩니다 xrOS에는 새로운 유형의 머티리얼인 ShaderGraphMaterial이 도입됐습니다 이 독점적 방식으로 xrOS 맞춤형 머티리얼을 만들 수 있죠 ShaderGraphMaterial은 기능 블록의 네트워크나 그래프를 사용하며 이름도 거기서 유래했습니다 ShaderGraphMaterial은 MaterialX라는 개방형 표준을 기반으로 하며 아티스트 친화적인 머티리얼 정의 방식입니다 MaterialX는 2012년에 Industrial Light & Magic에서 처음 만들었습니다 ShaderGraphMaterial의 셰이더 유형은 크게 두 가지입니다 물리 기반과 커스텀이죠 물리 기반은 기본 PBR 셰이더입니다 간단한 용도에 적합하죠 각 프로퍼티에 색상이나 이미지 등 변하지 않는 상숫값을 제공해 이 셰이더를 구성할 수 있습니다 반면 커스텀 셰이더는 3D 객체의 외형을 마음대로 정밀하게 제어할 수 있습니다 커스텀 셰이더는 애니메이션을 통합하거나 객체의 지오메트리를 조정하고 객체의 표면에 반짝이는 페인트를 칠한 듯한 특수 효과도 만들 수 있습니다 ShaderGraphMaterial은 Reality Composer Pro 내 셰이더 그래프 에디터로 빌드할 수 있습니다 하단의 셰이더 그래프 노드를 확인하세요 즉각적으로 뷰포트에 지형의 모양을 정의하고 있죠 기본 내용을 알아봤으니 커스텀 머티리얼을 빌드해 봅시다 xrOS의 머티리얼은 Reality Composer Pro로 제작할 수 있습니다 3D 콘텐츠를 구성 및 편집 미리보기 할 수 있는 새로운 프로 개발자 도구죠 머티리얼을 살펴보기 전에 앱을 알아보고 싶다면 'Reality Composer Pro 알아보기' 세션을 통해 에디터 UI와 그 기능에 익숙해지시길 바랍니다 해당 세션에서 보여 드렸던 요세미티밸리 모델에 지형도 모양을 적용해 보겠습니다 머티리얼의 수학적 원리를 설명한 다음 Reality Composer Pro의 셰이더 에디터로 이동해 빌드해 보죠 다룰 내용이 많군요 바로 시작합시다 에릭이 빌드한 요세미티밸리 디오라마입니다 시간 절약을 위해 비활성화 커맨드로 이 세션에 불필요한 객체는 모두 숨겼습니다 중앙의 페디스털과 그 위의 풍경만 남았죠 멋지네요 지형 기능을 추가해 보죠 지형의 경사를 따라 등고선을 표시하여 모델의 지형을 표현하는 머티리얼을 추가할 겁니다 등산을 계획할 때 보는 지형도와 비슷한 모습이 나타나겠죠 커스텀 머티리얼을 생성해서 셰이더로 지형에 등고선을 그려 봅시다 지형 내에서 고도가 동일한 모든 영역에 등고선을 그려야 합니다 이 도식에서 보이는 것처럼요 예를 들어 이 파란 선은 지형에서 고도 1천 m의 모든 지점을 표시합니다 위에서 보면 오른쪽 도식처럼 보이죠 함수 집합을 사용해 머티리얼을 만들어서 모델에 이러한 선을 그리겠습니다 시작하려면 추가 버튼을 클릭합니다 프로젝트 하단 계층 구조 패널에 있죠 머티리얼에 들어가면 두 가지 셰이더 유형이 있습니다 물리 기반과 커스텀이죠 커스텀을 선택합니다 그러면 에디터의 셰이더 그래프가 나타나죠 새 커스텀 셰이더는 두 가지 노드로 시작합니다 보라색 surface 노드와 파란색 outputs 노드죠 머티리얼의 활성 표면은 outputs 노드의 커스텀 표면 입력에 연결돼 있습니다 표면에 대한 입력을 통해 셰이더의 물리 기반 매개변수를 설정할 수 있죠 예를 들면 바탕색요 머티리얼에 구체적인 이름을 지정하겠습니다 TopographyMaterial이 좋겠군요 새 머티리얼을 요세미티밸리 모델에 할당하는 게 중요합니다 프로젝트 계층 구조에서 선택하세요 인스펙터의 머티리얼 바인딩으로 간 뒤 바인딩 메뉴에서 TopographyMaterial을 선택합니다 그러면 모델이 회색으로 변하는 걸 볼 수 있죠 머티리얼이 작동하고 있지만 아직 흥미로운 점은 없네요 한번 만들어 보죠 계층 구조에서 TopographyMaterial을 선택하여 셰이더 그래프 에디터로 돌아갑니다 노드를 표면 입력에 연결하여 올바른 위치에 선을 그리겠습니다 이 예제 지형에서 머티리얼이 어떻게 작동하는지 보여 드리죠 머티리얼은 위치를 기반으로 모델 어디에 지성선을 그릴지 정해야 합니다 우선 머티리얼에 position 노드를 추가하겠습니다 이 노드는 3D 공간에서 렌더링 위치를 반환합니다 여기서는 위치의 높이만 중요하므로 separate 노드를 추가하여 위치의 Y 좌표만 추출합니다 Separate는 지형 높이와 함께 증가하는 Y 좌표 위치를 반환합니다 Reality Composer Pro에서 이 두 노드를 머티리얼에 추가해 보죠 노드를 추가하려면 에디터의 배경을 더블 클릭 하세요 그러면 새 노드 피커가 나타납니다 사용 가능한 노드 목록을 전부 둘러보거나 이름이나 키워드로 노드를 검색하세요 'position' 입력 후 목록에서 Position 노드를 선택하여 셰이더에 삽입합니다 position이 출력하는 3D 공간 위치는 머티리얼이 렌더링되는 위치입니다 머티리얼이 높이에 따라 변하므로 separate 노드를 추가해 위치의 Y 컴포넌트를 추출하겠습니다 배경을 더블 클릭하여 새 노드 피커를 열고 Separate 3 노드를 추가합니다 에디터에서 연결하려면 노드 출력을 클릭해서 노드 입력으로 드래그하면 되죠 이 두 노드를 합치면 지형의 높이가 나옵니다 다음으로 separate 노드의 출력을 modulo 노드에 전달합니다 modulo는 두 값을 나눈 나머지를 내놓죠 modulo를 사용하여 원하는 간격의 지성선으로 높이를 나눕니다 그러면 이런 결과가 나오죠 높이가 구간별로 나뉘었습니다 각 범위의 높잇값은 0에서 시작하여 해당 범위 높이까지 증가합니다 이 점이 다음 단계에서 중요합니다 Reality Composer Pro에서 머티리얼에 modulo 노드를 추가해 보겠습니다 더블 클릭으로 노드를 추가한 후 연결하는 대신 새 연결을 드래그해서 빈 곳으로 가져가면 이미 연결된 노드를 한 번에 생성할 수 있습니다 새 노드 피커에 'modulo'를 입력하고 Modulo 노드를 클릭해 삽입하세요 modulo는 입력이 두 개입니다 첫 번째는 피제수이고 두 번째는 제수죠 노드를 연결하지 않아도 인스펙터에서 편리하게 상숫값을 입력에 넣을 수 있습니다 인스펙터에서 두 번째 인수를 0.1로 변경하세요 이는 제수이며 높이 범위의 너비를 정합니다 출력하기 전에 할 일이 한 가지 남았습니다 ifgreater 노드를 사용해 반복되는 값이 지형의 어느 좁은 구간에 속하는지 확인해 봅시다 ifgreater 노드가 반환하는 값은 비교 결과에 따라 화면에 표시되는 두 가지 구간 색상 중 하나를 나타냅니다 높이의 값이 셰이더 지성선 너비보다 크면 배경색을 선택합니다 원하는 선의 너비 내에 높이가 있다면 지성선 색상을 선택하죠 ifgreater 노드를 머티리얼에 추가하고 결과를 확인합시다 modulo 노드의 결과를 지성선 너비에 선택한 값과 비교해야 합니다 ifgreater 노드를 추가해서 비교해 보죠 ifgreater는 두 입력을 비교하여 첫 번째 입력이 두 번째 입력보다 크면 하나의 값을 반환하고 첫 번째 입력이 두 번째 입력보다 작으면 다른 값을 반환합니다 ifgreater 노드는 부동 소수점 값을 출력하도록 설정돼 있지만 여기서는 두 색상 중 하나를 선택해야 합니다 지형 색상과 지성선 색상이죠 인스펙터의 유형에서 노드 출력을 RGB로 변경합니다 이제 두 가지 색상을 고릅시다 인스펙터의 True Result 옆에 있는 색상 피커를 클릭해서 지형 색상을 설정합니다 흰색으로 하죠 Flase Result는 지성선 색상인데요 검정으로 설정하겠습니다 그러면 흰색 지형에 대비를 많이 줄 수 있죠 여러 값을 시도한 결과 0.002가 선 너비에 적합한 값이었습니다 따라서 인스펙터에서 비굣값을 0.002로 설정하겠습니다 ifgreater 노드 출력을 표면의 Diffuse Color 입력에 연결합니다 좋아요, 이제 머티리얼이 지형의 모든 지점에 색상을 설정했고 지성선 머티리얼도 생성됐습니다 이번에는 노드 그래프 기능의 사용법을 알아보겠습니다 노드 그래프로 복잡한 머티리얼을 단순화할 수 있고 자체 노드를 생성하여 그래프 일부를 재사용할 수 있죠 노드 그래프로 머티리얼에 실제 지형도 형태를 부여하겠습니다 머티리얼에 있는 선 사이에 두 번째 선 집합을 추가해 보죠 현재 머티리얼은 다음과 같습니다 세분화를 추가하면 이렇게 변할 겁니다 먼저 머티리얼에 지성선을 그리는 네 가지 노드부터 살펴봅시다 그걸로 노드 그래프를 구성해 보죠 그러면 네 가지 노드가 하나로 결합됩니다 마지막으로 노드 그래프의 인스턴스를 생성해 기능을 재사용해 보죠 한 노드 그래프가 기존의 선 집합을 그리고 그 인스턴스가 두 번째 선 집합을 그리게 됩니다 Reality Composer Pro로 돌아가서 빌드해 보죠 다음은 지성선 셰이더입니다 선의 색상과 위치를 계산하는 네 가지 노드를 드래그하여 선택합니다 선택했으면 우 클릭 후 Compose Node Graph를 선택합니다 그러면 노드가 단일 노드로 나타납니다 다른 그래프 내에서 사용할 수 있죠 새 노드를 설명하는 이름을 지어 봅시다 Lines로 하죠 이 노드 그래프를 복제하여 두 번째 선 집합을 그리겠습니다 그러려면 계층 구조 패널에서 인스턴스 생성 커맨드로 인스턴스를 생성해야 하죠

인스턴스는 라이브 복사본으로 원본 노드 그래프에 일어나는 변경을 반영합니다 머티리얼을 선택해서 돌아가 보죠 새 인스턴스를 SecondaryLines라고 하겠습니다 노드 그래프와 그 인스턴스가 그리는 선은 간격과 색상이 서로 달라야 하므로 Spacing과 Color라는 두 가지 입력을 원본 노드 그래프에 추가해 프로퍼티를 제어하겠습니다 원본 노드 그래프를 더블 클릭 해서 수정하죠 인스펙터에서 입력과 출력을 노드 그래프에 추가하세요 Spacing이라는 입력을 추가하고 유형은 Float로 설정합니다 Color라는 입력도 추가해서 지성선 색상을 제어하겠습니다 입력 유형을 Color3로 설정하세요

이제 그래프에서 올바른 위치에 연결해 보죠

프로젝트 계층 구조에서 머티리얼을 선택하여 돌아가 보겠습니다 노드 그래프에 방금 생성한 입력 두 개가 생겼고 인스턴스가 새로운 입력을 상속받았습니다 원본 Lines 노드 그래프에 아까 선택한 값으로 간격을 설정합니다 이제 인스턴스 노드 그래프에 더 작은 간격과 밝은 색상을 선택합니다

마지막 단계는 원본 노드 그래프와 인스턴스 노드 그래프의 출력을 결합하는 것입니다 두 노드 그래프 모두 흑백으로 선택했으니 multiply 노드를 사용해 색상을 합칠 수 있죠 좋아요, 두 가지 선 집합으로 된 지성선 머티리얼이 멋지게 완성됐습니다 이번에는 지오메트리 수정자를 알아보겠습니다 이는 커스텀 머티리얼의 기능으로 실시간으로 모델을 수정하는 데 쓰입니다 지오메트리 수정자와 높이 데이터를 사용해서 정적 지형 모델을 대체하고 다시 만들어 보죠 그런 다음 지오메트리 수정자를 확장하여 두 가지 지형을 동적으로 애니메이팅하겠습니다 요세미티밸리와 캘리포니아의 카탈리나섬이죠 작업이 끝나면 서로 다른 두 위치 사이에 애니메이팅이 가능한 동적 지형 머티리얼이 완성됩니다 방법을 알아보죠 지금까지 살펴본 셰이더는 전부 표면 셰이더입니다 이러한 셰이더는 렌더링 시 모델의 각 픽셀에 물리 기반 즉 PBR 속성을 설정합니다 지오메트리 수정자는 표면 셰이더와 비슷하지만 객체의 지오메트리에서 작동합니다 실제로 Reality Composer Pro의 동일한 에디터에서 바로 빌드할 수 있죠 높이 맵 데이터를 사용해 요세미티밸리의 지형을 생성하는 지오메트리 수정자를 간략히 설명하겠습니다 평평한 지오메트리를 포함하는 평면 디스크 모델로 시작하죠 이것이 기본 표면입니다 다음으로 지형 높이 데이터를 사용합니다 모델 내 여러 위치의 높이에 대한 2D 데이터죠 지오메트리 수정자로 지형을 알맞은 정도로 올리겠습니다 그러면 원하는 지형이 완성되죠 기본 버전을 보여 드렸으니 두 지형 높이 집합으로 두 위치 사이에 애니메이션을 적용하는 버전을 보여 드리겠습니다 요세미티밸리와 카탈리나섬 사이에요 새로운 뷰입니다 평면 모델로 시작해서 지오메트리 수정자가 꼭짓점을 수직으로 이동시킵니다 2D 높이 맵의 데이터를 사용해서요 가장 먼저 비활성화 커맨드로 이전에 빌드한 요세미티밸리 모델을 숨깁니다 동일한 요세미티밸리 모델을 만들 건데요 이번에는 지오메트리 수정자를 사용해 보죠 프로젝트 브라우저에 있는 평면 디스크 모델로 시작합니다 프로젝트 계층 구조의 루트 엔티티로 드래그하여 가져올 수 있죠 DynamicTerrainMaterial이라는 새 머티리얼을 생성해 디스크에 할당합니다 이제 지오메트리 수정자로 넘어가죠 셰이더 그래프 에디터에 지오메트리 수정자 표면이 필요합니다 따라서 PBR 표면과 함께 머티리얼에 추가하겠습니다 output 노드의 커스텀 지오메트리 수정자 입력에서 연결을 드래그하고 새 노드 UI에서 지오메트리 수정자를 선택합니다 먼저 요세미티밸리 이미지를 표면에 적용해 보죠 이미지 데이터를 읽기 위해 image 노드를 사용합니다 인스펙터의 image 노드 파일명 입력에 요세미티밸리 이미지를 할당하겠습니다 지형이 평면이라 좀 이상해 보이네요 바로 해결해 보겠습니다 계곡의 높이 데이터가 필요한데요 색상 데이터 대신 높잇값을 담고 있는 이미지 파일에서 찾을 수 있죠 데이터가 이미지에 있으므로 image 노드를 또 추가해서 읽겠습니다 이제 높이 데이터가 포함된 요세미티밸리 EXR 이미지를 새 image 노드의 파일명 입력에 할당합니다 지오메트리 수정자는 모델의 꼭짓점을 모든 방향으로 옮길 수 있지만 이 경우에는 수직으로만 이동하면 되므로 Combine 3 노드를 삽입해서 Y 컴포넌트 집합만 있는 3D 벡터를 생성하겠습니다 이를 GeometryModifier 표면의 Model Position Offset 입력에 연결하면 이렇게 평면 모델이 요세미티밸리로 변형되죠 한 단계가 더 남았습니다 꼭짓점을 움직일 때는 모델의 표면 법선 벡터도 새 지형 모양에 맞게 설정해야 합니다 높이 데이터로 이를 계산하는 방법도 있지만 오늘 사용해 볼 것은 지오메트리의 법선을 미리 계산한 이미지입니다 다른 image 노드를 생성해서 법선을 읽어 보죠

미리 계산돼 있으니 정확도를 높이기 위해 표면 셰이더의 법선 입력에 직접 연결하겠습니다 표면이 기대하는 법선값은 -1에서 1 사이지만 이미지의 법선은 0에서 1 사이입니다 remap 노드로 이미지의 값을 재매핑합니다

이렇게 높이 데이터를 통해 평면 지오메트리에서 지형을 만들어 봤습니다 이번에는 디오라마를 동적으로 만들고 한 지형에서 다른 지형으로 모핑하는 기능을 추가해 보죠 애니메이션 전환을 추가해서 요세미티밸리를 카탈리나섬으로 바꿔 보겠습니다 그러려면 우선 다른 image 노드 집합을 기존 지오메트리 셰이더에 추가해야 합니다 카탈리나섬 지형의 높이와 색상, 법선을 포함하는 노드죠 그런 다음 mix 노드를 추가해 높이와 법선, 색상의 두 집합을 혼합합니다 마지막으로 mix 노드에 값을 연결하여 두 데이터 집합 간의 혼합을 제어합니다 Reality Composer Pro에서 빌드해 보죠 지금까지 만든 머티리얼은 이렇습니다 이번에 추가하는 image 노드 집합은 높이와 색상, 법선이라는 동일한 데이터를 포함하지만 요세미티밸리가 아닌 카탈리나섬의 데이터입니다 이제 mix 노드를 추가해 양쪽의 색상과 높이, 법선을 혼합하겠습니다 마지막으로 mix 노드에 0에서 1의 상수를 연결하여 표시되는 지형을 제어합니다 혼합 상수를 1로 설정하면 지형이 카탈리나섬으로 나타납니다 혼합 상수를 0으로 설정하면 요세미티밸리가 나타나죠 두 지형끼리 전환하는 머티리얼이 완성됐으니 이제 Swift 코드에서 전환 진행률 값을 변경 가능하게 만들어 보죠 승격 커맨드를 사용해 진행률값을 머티리얼 입력으로 변환합니다 머티리얼의 입력은 머티리얼 프로퍼티가 되어 Swift 코드에서 액세스할 수 있게 되죠 Dioramas Swift 앱에서 머티리얼을 쓸 준비가 됐습니다 최종 버전은 이렇습니다 지성선과 동적 지형을 결합했죠 이 버전에는 몇 가지 개선 사항이 추가됐습니다 앤티앨리어싱된 지성선과 앰비언트 어클루전 맵이 모두 셰이더 그래프로 추가됐죠 이 세션의 샘플에서 확인해 보세요 여기까지입니다 오늘은 xrOS의 머티리얼을 간략히 살펴보고 Reality Composer Pro의 셰이더 그래프 에디터로 동적 머티리얼을 디자인해 봤습니다 노드 그래프를 사용해 그래프를 구성하고 재사용 가능한 노드를 직접 만드는 법도 배웠죠 마지막으로 지오메트리 수정자를 통합하여 객체를 동적으로 바꾸는 법도 자세히 살펴봤습니다 Reality Composer Pro는 머티리얼 디자인에 엄청난 가능성을 제공합니다 Reality Composer Pro의 기능은 이 외에도 다양하며 xrOS에서 몰입형 경험을 제작하는 데 도움이 될 것입니다 어맨다의 세션인 'Xcode로 Reality Composer Pro 콘텐츠 작업하기'에서 Reality Composer Pro 콘텐츠를 Dioramas Swift 앱에 통합하는 방법을 알아보세요 또한 아직 시청하지 않으셨다면 에릭의 'Reality Composer Pro 알아보기' 세션에서 기본적인 내용을 알아보세요 xrOS 콘텐츠를 살펴보고 디자인하는 게 즐거우셨길 바랍니다 시청해 주셔서 감사합니다 ♪