[TouchDesigner Vol.2] 인터페이스? 일단 만들면서 배우자!

INTRO 어? 이거 익숙한데?

새로운 프로그램을 켠다는 것은 완전히 낯선 곳 한가운데 뚝 떨어지는 것과 같은 두려움을 줍니다. 저도 터치 디자이너의 새카만 화면을 처음 마주했을 때 솔직히 막막했죠.

 

하지만 다른 언어를 번역하듯, 우리가 이미 잘 아는 건축의 언어를 TouchDesigner의 언어로 통역해 보면 어떨까요? 터치 디자이너는 시각적인 신호만 다루는 툴이 아닙니다. 지오메트리(Geometry)를 다루고 렌더링까지 끝낼 수 있는 영상과 상호작용에 특화된 그래스호퍼입니다.

 

오늘은 지루한 메뉴 설명은 과감히 건너뛰고, 단 10분 만에 움직이는 ‘키네틱 파사드(Kinetic Facade)’를 직접 만들어보겠습니다.

 

겁먹지 마세요, 몇가지 색깔만 기억하면 됩니다!

설치하셨으면 실행해보세요! TouchDesigner의 작업 공간에서 좌클릭 두 번 혹은 Tab 키를 누르면 Operator 메뉴가 뜹니다. Operator들은 서로 실시간으로 연결시켜 복잡한 퍼즐을 만들 수 있습니다 (노드= Operator).

 

Surface Operator (파랑): 3D로 올린 매스(Mass)들이 바로 이 파란색 노드입니다. Box, Sphere, Grid 등 형태를 만들고 자르고 붙이는 모든 3D 모델링 작업이 여기서 이루어집니다.

 

 

Channel Operator (초록): 형태를 움직이게 하는 수학적 연산, 수치, 센서 혹은 음악 데이터입니다. 그래스호퍼의 Number Slider나 수학 기호 연산자들이 이 초록색 패밀리에 속합니다.

 

 

Texture Operator(보라): 렌더링, 혹은 포토샵 필터라고 생각하면 쉽습니다. 지오메트리에 입힐 질감(Texture) 그리고 최종 영상의 색감을 보정하는 역할을 합니다.

 

 

Components (COMP 회색): 다른 operator들을 담는 컨테이너

 

 

MAT (노랑): 재질 (Materials)

 

 

CREATE: ‘춤추는 큐브 파사드’ 만들기

그래스호퍼였다면 매트릭스를 짜고 데이터를 쪼개느라 복잡했겠지만, TouchDesigner에서는 단순하게 끝낼 수 있습니다. 일단 좌측 상단에 File > New를 눌러 새로운 프로젝트를 시작합니다.

 

 

먼저 파란색 SOP 메뉴에서 Grid를 꺼내고 parameter 창에서 (노드를 누르면 우측에 나오는 창) Rows/ Cols) 20개의 점을 만듭니다. 여기에 파란색 Noise 노드를 연결하면, 평평했던 땅이 일렁이는 파동으로 변합니다. 그 뒤에 기준점 역할을 할 파란색 null 노드를 연결합니다.

 

 

 

 

이제 파란색 Box를 꺼내 크기를 0.04로 아주 작게 줄인 뒤, 회색 COMP operator Geometry(geo1) 컨테이너에 넣습니다. 두 Components들을 잇는 회색 화살표가 이제 보일겁니다.

 

 

여기서 인스턴싱(Instancing)을 켭니다. Geo Parameters panel에 아까 만든 일렁이는 땅 데이터를 끌어다 놓고, 위치(X, Y, Z) 값으로 지정합니다. 순식간에 400개의 큐브가 파도처럼 춤추는 파사드가 완성됩니다.

 

 

 

파사드가 제자리에서만 움직이면 재미없죠? 턴테이블처럼 형태를 돌려보겠습니다.

초록색 메뉴에서 숫자 그래프인 LFO를 꺼내고, Math 노드를 달아 그 범위를 0에서 360(도)으로 맞춰줍니다.

 

 

(가장 중요!) 여기서 초록색 데이터 노드 우측 하단의 작은 십자가(+) 버튼(Viewer Active)을 꼭 누르세요. 그래야 이 숫자를 마우스로 잡을 수 있습니다. 마우스로 잡은 숫자를 쭈욱 끌고 가 파란색 Geometry 노드 ㅍ[EXPORT ROTATE]로 연결합니다.

 

이제 형태가 스스로 회전하기 시작합니다.

 

 

이제 촬영을 하고 꾸며볼까요? 회색 Camera와 Light를 꺼내고, 보라색 Render 노드를 꺼내면 드디어 뷰파인더 너머의 이미지가 보입니다. 노란색 Wireframe operator를 꺼내 선(Line)으로 바꿔주고, 선 색깔을 바꿔줍니다.

 

 

마지막으로 미디어 아트 특유의 빛 번짐 효과를 실시간으로 합성할겁니다.

원본 렌더링 이미지 옆에 Blur 노드를 달아 선을 뿌옇게 뭉갭니다. 그리고 Composite(합성) 노드를 꺼내 원본 이미지 (render1)와 뿌연 이미지(blur1)를 모두 연결해줍니다(Operation: Add).

 

 

 

Why Bake? 실시간(Real-time)이 주는 쾌감

TouchDesigner는 결과물을 구울(Bake) 필요가 없습니다.

 

 

Grasshopper에서는 로직을 수정한 뒤 결과를 보려면 라이노로 데이터를 Bake 하고, 또 렌더링을 돌려야만 최종 결과물의 느낌을 알 수 있었습니다. 그 과정의 단절이 디자인 스터디의 흐름을 자주 끊어먹곤 합니다.

 

하지만 방금 우리가 만든 형태를 보시면 수치를 바꾸는 즉시 요동치는 속도와 굴곡이 실시간으로 변합니다. 이 즉각적인 피드백 구조야말로 수많은 변수를 테스트(Variable Testing)해야 하는 건축학도에게 터치 디자이너가 최고의 스터디 파트너가 될 수 있는 이유입니다.

 

OUTRO: EXPLORE

이번 시간에 ‘바람(Noise)’이라는 임의의 수치로 건물을 움직였다면, 다음 시간에는 영상을 가져와 소리(Audio)를 입혀보고 blob tracking, blur filter 등 무드를 입히는 작업을 보여드리겠습니다.

 

여러분들의 건축적 가능성을 확장시키는 다음 튜토리얼도 렉터스와 함께해주세요!