Microsoft MVP성태의 닷넷 이야기
글쓴 사람
홈페이지
첨부 파일
 

Unity로 실습하는 Shader (9) - 투명 배경이 있는 텍스처 입히기

지난 글에서,

Unity로 실습하는 Shader (1) - 컬러 반전 및 상하/좌우 뒤집기
; https://www.sysnet.pe.kr/2/0/11608

실습한 나무 그림의,

Trees0091
; https://www.textures.com/download/trees0091/74537

texture를 3D GameObject 중 Plane에 입혀 보겠습니다. 그런데, 분명히 png 이미지로는 똑바로 선 나무 그림인데 기본 shader + material 상태에서 평면에 누워 있는 나무 이미지가 카메라가 바라보는 시점에 대해 거꾸로 되어 있습니다.

blend_shader_1.png

검색해 보면, 이미 다들 알고 있는 문제(?)입니다.

Why are my textures on planes flipped / reversed left-to-right?
; https://answers.unity.com/questions/125855/why-are-my-textures-on-planes-flippedreversed-left.html

그래서 material의 Texture 설정에서 Tiling 값의 Y를 -1로 바꿔야 합니다. 그럼 나무가 똑바로 서긴 하는데 자세히 보면 좌우가 바뀐 상태입니다. 따라서 X 값도 -1로 설정해 줘야 합니다.

Tiling X == -1   Y == -1

그러고 나면 다음과 같이 이미지가 png 파일 그대로 (카메라 방향에 맞게 의도한 데로) 나오게 됩니다.

blend_shader_2.png

자, 이제 나무를 입힌 평면을 카메라에 정면으로 세워야 하는데요, 이를 위해 x축을 기준으로 회전시켜야 합니다. 보통 생각으로는 90도 회전을 시키면 될 것 같은데, Unity의 경우 왼손 좌표계이므로 x축 회전은 양수(+) 값에 대해 다음과 같이 회전을 하게 됩니다.

[그림 출처: http://www.fundza.com/rib/example4/index.html]
blend_shader_3.png

따라서 Plane의 앞면이 카메라가 보이는 쪽으로 서 있으려면 -90도를 해야 합니다. 자, 그래서 결국 다음과 같이 겨우 나무 하나를 보이게 만들었습니다. ^^

blend_shader_4.png




여기서 문제(?)가 있는데요, 저 나무 그림(png)의 배경은 원래 투명(alpha == 0)했는데 Unity의 Plane 객체에 material로 입히면 저렇게 배경이 검은색으로 나온다는 점입니다. 여기서 shader의 기본 코드를 볼까요?

Shader "My/blendShader"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

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

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            
            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }
            
            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv);
                return col;
            }
            ENDCG
        }
    }
}

pixel shader를 보면, 정상적으로 uv 좌표에 따라 texture로부터 fixed4 형식으로 alpha 값까지 해서 추출한 것이 맞습니다.

fixed4 frag (v2f i) : SV_Target
{
    fixed4 col = tex2D(_MainTex, i.uv);
    return col;
}

실제로 나무의 배경은 fixed4(0, 0, 0, 0) 값들이 반환되고 있습니다. 만약 alpha 값이 먹혔다면 투명으로 나와야겠지만 그렇지 않았다면 (0,0,0) 색상이니 검은색으로 나오는 것이 맞습니다. 그리고 이렇게 불투명하게 그리게 된 데에는 shader의 RenderType이 "Opaque"로 설정되어 있기 때문입니다.

Tags { "RenderType"="Opaque" }

투명 처리를 위해 이 값을 "Transparent"로 바꾸고, 아울러 렌더링 우선순위를 "Transparent"로 바꿔줍니다.

Tags { "RenderType"="Transparent" "Queue" = "Transparent" }

마지막으로, 배경과 어떻게 Alpha 채널이 섞이게 될지를 알려주는 Blend 옵션을 주는데,

Blend SrcAlpha OneMinusSrcAlpha

합이 1이 되는 아핀 조합으로 전형적인 선형 결합의 Blend 옵션입니다. 따라서, 투명 처리가 된 곳의 alpha == 0이므로,

SrcAlpha                OneMinusSrcAlpha
트리 texture == 0,      배경 == OneMinusSrcAlpha == 1 - 0 == 1

다음과 같이 투명 처리가 근사하게 적용된 것을 볼 수 있습니다. ^^

blend_shader_5.png




shader에 사용된 TRANSFORM_TEX는 (C:\Program Files\Unity\Editor\Data\CGIncludes\)UnityCG.cginc 파일에 다음과 같은 매크로로 정의되어 있습니다.

// Transforms 2D UV by scale/bias property
#define TRANSFORM_TEX(tex,name) (tex.xy * name##_ST.xy + name##_ST.zw)

따라서 shader에 사용된 코드는 다음과 같이 확장됩니다.

// o.uv = TRANSFORM_TEX(v.uv, _MainTex);
   o.uv = v.uv * _MainTex_ST.xy + _MainTex_ST.zw;

_MainTex_ST는 Unity의 Material에 대한 Inspector 창의 "Tiling"과 "Offset" 값을 담고 있습니다.

blend_shader_0.png

그렇기 때문에 "o.uv = TRANSFORM_TEX(v.uv, _MainTex);" 코드를 쓰지 않고 그냥 "o.uv = v.uv"와 같이 대입하면 Unity 에디터에서 설정한 "Tiling"과 "Offset"값이 적용되지 않습니다.




[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]

[연관 글]





[최초 등록일: ]
[최종 수정일: 7/28/2018 ]

Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
by SeongTae Jeong, mailto:techsharer@outlook.com

비밀번호

댓글 쓴 사람
 




... 16  [17]  18  19  20  21  22  23  24  25  26  27  28  29  30  ...
NoWriterDateCnt.TitleFile(s)
11855정성태3/25/20192117개발 환경 구성: 436. 페이스북 HTTPS 인증을 localhost에서 테스트하는 방법
11854정성태3/25/20191090VS.NET IDE: 133. IIS Express로 호스팅하는 사이트를 https로 접근하는 방법
11853정성태3/24/20191507개발 환경 구성: 435. 존재하지 않는 IP 주소에 대한 Dns.GetHostByAddress/gethostbyaddr/GetNameInfoW 실행이 느리다면? - 두 번째 이야기
11852정성태3/20/20191558개발 환경 구성: 434. 존재하지 않는 IP 주소에 대한 Dns.GetHostByAddress/gethostbyaddr/GetNameInfoW 실행이 느리다면?파일 다운로드1
11851정성태3/19/20191893Linux: 8. C# - 리눅스 환경에서 DllImport 대신 라이브러리 동적 로드 처리
11850정성태3/18/20191326.NET Framework: 813. C# async 메서드에서 out/ref/in 유형의 인자를 사용하지 못하는 이유
11849정성태3/18/20192016.NET Framework: 812. pscp.exe 기능을 C#으로 제어하는 방법파일 다운로드1
11848정성태3/17/20191220스크립트: 14. 윈도우 CMD - 파일이 변경된 경우 파일명을 변경해 복사하고 싶다면?
11847정성태3/17/20192235Linux: 7. 리눅스 C/C++ - 공유 라이브러리 동적 로딩 후 export 함수 사용 방법파일 다운로드1
11846정성태3/15/20191908Linux: 6. getenv, setenv가 언어/운영체제마다 호환이 안 되는 문제
11845정성태3/15/20192504Linux: 5. Linux 응용 프로그램의 (C++) so 의존성 줄이기(ReleaseMinDependency) [3]
11844정성태5/22/20192494개발 환경 구성: 434. Visual Studio 2019 - 리눅스 프로젝트를 이용한 공유/실행(so/out) 프로그램 개발 환경 설정 [1]파일 다운로드1
11843정성태3/14/20191367기타: 75. MSDN 웹 사이트를 기본으로 영문 페이지로 열고 싶다면?
11842정성태5/3/20191311개발 환경 구성: 433. 마이크로소프트의 CoreCLR 프로파일러 예제를 Visual Studio CMake로 빌드하는 방법 [1]파일 다운로드1
11841정성태3/13/20191178VS.NET IDE: 132. Visual Studio 2019 - CMake의 컴파일러를 기본 g++에서 clang++로 변경
11840정성태3/13/20191245오류 유형: 526. 윈도우 10 Ubuntu App 환경에서는 USB 외장 하드 접근 불가
11839정성태3/12/20191743디버깅 기술: 124. .NET Core 웹 앱을 호스팅하는 Azure App Services의 프로세스 메모리 덤프 및 windbg 분석 개요 [2]
11838정성태5/9/20192496.NET Framework: 811. (번역글) .NET Internals Cookbook Part 1 - Exceptions, filters and corrupted processes [1]파일 다운로드1
11837정성태10/14/20197474기타: 74. 도서: 시작하세요! C# 7.3 프로그래밍 [10]
11836정성태10/12/20191918오류 유형: 525. Visual Studio 2019 Preview 4/RC - C# 8.0 Missing compiler required member 'System.Range..ctor' [1]
11835정성태3/5/20192064.NET Framework: 810. C# 8.0의 Index/Range 연산자를 .NET Framework에서 사용하는 방법 및 비동기 스트림의 컴파일 방법 [1]파일 다운로드1
11834정성태3/4/20191501개발 환경 구성: 432. Visual Studio 없이 최신 C# (8.0) 컴파일러를 사용하는 방법
11833정성태5/14/20191959개발 환경 구성: 431. Visual Studio 2019 - CMake를 이용한 공유/실행(so/out) 리눅스 프로젝트 설정파일 다운로드1
11832정성태3/4/20191439오류 유형: 524. Visual Studio CMake - rsync: connection unexpectedly closed
11831정성태3/4/20191205오류 유형: 523. Visual Studio 2019 - 새 창으로 뜬 윈도우를 닫을 때 비정상 종료
11830정성태2/26/20191108오류 유형: 522. 이벤트 로그 - Error opening event log file State. Log will not be processed. Return code from OpenEventLog is 87.
... 16  [17]  18  19  20  21  22  23  24  25  26  27  28  29  30  ...