[고도엔진 내부 쉐이더 공부] 그림 낙서 효과

그림 낙서 효과

기본적으로 그림 낙서 효과를 구현하기 위해서, 버텍스를 이리저리 랜덤 방향으로 움직이게끔 쉐이더를 구현하면 된다.

이러한 효과를 내기 위해서 평면 메시를 여러 개로 조각 내야 한다. VERTEX를 조절해서 화면의 찌그러짐을 구현하는 것이기 때문에, 버텍스가 많을 수록 찌그러지는 효과를 부분적으로 적용할 수 있다. 꼭짓점 4개만 존재하는 평면인 경우, 조절 할 점이 4개 밖에 없기 때문에 아무리 변형하고 싶어도 4개의 꼭짓점만 변형하기에 찌그러짐 효과가 단조로울 수 밖에 없다.

위 평면은 꼭짓점이 4개밖에 없는 예시이다. 따라서 버텍스가 여러개 존재하는 메시를 만들어서 그 위에 텍스처를 그리고, 버텍스를 랜덤으로 이리저리 움직여주면 다양한 부분에 종이 접는 효과나, 삐뚤빠뚤한 그림 효과를 낼 수 있다.

MeshInstance2D

엔진의 2D에서는 MeshInstance2D 라는 객체를 사용해서 2D 표면 메시를 만들 수 있다. 이 메시를 만들 때 조각내서 만들 수 있는데, 여기서는 Quad Mesh로 만들어본다.

해당 메시를 만들어주면 Subdivide Width 및 Subdivide Depth를 조절할 수 있는데 메시를 얼마나 섬세하게 조각내는 것인지에 대한 정보이다. 20으로 해주면 20번 조각 내는 것이다. 즉 표면이 원래는 꼭짓점 4개(트라이앵글 2개)로 존재하지만, 이를 여러개 조각내어 여러 쿼드로 구성하는 것이다.

그리고 이 Vertex에 랜덤으로 움직이는 코드를 넣어주면 이리저리 삐뚤 빠뚤한 그림이 담긴 메트리얼을 구성할 수 있다.

shader_type canvas_item; uniform sampler2D tex; float rand(vec2 vector){ return fract(sin(dot(vector.xy, vec2(12.98, 78.23))) * 43758.54); } float cutValue(float value, float scale){ return round(value * scale) / scale; } void vertex() { VERTEX += rand(VERTEX+ cutValue(TIME,3.0))*.01; } void fragment() { vec2 uv = vec2(UV.x,1.0-UV.y); vec4 tex2 = texture(tex, uv); COLOR = vec4(tex2.rgb,1.0); }

원리는 간단하다. 텍스처를 받아 샘플링하여 표시하되, Vertex는 각 위치마다 시간 1/3초 마다 난수를 생성하여 최대 0.01 크기를 가지는 값을 생성한다. 그리고 이 값을 VERTEX에 이리저리 더해주면 각 랜덤 난수가 위치마다 더해진다. 그리고 이를 GPU는 자동으로 보간하기 때문에 UV값을 그대로 가져다 사용하면 이리저리 삐뚤 빠뚤한 그림이 구현된다.