Unity Shader) 2D이미지를 3D 처럼 표현하기 (나선형 왜곡)

 2D이미지를 3D 처럼 표현하기 (나선형 왜곡)

 

2D 이미지를 여러가지 레이어를 나눠서 움직임을 주는 형태로 작업을 하면 좀 꿀렁거리긴하지만 3D 처럼 효과를 낼수 있다. 해당 방법을 통해서 조금더 입체감 있는 형태의 표현을 진행했다.

 

나선형 형태로 왜곡을 해서 표현했다.

 

반응형

 

< Material 속성 >

 

< Shader Code >

Shader"Custom/UI/SpiralTexturePixelDistortion"
{
    Properties
    {
        _MainTex ("Base (RGB)", 2D) = "white" { }
        _TimeSpeed ("Time Speed", Range(0, 10)) = 1.0
        _DistortionAmount ("Distortion Amount", Range(0.0, 1.0)) = 0.1
        _RotationLayers ("Rotation Layers", Range(1, 10)) = 3.0 // 회전 층수 (여러번 회전)
    }
    SubShader
    {
        Tags { "RenderType"="UI" }
        Pass
        {
            Tags { "LightMode" = "Always" }
Blend SrcAlpha
OneMinusSrcAlpha // 알파 블렌딩 모드

            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
#include "UnityCG.cginc"

            // Properties
float _TimeSpeed;
float _DistortionAmount;
float _RotationLayers; // 회전 층수
sampler2D _MainTex;

            // Vertex Shader
struct appdata
{
    float4 vertex : POSITION;
    float3 normal : NORMAL;
    float2 uv : TEXCOORD0;
};

struct v2f
{
    float4 pos : POSITION;
    float2 uv : TEXCOORD0;
};

v2f vert(appdata v)
{
    v2f o;
    o.pos = UnityObjectToClipPos(v.vertex);
    o.uv = v.uv; // vertex shader에서 UV 변환을 하지 않음
    return o;
}

            // Fragment Shader
half4 frag(v2f i) : SV_Target
{
                // 텍스처 샘플링
    half4 col = tex2D(_MainTex, i.uv);

                // UV 좌표를 나선형으로 변형
    float2 center = float2(0.5, 0.5); // 텍스처의 중심
    float2 uv = i.uv - center; // UV 좌표를 중심으로 이동
    float radius = length(uv); // 현재 UV 좌표에서 중심까지의 거리
    float angle = _TimeSpeed * _Time * _RotationLayers + radius * _DistortionAmount; // 나선형 회전 각도
    float offset = radius * _DistortionAmount; // 왜곡 강도

                // 나선형 왜곡 (픽셀 단위로 회전)
    uv.x += offset * cos(angle); // X축 회전
    uv.y += offset * sin(angle); // Y축 회전

    uv += center; // 회전 후, 원래 중심으로 다시 이동

                // 회전된 텍스처 좌표로 텍스처 샘플링
    col = tex2D(_MainTex, uv);

                // 알파값 적용하여 투명도 처리
                // 텍스처의 알파값을 그대로 가져와서 투명도 적용
    col.a = col.a;

    return col;
}

            ENDCG
        }
    }
FallBack"UI/Default"
}

 

 

★★★☆☆