2.2 Noise 모자이크 효과

Random 함수를 사용하여 아래처럼 타일 모양의 Noise를 구현해 봅시다.

Shader Book에 있는 코드를 참조 했습니다.

만들고 싶은 가로 세로타일의 개수가 10, 10 입니다.

Tiled Noise Effect

 

float random(float2 pt) 
{
    const float a = 12.9898;
    const float b = 78.233;
    const float c = 43758.543123;
    return frac(sin(dot(pt, float2(a, b))) * c);
}

2.1 Noise에서 구현했던 random 함수를 그대로 사용합니다.

 

random 함수내부 난수 생성기가 없기 때문에 결과 값이 동일한 input 이면 동일한 return이 나옵니다.

리턴값은 0 ~ 1 값 입니다.

 

i.uv *= 10;
float2 ipos = floor(i.uv);
float2 fpos = frac(i.uv);
float r = random(ipos);
float3 color = float3(r, r, r);

i.uv *= 10

10배 공간을 스케일링 합니다.

 

float2 ipos = floor(i.uv);

float2 fpos = frac(i.uv)

floor 함수는 해당 값의 정수형을 리턴을 하고, frac 함수는 해당 값의 소수자리를 리턴을 합니다.

i.uv 값이 0 ~ 1이기 때문에 음수일 때는 고려할 필요는 없지만,

음수일 경우에는

-3.6의 경우 floor(-3.6) 값은 -4가 되고, frac(-3.6) 값은 0.4로 되는 것을 유의 합니다. (-4 + 0.4 = -3.6)

 

float2 ipos = floor(i.uv);

float r = random(ipos)

floor 함수의 인자로 들어가는 모든 i.uv 값이 아래처럼 됩니다. (x, y 동일)

0 ~ 0.9범위 = 0, 1.0 ~ 1.9범위 = 1,  2.0 ~ 2.9범위 = 2, 3.0 ~ 3.9범위 = 3, 4.0 ~ 4.9범위 = 4 ...

 

color 범위를 생각해보면, 10 by 10 으로 나뉘어진 칸마다 해당하는 동일한 랜덤값이 적용됩니다.

 

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

        Pass
        {
            CGPROGRAM

            #pragma vertex vert
            #pragma fragment frag

            #define PI 3.14159265359
            #define PI2 6.28318530718


            #include "UnityCG.cginc"

            struct v2f
            {
                float4 vertex : SV_POSITION;
                float4 screenPos: TEXCOORD2;
                float4 position: TEXCOORD1;
                float2 uv: TEXCOORD0;
            };

            v2f vert(appdata_base v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.screenPos = ComputeScreenPos(o.vertex);
                o.position = v.vertex;
                o.uv = v.texcoord;
                return o;
            }

            float random(float2 pt) {
                const float a = 12.9898;
                const float b = 78.233;
                const float c = 43758.543123;
                return frac(sin(dot(pt, float2(a, b))) * c);
            }

            fixed4 frag(v2f i) : SV_Target
            {
                i.uv *= 10;
                float2 ipos = floor(i.uv);
                float2 fpos = frac(i.uv);
                float r = random(ipos);
                float3 color = float3(r, r, r);
                
                return float4(color, 1.0);
            }
            ENDCG
        }
    }
}