전체 글45 [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. [Shader] Bubble Shader 공부용으로 작성되는 페이지입니다. 틀린 부분이나 환경에 따라 오류가 발생할 수 있습니다. 비눗방울 표현 원리 비눗방울의 특징을 생각해보면 전체적으로 투명하고 주변 물체들이 비치는(reflect) 것이다. 대신, 비치는 현상 때문에 가운데 부분은 약간 불투명한 모습을 보여주며, 전체적으로 불규칙하고 무지개를 연상시키는 색상으로 이루어져있다.요약하자면 반사(주변부를 비춤) + 무지개 색(가장자리로 갈수록 강해짐) 핵심이다. 그 밖에도 비눗방울 자체의 성질상 고정되지 않고 일렁이는 특징도 표현하고자 하려면 쉐이더 파트에서 묘사 할 수 있다. 제작 방법 생각해보기 완벽한 물리 계산을 하기 어렵다면 Texture를 사용해서 제작하는 방법도 있다.계산식이 복잡하다는 이유도 있고, 색상 계산이 따로 필요.. 2025. 6. 18. [자료구조] 인덱스와 파일구조 공부용으로 작성되는 페이지입니다. 틀린 부분이나 환경에 따라 오류가 발생할 수 있습니다. 인덱스데이터베이스의 테이블에 대한 검색 속도를 향상시켜주는 자료구조이다. 인덱스를 관리하기 위한 추가 작업과 저장공간이 필요하기 때문에 잘못 사용할 경우 성능저하가 발생할 수 있다. 데이터베이스는 말그대로 데이터가 저장되어있는 집합체이다. 어떤 단체나 회사냐에 따라 데이터베이스의 내용물은 다르다.유저가 Query(질의)를 전달하면 DataBase에서 해당하는 데이터를 찾아서 유저에게 전달해주는데이 때 인덱스가 데이터마다 고유의 주소값(pointer)를 저장하고 기억해 데이터를 찾기 더 수월하게 만들어준다. 인덱스를 구성하기 위한 자료구조로는 B-Tree, B+Tree, Hash Table 가 있다. (1) .. 2025. 6. 16. [Photon] Photon Fusion 102 #1 씬 전환 공부용으로 작성되는 페이지입니다. 틀린 부분이나 환경에 따라 오류가 발생할 수 있습니다. Photon Fusion을 기반으로 Host Server가 작동하는 것은 확인하였다.그러나 예제 그대로 사용하기 보다는 내가 원하는대로 만들고 싶기도 하고, 아무래도 네트워크 기반이다 보니기존에 만들어둔 input 함수들이 제대로 동작하지 않는 슬픈 상황이 발생했다. 글로 기록하면서 구조도 함께 살펴보며 진행하려한다. 게임 시작 및 호스팅하기 의 멤버 함수인 StatGame(StartGameArgs args)로 Fusion 네트워크가 시작된다.아래는 photon에서 복사해왔던 스크립트다. 기존에는 테스트씬에 할당되어 게임 화면 옆에 버튼이 뜨는 형식이었다. #BasicSpanwer async v.. 2025. 6. 15. [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. [자료구조] 해싱 공부용으로 작성되는 페이지입니다. 틀린 부분이나 환경에 따라 오류가 발생할 수 있습니다. 해싱 (Hashing) 이란?각각의 데이터를 고유한 숫자 값으로 표현하고, 이를 통하여 기억저장소에 저장하거나 검색 작업을 수행하는 방식을 말한다. Hash Function을 통하여 Hash Table에 인덱스를 계산한다.다른 방식에 비해 검색속도가 가장 빠르다.삽입, 삭제의 빈도가 많을 때 유리하다. Key-Value 변환 방법 사용 : Hash Table은 (Key,Value) 구조로 데이터를 저장함 데이터 검색과 저장 뿐만 아니라 데이터 무결성 검사, 암호화에도 활용된다. 데이터 무결성 검사 : 데이터가 손상되거나 변경되지 않았는지 확인하는 과정이다 해시 함수(Hash Function) : 임의의 길이를 가진.. 2025. 6. 13. [Shader] 카툰 렌더링 #3 - 빛의 반사 영역과 정반사 이론편 공부용으로 작성되는 페이지입니다. 틀린 부분이나 환경에 따라 오류가 발생할 수 있습니다. 정반사의 원리 정반사(Specular)는 빛이 표면에서 반사되는 현상을 의미한다. 정반사 또한 빛과 반응하는 재질이 가진 속성이라고 보면 된다.난반사(Diffuse)가 물체의 빛을 흡수한 뒤 고르게 반사시키는 현상이라면, 정반사는 빛을 흡수하지 않고 반사시킨다. 즉, 난반사는 빛을 흡수하고 고르게 반사시켜 물체의 색상을 정해주(는 것 처럼 보임)지만 정반사는 빛을 반사시키기에 '하이라이트'를 만들어낸다.\ 하이라이트는 들어온 빛이 특정 영역에 집중되면서 발생하는 현상이다. 정반사는 반사된 빛의 방향과 관찰자나 카메라의 시선 방향에 따라 다른 결과가 나오는 게 특징이다.따라서 Specular BRDF를 구현할 .. 2025. 6. 12. [Shader] 카툰 렌더링 #2 명암 조절하기 공부용으로 작성되는 페이지입니다. 틀린 부분이나 환경에 따라 오류가 발생할 수 있습니다. 이번 강의에서는 쉐이더를 공부하다보면 자주 접하게되는 함수 Lerp(), Step() , smoothstep()가 메인이다. 색과 그라데이션디지털 기기에서는 색을 관리하기 위해 RGB 색상 모델을 사용한다.RGB 색상 모델은 색을 합칠수록 밝아져 최종적으로는 흰 색이 된다는 특성을 가지고 있다. RGB 모델 또한 세 원색을 혼합하는 처리, 즉 연산으로 결과값이 도출되기 때문에 무채색을 곱하면 명도와 채도가 낮아지는걸 확인할 수 있다.그라데이션이라는 말은 한 번쯤은 들어봤을텐데, 검 -> 흰색으로 점진적으로 밝아지는 명암을 일컫는 말이다.따라서 준비된 색에 흑백 그라데이션(H Gradient)을 곱한다면 그 .. 2025. 6. 11. [Shader] Post Processing : Tint Effect 공부용으로 작성되는 페이지입니다. 틀린 부분이나 환경에 따라 오류가 발생할 수 있습니다. 원래 Post Processing 관련 글을 작성하고 있었는데 생각해보니 간단한걸 먼저 만들어보고 진행하는게 좋을 거 같아서 먼저 작성하게되었다. 미리보기 : 최종 결과물 생각했던 것 보다 만들기 너무 힘들었다. 엄밀히 따지자면 Tint shader 자체는 복잡하지 않은데 렌더피쳐랑 너무 오래 싸웠다... Custom Post Processing : Tint 처음 만들어보는 효과인 만큼 가장 기본적인 효과라고 할 수 있는 Tint 효과를 만들어보려고 한다. 유니티 내장 Post Processing을 살펴보면 Tint는 따로 존재하는 효과가 아니라 Bloom의 Value에 해당한다.내가 만들 Tint 효과는.. 2025. 6. 11. [Shader] 카툰 렌더링 #1 렌더링의 기본 원리 공부용으로 작성되는 페이지입니다. 틀린 부분이나 환경에 따라 오류가 발생할 수 있습니다. 렌더링이란 무엇인가? : 빛, 표면, 카메라에 대하여 렌더링이란 다양한 디지털 데이터를 계산하여 화면 이미지로 출력하는 작업을 이야기한다.우리가 보는 모니터 화면은 결국 픽셀의 집합으로, FULL HD(1920x1080) 기준 총 200만개의 픽셀로 구성되어 있다.이러한 픽셀마다 색을 지정해주는 것을 렌더링 작업이라고 말한다. 렌더링 계산에는 빛, 물체 표면, 카메라(=눈) 이 필요하다. 빛과 색 물체는 특정 가시 광선(파장)을 반사하고 나머지는 흡수할 뿐 실제로는 색이 없다. 예를 들어 빨간 사과는 물체 자체가 '빨강색'을 고유하게 지니고 있는 게 아니라 빨간 파장을 반사해서 빨간색으로 보이는 것. 이렇게 .. 2025. 6. 9. 이전 1 2 3 4 다음
