커스텀 노드로 픽셀 이펙트 (노이즈 패턴) 만들기

 

---

 

 

🌌 텍스처 좌표 (uv) 일정한 간격의 Grid로 변환

노드를 통한 구현과 코드를 통한 구현 비교

Multiply + floor 노드 사용

Custom node 사용

//HLSL

float2 uvGrid = floor(uv * 5.0);
return uvGrid;

 

floor 함수는 소수점을 버리고 가장 가까운 하한 정수로 변환한다. uv가 (1.3, 2.7)이라면 floor(1.3)은 1이 되고, floor(2.7)은 2가 된다.

 

//HLSL

int gridArray[5][5] = {{ 0, 0, 0, 0, 0},
                       { 0, 1, 0, 1, 0},
                       { 0, 0, 0, 0, 0},
                       { 0, 1, 1, 1, 0},
                       { 0, 0, 0, 0, 0},};

float2 uvGrid = floor(uv *5.0);

return (gridArray[int(uvGrid.y)]
                 [int(uvGrid.x)]);

gridArray 5x5크기의 2D 정수 배열이다. 배열의 각 요소는 0 또는 1로 초기화 되어있다. floor(uv*5.0) 좌표에 따라 각 셀의 값을 가져와 1좌표 값에 대해 화이트(1), 블랙(0)로 처리한다.

 

 

🌌 Pixel effect w.Texture

//HLSL

float2 gridSize = float2(24,24);

float2 uvGrid = floor(uv * gridSize) / gridSize;

float3 result = Texture2DSample(tex, texSampler, uvGrid);

//grayscale 변환 및 반환
return float(dot(result, float3(.299, .587, .114)));

gridArray 대신 float2 형태의 gridSize로 바꿨다. return의 경우 결과물이 grayscale이기 때문에 r,g,b가 회색으로 구현될 수 있는 값을 곱한다. 다른 값을 곱하는 이유는 r,g,b 컬러마다 밝기에 대한 민감도가 다르기 때문에 이를 참고하여 수치화 된 값을 사용하는 것.

• uv는 텍스처 좌표로, 일반적으로 (0.0, 0.0)에서 (1.0, 1.0) 범위 내의 값을 가진다.
• uv * gridSize는 텍스처 좌표를 그리드 크기만큼 확대한다. 예를 들어, uv가 (0.5, 0.5)라면 uv * gridSize는 (12, 12)가 된다.
• floor(uv * gridSize)는 확대된 좌표를 하한 정수로 변환하여 그리드 셀의 좌표를 만든다. 예를 들어, (12.7, 13.3)은 (12, 13)이 된다.
• 마지막으로 / gridSize를 통해 다시 0.0에서 1.0 사이의 텍스처 좌표로 정규화한다. 예를 들어, (12, 13)은 (12/24, 13/24) = (0.5, 0.5417)이 된다.
• dot(result, float3(.299, .587, .114)) 픽셀의 실제 시각적 밝기를 나타낸다. 즉 흑백화하는 것.

 

 

🌌 각 픽셀 주위에 엣지 넣기 (borderThickness)

텍스처 좌표를 일정한 그리드 크기로 변환하고, 그리드 경계 영역을 강조한다. 각 그리드 블럭은 엣지 내에 있는 픽셀은 유지하고 엣지 외부에 있는 픽셀은 제거한다.

//HLSL

float2 uvGrid = floor(uv * gridSize) / gridSize;
float2 gridBlock = 1 / gridSize;

//그리드 블록의 테두리 두께 설정
float borderThickness = 0.25;

//그리드 엣지 계산
float2 blockBorder = step(0.5 - borderThickness, frac(uv / gridBlock)) *
                    step(frac(uv / gridBlock), 0.5 + borderThickness);

//uvGrid 좌표에서 텍스처 색상 값을 샘플링한다                   
float3 result = Texture2DSample(tex, texSampler, uvGrid);

//블록의 엣지 부분에서만 텍스처 색상이 나타나도록 함
//엣지 밖 영역은 검은색(0)
result *= float(blockBorder.x * blockBorder.y);

return float(dot(result, float3(.299, .587, .114)));

gridSize는 float2 타입 파라미터를 추가하여 초기화 코드는 생략했다. 새 변수 gridBlock은 gridSize로 나누어 각 블록은 텍스처의 1/24 크기이다.

• frac 함수는 소수 부분을 취하여 [0.0, 1.0]범위로 만든다.
• step 함수는 두 개 값을 비교하여 Edge를 형성한다. step(edge, x)는 x가 edge보다 크거나 같으면 1.0, 그렇지 않으면 0.0을 반환한다.
• 두 step 함수의 결과를 곱하여 Edge 영역을 정의한다. Edge 영역은 그리드 블록의 중심을 기준으로 0.5 - borderThickness에서 0.5 + borderThickness 사이에 위치한다.

 

//HLSL

//노이즈 생성
struct pixelPlot
{
   float noise(float2 uvCoord)
   {
     return frac(sin(dot(uvCoord, float2(12.34, 56.78))) * 91011.1213);
   }
};

//pixelPlot 구조체의 인스턴스 생성
pixelPlot plot;

float2 uvGrid = floor(uv * gridSize) / gridSize;
float2 gridBlock = 1 / gridSize;

float borderThickness = 0.25;

float2 blockBorder = step(0.5 - borderThickness, frac(uv / gridBlock)) *
                     step(frac(uv / gridBlock), 0.5 + borderThickness);

float3 result = Texture2DSample(tex, texSampler, uvGrid);

result *= float(blockBorder.x * blockBorder.y);

//현재 픽셀의 밝기가 0보다 크다면, 즉 검정이 아니라면 노이즈를 추가
if (dot(result, float3(.299, .587, .114)) > 0.0)
{
    //각 노이즈 값은 임의의 오프셋을 더해 차이를 줌
    result = float3(plot.noise(uvGrid +frac(1.23)),
                    plot.noise(uvGrid +frac(4.56)),
                    plot.noise(uvGrid +frac(7.89)));
}

return result;

구조체 struct pixelPlot은 2D좌표(uvCoord)를 입력으로 받아 난수 노이즈 값을 생성한다. dot은 두 벡터의 방향과 크기에 따라 달라지는 단일 스칼라 값을 생성하고 그 결과를 sin 함수에 적용한 후 큰 숫자를 곱해 이후 연산에서 노이즈를 복잡하게 만든다. 그릐고 frac으로 입력 값을 0과 1 사이로 제한한다.

• dot(result, float3(.299, .587, .114)): 픽셀의 밝기를 계산한다. 이는 일반적으로 밝기를 계산할 때 사용되는 가중치이다.

 

 

🌌 Time 추가하여 무작위 픽셀 컬러 변하기

result = float3(plot.noise(uvGrid +frac(time/1.23)),
plot.noise(uvGrid +frac(time/4.56)),
plot.noise(uvGrid +frac(time/7.89)));

time을 넣어서 무작위로 픽셀 컬러가 변하게 할 수도 있다.

 

 

🌌 Ref.

https://www.youtube.com/watch?v=0fnHLMp0m7k