이전에 Rectangle 그리는 방법을 배웠습니다.
다른 방식의 사각형 렌더링 예제를 구현 해보도록 하겠습니다.
그리고 두개의 사각형을 그려보도록 하겠습니다.
전 예제에서는 사각형을 그리기 위해서는
좌측하단, 우측상단 두개의 좌표를 구하면서 시작을 했었습니다.
이번에는 소스를 보면서 시작 하도록 하겠습니다.
float rect(float2 pt, float2 size, float2 center)
{
float2 p = pt - center;
float2 halfSize = size * 0.5;
float2 result = step(-halfSize, p) - step(halfSize, p);
return result.x * result.y;
}
pt에서 center를 빼주게 되면 position p는 center 방향으로 이동하는 것 같은 효과가 발생합니다.
center 값을 더해야 되지 않나 라는 생각이 들 수 있지만 빼는 것이 맞습니다.
가운데 노랑색 사각형이 우측 상단으로 이동한다고 가정해 봅시다.
A 픽셀 컬러 값은 B 픽셀 값을 가져와야 하기 때문에,
A Position 값에서 Center 값을 빼준 위치 값을 빼주어야 합니다.
이동된 위치 기준으로 생각하셔야 합니다.
이 개념은 앞으로 이동, 회전이나 효과등 여러 부분에서 사용이 됩니다.
float2 result = step(-halfSize, p) - step(halfSize, p);
result.x에 해당하는 영역이며, 빨간색 영역이 제외되어 가운데 영역만 남는다.
result.y에 해당하는 영역이며, 빨간색 영역이 제외되어 가운데 영역만 남는다.
이 두 영역에 중 겹치는 사각형 영역만 가져오려면,
result.x * result.y를 곱해줍니다.
삼각형 두개를 그릴려면 rect 함수에서 나온 리턴값을 더해주면 됩니다.
왜 더하는 것이 맞는지는 생각해보세요~
Shader "SimonLee/Shader9Unlit"
{
Properties
{
}
SubShader
{
Tags { "RenderType"="Opaque" }
LOD 100
Pass
{
CGPROGRAM
#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;
}
float rect(float2 pt, float2 size, float2 center) {
float2 p = pt - center;
float2 halfSize = size * 0.5;
float2 result = step(-halfSize, p) - step(halfSize, p);
return result.x * result.y;
}
float rect_(fixed2 pt, fixed2 size, fixed2 center)
{
float dl = center - (size * 0.5);
float ur = center + (size * 0.5);
fixed2 result = step(dl, pt) * (1 - step(ur, pt));
return result.x * result.y;
}
fixed4 frag(v2f i) : SV_Target
{
float3 inRectA = float3(1, 1, 0) * rect(i.position.xy, float2(0.3, 0.3), float2(-0.25, 0));
float3 inRectB = float3(0, 1, 0) * rect(i.position.xy, float2(0.4, 0.4), float2(0.25, 0));
float3 color = inRectA + inRectB;
return fixed4(color, 1);
}
ENDCG
}
}
}
'Shader CG' 카테고리의 다른 글
1.4 도형 - 타일링 (0) | 2023.07.13 |
---|---|
1.3 도형 - Rotation & Scailing Rect (0) | 2023.07.11 |
1.2 도형 - Draw Rectangle - 1 (0) | 2023.07.09 |
1.1 도형 - draw Circle (0) | 2023.07.09 |
기초 3. 블렌딩 해보자 (step, smoothstep) (0) | 2023.07.06 |