TouchDesigner7 [GLSL] Tracking Object Color with GLSL 공부용으로 작성되는 페이지입니다. 틀린 부분이나 환경에 따라 오류가 발생할 수 있습니다. 최종 결과물 미리보기테스트는 웹캠으로 했지만 외부 카메라나 어플을 사용해서도 충분히 가능하다. 만들것? TD 관련 영상을 뒤적거리던 도중...제법 멋있는 영상을 발견했다. 처음에는 Kinect 센서 중심으로 사용하는 싶었는데, 영상을 시청해보니 따로 뎁스나 스켈레톤을 추적하는게 아니라 GLSL과 Feedback만으로 구성된 아주 간단한 프로젝트였다! 신기하고 재밌어보여서 시도해보았다. 원리 : Feedback과 HSV 변환 튜토리얼에서는 키넥트 센서를 사용하긴 했지만 언급했다싶이 Depth나 Skeleton을 사용하지 않기 때문에 내장 웹캠이나 싸구려 캠으로도 충분하다. 이 프로젝트의 핵심은 바로 'Fee.. 2025. 6. 24. [GLSL] Mosaic Effect 공부용으로 작성되는 페이지입니다. 틀린 부분이나 환경에 따라 오류가 발생할 수 있습니다. 오늘 공부 내용 모자이크 효과 : UV 조정하기 모자이크 효과는 결국 uv의 해상도를 조절하여 만드는 것이다. vec2 p = vUV.st; float d = 10; p.x = floor(p.x * d); vec4 color = texture(sTD2DInputs[0], p); //vec4 color = vec4(1.0); fragColor = TDOutputSwizzle(color); p.x에 d로 분할을 추가해주면 Topto에서 계단 현상을 보이는 것을 확인할 수 있다. 모자이크 효과 : 해상도 조정하기 위 모자이크 효과를 만들면, 하나 신경쓰이는게 있다. 바로 빈 픽셀이 발생한다는 점. uv를 이동.. 2025. 6. 22. [GLSL] RGB Shift 공부용으로 작성되는 페이지입니다. 틀린 부분이나 환경에 따라 오류가 발생할 수 있습니다. 학습 목표 이번 강의에서는 RGB로 색상을 별개로 지정하기 UV를 이동하여 색상을 이동하기 CHOP을 이용하여 Beat에 따라 변화하는 파라미터를 제작 순서대로 진행된다. RGB로 색상 별개 지정 우선 UV와 텍스쳐를 별개의 변수에 저장해준다. 다만, 강의 영상처럼 텍스쳐를 샘플러 변수에 대입하면 오류가 발생한다.영상에서 해결한 방식대로 이미지를 삽입해도 오류 픽스가 되질않아서 그냥 sTD2DInputs를 그대로 사용해주었다. #그대로 사용 color.r = texture(sTD2DInputs[0], p).r; 같은 방식으로 나머지 GB를 가져와주면 본래 색상대로 이미지가 표현된다. 즉, 이 단계에서 .. 2025. 6. 15. [TD] Ripple Effect Based on Camera 공부용으로 작성되는 페이지입니다. 틀린 부분이나 환경에 따라 오류가 발생할 수 있습니다. 최종 결과물 미리보기 요즘 GLSL 작업 외에 TD를 만질 일이 없어서 오랜만에 건드리고 싶었다.오늘은 손의 위치에 따라 화면을 물결처럼 흐트러뜨리는 효과를 만들어보았다.안 그래도 GLSL로 Fluid 효과를 TD내에서 구현하고 싶은데, 공부 후에 hand tracking과 결합해보고 싶다. Hand Tracking in Touchdesigner GitHub - torinmb/mediapipe-touchdesigner: GPU Accelerated MediaPipe Plugin for TouchDesignerGPU Accelerated MediaPipe Plugin for TouchDesigner - tori.. 2025. 6. 13. [GLSL] GLSL 내장함수 : step, Mix 공부용으로 작성되는 페이지입니다. 틀린 부분이나 환경에 따라 오류가 발생할 수 있습니다. 이번 강의 내용 목차 4번째 강의는 크게 IF문 / 함수(Step, Mix)로 구성되어있다. if문을 통해서 한 이미지 내에서 분기점을 만들고, 그 분기점에 따라 다른 이펙트가 적용되도록 만드는 것이 이번 강의의 목적이다.참고로 문법적인 상세한 설명은 하지 않을 예정이며 모두 다루진 않으니 영상도 한 번쯤 시청하는걸 권한다. IF문 TD 내의 좌표를 생각해보자. 지난 시간처럼 따로 곱해주지않는한 좌표는 기본적으로 (0,0) -> (1,1) 로 구성되어있다. if문과 좌표값을 적절히 사용하면 한 이미지 내에서도 여러가지 변형을 적용할 수 있다. void main(){ vec2 p = vUV.st; ve.. 2025. 5. 30. [GLSL] Zoom Effect 공부용으로 작성되는 페이지입니다. 틀린 부분이나 환경에 따라 오류가 발생할 수 있습니다. 의도치않게 밀리고 밀린 GLSL 시리즈... HLSL을 공부하느라 밀렸다는 것도 약간 아이러니하다 흥미로운 TD 튜토리얼 영상을 찾아서 그걸 공부해보기전에 TDSW GLSL 시리즈를 끝내고 싶어서 다시 시작했다. GLSL와 크게 관련 없는 부분은 길게 설명해두지 않았으니 가급적 원본 동영상도 시청하길 권장한다!Zoom Effect : UV이번 시간에 만들어볼 것은 이미지가 zomm in-out 되는 간단한 이펙트다!우선 이미지를 한 장 준비해서 Index 0로 GLSL top에 연결해준다. v.UV를 변수로 대체해서 진행해보자. 이 때 sTD2DInputs[0] 텍스쳐와 같이 쓰게되는데, 이것은 TD에 내장되어.. 2025. 5. 29. [GLSL] Graphics pipeline과 Vector4 공부용으로 작성되는 페이지입니다. 틀린 부분이나 환경에 따라 오류가 발생할 수 있습니다. 1. OpenGLopenGL은 Open Graphic Library로, 3D 그래픽을 처리하는 역할을 한다.컴퓨터가 그래픽을 처리하는 과정을 흔히 Graphics Pipeline이라고 표현한다. 특히 OpenGL의 경우 그래픽을 그리기 위해서 Vertex Shader와 Fragment Shader가 필수적으로 필요하다.경우에 따라서는 Fragment Shader는 Pixel Shader라고도 부른다. (TD도 Pixel Shader로 정의되어있음)이 두가지 셰이더는 프로그래머가 코드 작성 및 수정이 직접적으로 이루어진다. Geometry Shader : Vertex Shader 다음에 실행되며 도형을 조정하는데 .. 2025. 3. 19. 이전 1 다음
