1.2 도형 - Draw Rectangle - 2

이전에 Rectangle 그리는 방법을 배웠습니다.

 

다른 방식의 사각형 렌더링 예제를 구현 해보도록 하겠습니다.

그리고 두개의 사각형을 그려보도록 하겠습니다.

 

전 예제에서는 사각형을 그리기 위해서는

좌측하단, 우측상단 두개의 좌표를 구하면서 시작을 했었습니다.

 

이번에는 소스를 보면서 시작 하도록 하겠습니다.

float rect(float2 pt, float2 size, float2 center) 
{
    float2 p = pt - center;
    float2 halfSize = size * 0.5;
    float2 result = step(-halfSize, p) - step(halfSize, p);                
    return result.x * result.y;
}

pt에서 center를 빼주게 되면 position p는 center 방향으로 이동하는 것 같은 효과가 발생합니다.

center 값을 더해야 되지 않나 라는 생각이 들 수 있지만 빼는 것이 맞습니다.

 

가운데 노랑색 사각형이 우측 상단으로 이동한다고 가정해 봅시다.

A 픽셀 컬러 값은 B 픽셀 값을 가져와야 하기 때문에,

A Position 값에서 Center 값을 빼준 위치 값을 빼주어야 합니다.

 

이동된 위치 기준으로 생각하셔야 합니다.

이 개념은 앞으로 이동, 회전이나 효과등 여러 부분에서 사용이 됩니다.

 

float2 result = step(-halfSize, p) - step(halfSize, p);   

result.x에 해당하는 영역이며, 빨간색 영역이 제외되어 가운데 영역만 남는다.

result.y에 해당하는 영역이며, 빨간색 영역이 제외되어 가운데 영역만 남는다.

 

이 두 영역에 중 겹치는 사각형 영역만 가져오려면,

result.x * result.y를 곱해줍니다. 

 

삼각형 두개를 그릴려면 rect 함수에서 나온 리턴값을 더해주면 됩니다. 

왜 더하는 것이 맞는지는 생각해보세요~

 

2개의 사각형 렌더링 결과

Shader "SimonLee/Shader9Unlit"
{
    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;
            }

            float rect(float2 pt, float2 size, float2 center) {
                float2 p = pt - center;
                float2 halfSize = size * 0.5;
                float2 result = step(-halfSize, p) - step(halfSize, p);                
                return result.x * result.y;
            }

            float rect_(fixed2 pt, fixed2 size, fixed2 center)
            {
                float dl = center - (size * 0.5);
                float ur = center + (size * 0.5);
                fixed2 result = step(dl, pt) * (1 - step(ur, pt));
                return result.x * result.y;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                float3 inRectA = float3(1, 1, 0) * rect(i.position.xy, float2(0.3, 0.3), float2(-0.25, 0));
                float3 inRectB = float3(0, 1, 0) * rect(i.position.xy, float2(0.4, 0.4), float2(0.25, 0));
                float3 color = inRectA + inRectB;
                return fixed4(color, 1);
            }
            ENDCG
        }
    }
}