Touch Designer로 프로그램을 위한 CG 반사 자막을 제작할 때의 Tips

이 글은 TouchDesigner Advent Calendar 2021의 다음날 글이다.
나는 휴일에 터치 디자이너@miyukki를 좋아한다.
제목과 같이 터치 디자이너가 프로그램을 위한 CG와 자막을 제작할 때의 팁을 소개한다.
터치 디자인러를 사용해 만든 작품이라고 하면 3D 공간에서 표현한 예술 작품도 많고, 최근에는 프로그램 제작을 위한 자막과 합성화면도 많이 쓰인다.
소개한 팁은 결국 내가 CG를 만들 때의 예의일 뿐 정답은 아니었다.또 다른 좋은 방법이 있다면 댓글로 알려주세요.
UI를 SOP에 구성하여 카메라 모드 변경
우선 반사형 자막 등 UI를 만들면 탑에 구축된 일을 상상하기 쉽다(나도 그렇다).하지만 실제로 SOP을 조합해 3D 공간에 구축하는 것이 더 편리하다고 생각한다.
SOP 사용의 이점은 다음과 같습니다.

GPU에 따라 구현 가능

3차원 공간 표시

가 필요할 때 간단하게 처리할 수 있다

객체의 Z 좌표를 통해 도면 레이어를 변경할 수 있음(후술)

TouchDesigner를 열고 Camera COMP, Geometry COMP, Ambient Light COMP, Render TOP을 구성합니다.

구성된 Camera COMP를 선택하여 View>Projection을 [Orthographic]로 변경합니다.
또한 View>Ortho Origin은 View>Ortho Width를 [1]로 지정합니다.

Projection을 Orthographic으로 설정하면 카메라의 얼룩이 부착되지 않습니다.
3D 공간을 표현하는 데는 퍼스가 필요하지만, 2D 공간을 표현하는 데는 퍼스가 필요하지 않기 때문에 여기서 잃어버린다.
또한 Ortho Width를 1로 설정하여 카메라가 그리는 너비는 1입니다.
이로써 x 좌표는 -0.5에서 0.5, y 좌표는 -0.2815에서 0.2815의 width=1 height=0.55625의 공간을 완성한다.16:9 디스플레이를 전제로 하므로 이 이외의 경우는 적당히 다시 읽어 주십시오.

그리고 이 좌표계에 따라 설정하고 싶은 것을 설정하기만 하면 된다.
그나저나 Z축은 깊이라기보다는 도면층을 변경하는 작업입니다.(겹치는 객체가 앞에 표시됨)
UI에 텍스쳐 붙여넣기
이미지나 텍스트 등 TOP을 그리려면 SOP 평면에 Color Map이 지정한 Material을 지정할 수 있습니다.
구체적으로 말하면

Constant Map을 설정하고 TOP을 위로 드래그(Color Map으로 지정)

Geometry COMP에 설정된 Constant Map을 위로 드래그하고 Material(Material 지정)을 클릭

이렇게 하면 탑의 결을 드러낼 수 있다.

투명한 텍스쳐 사용 시 고려 사항
텍스쳐를 붙여넣을 때 이미지에 알파가 있으면 Constant MAT>Common&Blending을 [ON]으로 설정하여 이미지의 통과 정보를 반영할 수 있습니다.

예를 들어, 다음 그림의 이미지를 준비합니다.

이미지 크기와 동일한 Rectangle SOP에 Material로 붙여넣은 후

이런 느낌에서 정보를 투과하는 동시에 중첩 디스플레이를 할 수 있다.
그나저나 이 글을 쓸 때 이전 버전(20.44350 확인)에서 아래 그림처럼 알파 텍스쳐가 붙으면 뒤쪽이 투명한 버그(?)네, 투과하려는 각 층을 분리해 렌더탑을 합성해야 하는데 최근 발표된 202.15240 이후 수정이 이뤄졌습니다.

아마 Tips라기보다는 기본적인 절차의 소개라고 할 수 있겠지만, 이것을 바탕으로 애니메이션과 통신 등을 더하면 대부분의 일이 이루어지지 않을까 싶습니다.
앞서 트위터에 올린 올스타 감사제의 복제 재현은 기본적으로 이 기사에 쓰여 있어 가능하다.
터치 디자이너로 올스타 감사제 차트 화면(logo는 후야제)pic.twitter.com/1urayTS4Rh-미키키키키키키키키(@toriimiyukki)October 14, 2021

안녕히 계세요!