TouchDesigner에서 GLSL을 작성하는 두 가지 방법

12/2에 후쿠오카에서 개최된 Touch in Kyushu vol.1에 참가해 왔습니다.
htps : // ぺあち x. 코 m/에ぇぇt/327787

TouchDesigner에서는 GLSL을 직접 쓸 수 있습니다만, 조금 편리한 방법을 가르쳐 주셨으므로, 그 때의 메모입니다.

이전 준비

텍스트 노드에서도 편집은 할 수 있습니다만, Preferences -> DATs -> Text Editor 로 에디터의 패스를 지정해 두면, 문맥 메뉴의 Edit Contents 로부터 에디터로 편집할 수 있게 됩니다.

GLSL TOP으로 쓰기

우선 GLSL TOP을 사용하는 방법.
간단한 Fragment Shader가 자동으로 연결되므로 이를 수정합니다.info DAT 를 접속해 두면 에러등 디버그 정보를 볼 수 있어 편리합니다.


디폴트의 ​​Fragment Shader는 이하.

// uniform float exampleUniform;

out vec4 fragColor;
void main()
{
    // vec4 color = texture(sTD2DInputs[0], vUV.st);
    vec4 color = vec4(1.0);
    fragColor = TDOutputSwizzle(color);
}

GLSL에서 gl_FragColor가 fragColor로 대체되었습니다.TDOutputSwizzle() 는 Windows와 macOS 텍스처의 컬러 채널 차이를 흡수하는 함수입니다.GLSL TOP 에 입력한 이미지와 동영상은 sTD2DInputs[0]texture(sTD2DInputs[0], vUV.st) 에서 UV에 맞는 색상 값을 얻을 수 있습니다.

외부 변수의 설정은, Paremeters 로 Vector1 등에 변수명과 값을 입력해, 코드에 대응한 변수명을 uniform 로 선언하면 사용할 수 있게 됩니다.

uniform float iTime;
uniform vec2 iResolution;

iTime에는 absTime.seconds를 사용하여 초 수를 얻고 iResolution에는 화면 해상도를 입력합니다.

TouchDesigner의 GLSL에서도 gl_FragCoord를 사용할 수 있으므로 다음과 같은 현재 픽셀 위치를 0.0-1.0으로 정규화하는 코드 등을 그대로 사용할 수 있습니다.

vec2 p = (gl_FragCoord.xy * 2.0 - iResolution) / min(iResolution.x, iResolution.y);

이제 ShaderToy와 같은 셰이더 아트를 만들 수 있습니다.

GLSL TOP의 문서는 이쪽.
노이즈 함수 등 편리한 기능이 준비되어 있습니다.
htps //w w. 데리 ゔ ぁ ゔ ぇ. 가 / 우우키 099 / 어서 x. php? 치 t ぇ = W 리테 _ 아_GLSL_과 P

GLSL MAT로 작성

GLSL TOP 에서는 Fragment Shader 밖에 쓸 수 없습니다만, Vertex Shader나 표면 쉐이더를 쓰는 경우는 GLSL MAT 를 사용합니다.
하지만, 이치로부터 쉐이더를 쓰는 것은 힘들기 때문에 간단한 방법을 소개해 둡니다.
Phong MAT 또는 PBR MAT 를 배치합니다.
그런 다음 배치한 운영자의 Parametors -> RGB -> Output Shader 에서 Output 를 클릭합니다.


그러면 셰이더 코드가 출력되므로, 이것을 베이스로 취향에 수정해 가면 좋다.


더 자세한 정보는 GLSL MAT 문서에서 얻을 수 있습니다.
htps //w w. 데리 ゔ ぁ ゔ ぇ. 가 / 우우키 099 / 어서 x. php? 치 t = W 리테 _ 아_GLSL_ 마테리아 l