터치디자이너 전용 블로그 새로 개설했습니다.

터치디자이너에 대한 정보를 좀 더 얻고 싶으시면 아래 링크로 오시면 됩니다. ^^

https://computer-art.tistory.com/

Bend Deformer for Instances
with the vertex shader

vertex 쉐이더로 geometry
형태 변형(bend) Instance 하기 

초기 환경 설정 

Camera - Light - Geometry -> Render

Instance할 geometry 생성하기

Geometry op 안에 들어가서 tube 사이즈 늘리고
rows 추가해주기(rows늘어나면 좀 더 부드럽게 구부러짐.)

Instance할 position을 정해줄 sop grid op 생성

grid의 rows와 colums의 수를 늘려서
instance될 geometry의 수를 늘릴 수 있다.  
*재미를 위해 grid와 chop to op 사이에 noise sop op를 추가해주면
움직이는 grid위에 geometry가 instance 된다. 

GLSL material을 생성한다. 

phong op에서 ouput shader을 누르면 위와 같은 op들이 생성된다. 
phong glsl mat를 geometry op의 render 창의 material에 연결한다. 

vertex shader 수정

uRotationZ 지정 - bending 되는 정도

아까 만들어두었던 grid를 chop to를 거쳐서 sop to로 가져옴.

Geometry Instance 세팅

Instance활성화 시키고, sop to 데이터를 위와 같이 설정한다. 

sRotations 값 설정 

좀 더 random하게 구부러지는 느낌을 주기 위해서
null_rotations 값을 sRotations값을 설정하는데 사용. 

noise op의 y축에 absTime.seconds를 걸어서 
noise 값이 움직이도록 만듦. 

* absTime - 절대 시간
  me.time - 프레임 시간 (프레임이 끝나면, reset 됨. 따라서, 끊김.)

정리 

1. instance할 geometry 생성
2. instance 되는 도형의 좌표 grid 혹은 geometry 생성.
3. glsl material 생성 -> vertex 쉐이더 수정(bending / rotation)
4. geometry op에서 instance 적용. 

perfom mode -> 'f1' 단축키 / 작업 창을 모두 닫고 최종 영상만 보여줌. 

Particle System

전체적인 Flow

particle(point) 만들기

vertex shader 코드 

uWidth 는 noise top op 너비
sPositions는 noise top op 

최종

Shadertoy Conversion to TouchDesigner

쉐이더 토이 터치디자이너로 (GLSL TOP)

처음 shadertoy 코드를 복사해오면 에러가 뜨면서
분홍색과 파란색 에러 체크 박스가 뜬다. 

에러를 하나하나 보면서 수정해보도록 하자. 

쉐이더 토이 코드 위에는 'Shader Inputs'라는 창이 숨겨져 있는데. 
열어보면 아까 에러 떴던 코드들이 눈에 보인다. 

우선, 이것들을 수정하도록 한다. 

iTime -> float iTime; 으로 가장 상단에 선언해준다.

에러가 현격히 줄어들게 된다. 

iResolution -> iResolution은 해상도를 설정해주는 것이다. 

이를 해결하는데는 두 가지 방법이 있다.
첫 번째는 설정되어있는 해상도를 사용하는 것과.
두번째는 직접값을 설정해주는 것이다. 

첫 번째 방법이 더 이용하기 쉬우니 첫 번째 방법으로 해결한다. 

위처럼 코드를 작성해주면 error가 사라진 것을 확인 할 수 있다.
uTDOutputInfo.res.zw는 glsl에서 설정된 resolution값을 가져오게 된다. 

* #define이란?

프로그램에서 여러 번 사용되는 상수값을 고정적으로 정해두는 것.
매크로로 불리기도 함. 

ex) #define PI 3.14 (함수도 사용 가능.)

iChannel0 -> iChannel0은 주로, 이미지를 가져온다. 
touchdesigner는 이미지를 가져오는 내장함수를 제공한다. 

여기에서는 sTD2DInputs을 사용한다. 

pixel shader 오류는 모두 잡아냈다.
하지만, 'ERROR: No definition of main in fragment shader'가 뜬다. 

이 에러는 main함수가 정의되지 않아서이다. 
main 함수를 정의해주자. 

(중간에 코드가 잘 안작동해서 새로 고침. 하지만, process는 바뀐게 없어서 유지해두었다.)
위에 코드 같은 경우. feedBack을 사용했다.
shaderToy에서 buffer에 코드가 있는 경우 feedback 오퍼레이터를 사용한다.

아래 링크에는 GLSL_TOP과 관련된 자료를 찾아볼 수 있다. 

https://docs.derivative.ca/Write_a_GLSL_TOP

* cubemap 사용하기 

projection operator로 cubemap 형태로
image파일을 전환하는게 가능하다.

https://docs.derivative.ca/Write_a_GLSL_TOP

3D PipeLine 

GLSL material(vertex shader, pixel shader) 

vertex shader - 3D 모델의 vertex의 집합.
pixel shader - 화면에 출력할 최종 색상을 정함. 

vUV 
텍스처 픽셀 좌표 
texture co-ordinates of the pixel (built-in)

gl_FragCoord 
화면과 상관관계를 가진 픽셀 좌표 
contains the window-relative coordinates of the current pixel 

phong material을 수정하여, GLSL material 코드를 작성할 수 있다.
위에 보이는 빨간 박스를 눌러야 GLSL 오퍼레이터가 나타난다. 

material 적용은 geometry 오퍼레이터에 render에 drag해두면 된다.

https://docs.derivative.ca/Write_a_GLSL_Material

Compositing 

포토샵 Blending Mode(add(+), multiply(*), screen ...)

Procedural Drawing

코드로 원그리기 - step 함수