J & J - 정성태의 닷넷 이야기

사용자

메뉴

최근 덧글

[정성태] VT sequences to "CONOUT$" vs. STD_O...[정성태] NetCoreDbg is a managed code debugg...[정성태] Evaluating tail call elimination in...[정성태] What’s new in System.Text.Json in ....[정성태] What's new in .NET 9: Cryptography ...[정성태] 아... 제시해 주신 "https://akrzemi1.wordp...[정성태] 다시 질문을 정리할 필요가 있을 것 같습니다. 제가 본문에...[이승준] 완전히 잘못 짚었습니다. 댓글 지우고 싶네요. 검색을 해보...[정성태] 우선 답글 감사합니다. ^^ 그런데, 사실 저 예제는 (g...[이승준] 수정이 안되어서... byteArray는 BYTE* 타입입니다...

글쓰기

제목

이름

암호

전자우편

HTML

홈페이지

유형

내용

<div style='display: inline'>
<h1 style='font-family: Malgun Gothic, Consolas; font-size: 20pt; color: #006699; text-align: center; font-weight: bold'>Unity로 실습하는 Shader (1) - 컬러 반전 및 상하/좌우 뒤집기</h1>

지난 글에서, 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' >
Unity로 실습하는 Shader
; <a target='tab' href='http://www.sysnet.pe.kr/2/0/11607'>http://www.sysnet.pe.kr/2/0/11607</a>
</pre>
 
환경도 마련되었으니, 이제 shader 관련 실습들을 해보겠습니다. 
 
우선, 지난번 shader에서 컬러 반전을 해볼까요? 이것은 결국 pixel의 컬러 값을 반전시키는 것이기 때문에 Pixel Shader에서 RGB 값만 반전시켜 주면 됩니다. 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' >
fixed4 frag(v2f i) : SV_Target
{
 fixed4 col = tex2D(_MainTex, i.uv);
 col.r = 1 - col.r;
 col.g = 1 - col.g;
 col.b = 1 - col.b;
 return col;
}
</pre>
 
또는 rgb 속성 값을 통째로 반전시킬 수 있습니다. (swizzle이라고 검색해 보시면 더 많은 정보를 얻을 수 있습니다.) 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' >
fixed4 frag(v2f i) : SV_Target
{
 fixed4 col = tex2D(_MainTex, i.uv);
 col.rgb = 1 - col.rgb;
 return col;
}
</pre>
 
이제 Material에서 위의 shader로만 교체해 주면 지구본이 다음과 같이 보입니다. 
 
<img alt='invert_shader_1.png' src='/SysWebRes/bbs/invert_shader_1.png' /> 
 
<hr style='width: 50%' /> 
 
이번에는 그림을 좌우가 바뀌게 그려보겠습니다. 이를 위해서는 texture의 매핑 좌표를 X축에 대해 바꿔주면 되므로 다음과 같이 Vertex Shader에서 바꿔주면 됩니다. 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' >
v2f vert(appdata v)
{
 v2f o;
 o.vertex = UnityObjectToClipPos(v.vertex);
 o.uv = float2(1 - v.uv.x, v.uv.y);
 return o;
}
</pre>
 
지구본 이미지의 경우 X축 반전이 표현이 잘 안되므로 texture를 나무로 바꿔서, 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' >
Trees0091
; <a target='tab' href='https://www.textures.com/download/trees0091/74537'>https://www.textures.com/download/trees0091/74537</a>
</pre>
 
해보면, 아래와 같이 좌측 이미지와는 달리 uv.x 값을 반전시킨 우측의 이미지는 X축을 기준으로 반전된 것을 볼 수 있습니다. 
 
<img alt='invert_shader_2.png' src='/SysWebRes/bbs/invert_shader_2.png' /> 
 
당연히, y 축 반전은 다음과 같이 코드만 살짝 바꿔주면 됩니다. 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' >
v2f vert(appdata v)
{
 v2f o;
 o.vertex = UnityObjectToClipPos(v.vertex);
 o.uv = float2(v.uv.x, 1 - v.uv.y);

/*
    또는, 개별 x, y 속성 접근으로.

o.uv.x = v.uv.x;
 o.uv.y = 1 - v.uv.y;
 */
 return o;
}
</pre>
 
아래는 위의 shader를 적용한 이미지입니다. 
 
<img alt='invert_shader_3.png' src='/SysWebRes/bbs/invert_shader_3.png' /> 
 
<hr style='width: 50%' /> 
 
여기서 잠시 vertex shader 함수에서 사용한 UnityObjectToClipPos 함수를 볼까요? 이것은, World, View, Projection 행렬 연산을 쉽게 해주는 도우미 함수입니다. 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' >
Built-in shader helper functions
; <a target='tab' href='https://docs.unity3d.com/Manual/SL-BuiltinFunctions.html'>https://docs.unity3d.com/Manual/SL-BuiltinFunctions.html</a>
</pre>
 
이 함수의 도움을 받지 않고 개별 행렬 계산을 하려면 World, View, Projection에 대한 행렬을 담은 내부 변수를 사용하면 됩니다. (DirectX의 경우에는 해당 행렬들을 shader 측에 변수로 넘겨야 합니다.) 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' >
Built-in shader variables
; <a target='tab' href='https://docs.unity3d.com/Manual/SL-UnityShaderVariables.html'>https://docs.unity3d.com/Manual/SL-UnityShaderVariables.html</a>
</pre>
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' >
UNITY_MATRIX_V Current view matrix. 
UNITY_MATRIX_P Current projection matrix.
unity_ObjectToWorld Current model matrix. 
</pre>
 
따라서 shader 함수를 다음과 같이 바꿔도 무방합니다. 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' >
v2f vert(appdata v)
{
 v2f o;

// UnityObjectToClipPos 대신,
    // o.vertex = UnityObjectToClipPos(v.vertex);

// 직접 World, View, Projection 행렬로 연산
    float4 pos = mul(unity_ObjectToWorld, v.vertex);
    pos = mul(UNITY_MATRIX_V, pos);
    pos = mul(UNITY_MATRIX_P, pos);
    o.vertex = pos;

o.uv = v.uv;
 return o;
}
</pre>
 
위의 내장 변수들은 "UnityShaderVariables.cginc"에서 제공된다고 하는데 이는 자동으로 포함되므로 별도의 #include 구문이 필요하지는 않습니다. 
 
<hr style='width: 50%' /> 
 
이 글의 실습에 쓰인 나무 모양의 texture는 다음의 사이트에서 구한 것입니다. 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' >
Textures for 3D, graphic design and Photoshop!
; <a target='tab' href='https://www.textures.com/'>https://www.textures.com/</a>
</pre>
 
회원 가입이 필요한데, 상용 제품에는 사용할 수 있지만 재판매나 재배포는 안 됩니다. 또한 About 글에 보면, 
 
<div style='BACKGROUND-COLOR: #ccffcc; padding: 10px 10px 5px 10px; MARGIN: 0px 10px 10px 10px; FONT-FAMILY: Malgun Gothic, Consolas, Verdana; COLOR: #005555'>
You can download up to 15 images for free every day. If you need more or bigger images, you can purchase a credit pack or a subscription. The How it works page has more information about download quotas. 
</div> 
 
하루에 15개씩 무료로 다운로드할 수 있다고 하니, 실습용으로는 무난하게 쓸 수 있겠습니다. ^^

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

</div>

첨부파일

스팸 방지용 인증 번호

1415 (왼쪽의 숫자를 입력해야 합니다.)