기초 3. 블렌딩 해보자 (step, smoothstep)

이번에도 2강에 이어서 블렌딩을 해보자.

기존 코드와 달라진 것은 frag 쉐이더 함수내부 사용한 API가 바뀐 것 외에 없다.

 

하지만 vertex shader를 복습을 하고 넘어가자.

UnityObejctToClipPos 함수는 로컬 좌표계를 클립 좌표계로 이동한다.

유니티 클립 좌표계는 범위가 -0.5 ~ 0.5와 같다.

frag shader에서 전달받고 곱하기 2를 해서 좌표계의 범위는 -1 ~ 1이 된다.

 

 

아래에서 사용한 함수는 step 함수와 smoothstep 함수이다.

참고 > 

https://developer.download.nvidia.com/cg/step.html

 

step(edge, value) 

- edge > value면 0을 리턴 , edge < value면 1을 리턴한다.

 

smoothstep(lowEdge, highEdge, value)

smoothstep 2가지로 나누어 생각 한다.

lowEdge < highEdge 경우

- highEdge > lowEdge > value 면 0을 리턴

- lowEdge < highEdge < value 면 1을 리턴

- lowEdge < value < highEdge 면 0 ~ 1 사이의 보간된 값 리턴.

 

반대인 lowEdge > highEdge 경우 

- lowEdge > highEdge > value 면 1을 리턴

- highEdge < lowEdge < value 면 0을 리턴

- lowEdge < value < highEdge 면 0 ~ 1 사이의 보간된 값 리턴.

 

lowedge > highEdge 경우 step의 반대값이라고 생각하시면 됩니다.

 

step 함수를 사용해서 블렌딩을 해보자.!

color.r = step(0, color.r);

color.g = step(0, color.g);

color.r 값이 0보다 작으면 0, 0보다 크면 1

color.g 값이 0보다 작으면 0, 0보다 크면 1

step blending

손으로 열심히 썻네요 ㅎㅎ 

사각형의 4분면으로 쪼개지면서 각 영역이  x(r), y(g) 값이 0, 1로 되는 구간이 정해진다.

그림을 참조하시면 어떤 색이 나올지 이해가 되실겁니다.

 

step 함수 블렌딩 결과

 

 

smoothstep 함수를 사용해서 블렌딩을 해보자.

color.r = smoothstep(0.5, 0.6, color.r);

color.g = smoothstep(0.5, 0.6, color.g);

 

0.5 이하는 0 이고 , 0.6이상은 1로 step과 동일하고, 0.5~0.6 사이값만 보간이 됩니다.

예를 들어 0.51 값은 0.1 이고, 0.52는 0.2 ... 이런식으로 

0.5에서 0.6사이 픽셀들은 아주 연한 빨강색에서 점차 진한 빨강색으로 되는 영역 입니다. 

 

아래 그림을 보시면 이해 하실겁니다.

0.5 0.5 기준으로 step 함수와 동일하게 4사분면의 색이 나누어 지는데, 

다른점은 보간된 영역이 색이 점차적으로 연한색에서 진한색으로 바뀝니다.

 

별표 친 부분이 헷갈릴수 있습니다.

왜 연한 빨강, 진한 빨강 써있는 부분의 픽셀에서는 빨강색이 보이지 않는 이유는

 

연한빨강의 r 현재 값은 0이라서, 완전한 초록으로 보이다가, 점차적으로 진한빨강 값이 추가가 되면서

진한초록이 노랑색으로 변화되는 것 입니다.

smoothstep 함수 blending 설명

smoothstep 함수 blending 결과

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

        Pass
        {
            CGPROGRAM
            // Upgrade NOTE: excluded shader from DX11; has structs without semantics (struct v2f members position)
            //#pragma exclude_renderers d3d11
            #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
            {
                fixed3 color = i.position * 2;
                //color.r = step(0, color.r);
                //color.g = step(0, color.g);

                //color.r = smoothstep(0.5, 0.6, color.r);
                //color.g = smoothstep(0.5, 0.6, color.g);
                return fixed4(color, 1.0);
            }
            ENDCG
        }
    }
}

 

예제 가져온 곳

https://niklever.com/courses