부드러운 엣지 만들기

앞서 만들었던 둥근 사각형은 각 픽셀들의 알파값이 0과 1로 딱 떨어지기 때문에 경계부분이 날카롭게 렌더링 됩니다.

모서리 경계 부분이 날카로운 모습.

알파값을 스무스하게 조절하여 경계부분의 픽셀을 좀더 부드럽게 만들어 봅시다. HardRounded함수에서 알파값을 계산할 때 floor함수를 써서 0과 1로 딱 떨어지게 만들었는데 SoftRounded함수에서는 floor를 제거하였습니다. 그 결과 알파값이 0~1사이에서 부드럽게 보간이 됩니다.

// 날카로운 엣지.
float HardRounded(float2 pixel, float2 halfRes, float radius) {
	float2 v = GetRadiusToPointVector(pixel, halfRes, radius);
	float alpha = 1.0 - floor(length(v) / radius);
	return alpha;
}

// 부드러운 엣지.
float SoftRounded(float2 pixel, float2 halfRes, float radius) {
	float2 v = GetRadiusToPointVector(pixel, halfRes, radius);
	float alpha = 1.0 - length(v) / radius;
	return alpha;
}

부드러운(?) 엣지가 적용된 모습.

하지만 너무 과하게 부드러워진 느낌입니다. 그 이유는 알파값이 선형적으로 분포되었기 때문입니다. 픽셀의 거리를 반지름으로 나눈값을 그대로 알파값으로 사용하였기 때문에 0~1사이에 골고루 분포되는 결과가 나온 것이죠. 아래 스샷처럼 모서리 끝부분만 부드럽게 만들어 보겠습니다.

우리가 원하는 모습.

float MakeEdge(float from, float to, fixed t) {
	fixed r = max(_Radius, 2);
	t = saturate(t * (r - t));
	return lerp(from, to, t);
}

// 부드러운 엣지.
float SoftRounded(float2 pixel, float2 halfRes, float radius) {
	float2 v = GetRadiusToPointVector(pixel, halfRes, radius);
	float alpha = 1.0 - length(v) / radius;
	alpha = MakeEdge(0, 1, alpha);
	return alpha;
}

코드는 간단합니다. 알파값을 구한 뒤 특정한 공식을 통해 선형적인 값을 비선형적으로 바꾸는 것이죠. 일종의 가속도를 주는 방식입니다. 예를들어 0~1범위의 값이 있다고 합시다. 50%선형보간을 한 값은 0.5입니다. 하지만 선형보간이 아닌 가속도가 주어진 보간을 하면 0.5가 아닌 값이 나옵니다. 어떤 공식을 사용했냐에 따라 0.7이 될수도 있고 0.3이 될수도 있죠. 이런 원리를 이용하여 선형적인 알파값을 비선형적으로 바꾸게 되면 바깥으로 갈수록 알파값이 급격히 약해지는 모습을 만들어 낼 수 있습니다. MakeEdge함수는 이러한 가속도 공식을 통해서 선형적인 값을 가속도가 주어진 값으로 변환시킵니다. 여기에서 쓰인 공식도 가속도 공식중 하나를 약간 수정한 공식입니다.

이렇게 가속도 공식을 적용하는 것을 트위닝(tweening) 또는 이징(easing)이라고 부릅니다. 구글에서 easing function이라고 검색하면 여러가지 가속도 공식들을 찾을 수 있습니다.

날카로운 경계(위), 부드러운 경계(아래)