1.1 도형 - draw Circle

지난시간

step 함수를 사용해서 정점 범위 기준으로 4분면 렌더링을 해보고,

smoothstep을 사용해서 특정 부분 블렌딩을 해보았습니다.

 

이번엔 원을 그려봅시다.

원 정점좌표를 만드는 것이 아니라, 원에 해당하는 픽셀들을 선택한 후 픽셀의 색을 입히는 과정입니다.

 

step함수와 length 함수를 사용해서 작성합니다.

클립스페이스 좌표계의 정중앙은 원점 입니다.

 

원점과 픽셀 간 길이를 내가 원하는 반지름과 비교하여 작은 경우만 색을 칠해주면 됩니다.

 

isCircle = 1 - step(radius, length(position));

length 함수를 사용해서 원점과 픽셀간 거리를 구하고,

step함수를 사용하면 다음과 같은 리턴값을 얻습니다.

radius < 원점과 픽셀간 거리 : 원 외부 영역 , return value : 1

radius > 원점과 픽셀간 거리 : 원 내부 영역 , return value : 0

 

1에서 리턴된 값을 빼주게 되면 원 내부 영역일 경우 1을 리턴하게 됩니다.

 

아래 그림을 보면, 

픽셀 A와 B는 D(distance) 값이 0.25 이하이기 때문에 1을 리턴을 하게 되고,

픽셀 F는 D(distance)값이 0.25 이기 때문에 원의 경계에 해당하여 1을 리턴하게 됩니다.

반면, 픽셀C는 D(distance) 값이 0.25 이상이기 때문에, 0을 리턴하게 됩니다.

결국 1을 리턴하는 픽셀 값에 yellow color 값만 곱해주면 아래와 같이 원이 그려집니다.

 

픽셀 쉐이더를 사용한 원 결과

Shader "SimonLee/Shader7Unlit"
{
    Properties
    {
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct v2f
            {
                float4 vertex : SV_POSITION;
                float4 position: TEXCOORD1;
                float2 uv : TEXCOORD0;
            };
            
            v2f vert (appdata_base v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.position = v.vertex;
                o.uv = v.texcoord;
                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                float radius = 0.1;
                float circle = 1 - step(radius, length(i.position.xy));

                fixed3 color = fixed3(1, 1, 0) * circle;
                return fixed4(color, 1);
            }
            ENDCG
        }
    }
}

 

---------------------------------------------------------------

예제 사용한 Site :  https://niklever.com/courses