투명도

Tutorial

intermediate

+0XP

15m

Unity Technologies

투명도

이 튜토리얼에서는 3D 모바일 애플리케이션에 투명도를 적용했을 때의 효과와 단점을 설명합니다.

Languages available:

1. 투명도 사용

투명 머티리얼 설정을 사용할 때는 성능에 미칠 영향을 고려해야 합니다. 특히 모바일 플랫폼에는 가급적 불투명 머티리얼을 사용하는 편이 좋습니다.

투명도가 적용된 오브젝트를 렌더링하면 불투명 오브젝트를 렌더링할 때보다 GPU 리소스를 더 많이 사용합니다. 투명 오브젝트를 많이 사용하면 모바일 플랫폼의 성능에 영향을 미치며, 특히 투명 오브젝트를 다른 오브젝트 위에 여러 차례 렌더링하는 오버드로우라는 과정을 거칠 때는 더욱 그렇습니다.

다음 스크린샷의 파란색 조명에는 투명도 효과를 적용할 수도 있으나, 불투명 머티리얼로 구현해도 문제가 없어 보입니다.

2. 투명도 구현 방식 비교

셰이더에 투명도를 구현하는 방법은 다양하며, 저마다 장단점이 있습니다.

가장 흔히 사용되는 투명도 구현 방식은 알파 테스트알파 블렌드입니다. 알파 테스트는 머티리얼을 완전 불투명이나 완전 투명으로 보이게 합니다. 마스크 경계 부분의 역치를 설정할 수 있는데, Unity에서는 이를 컷아웃이라고 합니다.

알파 테스트는 GPU의 일부 최적화 기능을 비활성화하므로 필요한 경우가 아니면 사용하지 않는 것이 좋습니다. 알파 테스트/컷아웃을 사용하는 경우 타겟 모바일 플랫폼에서 테스트하는 것이 좋습니다. 또한 이 투명도 구현 방식과 알파 블렌드 방식을 프로파일링해 성능상의 차이를 비교해야 합니다.

알파 블렌드를 사용하면 머티리얼의 투명도를 다양화할 수 있으므로 오브젝트를 부분적으로 투명하게 할 수 있습니다. Unity에서는 이 블렌드 모드를 투명이라고 합니다.

모바일 플랫폼에는 알파 테스트보다 알파 블렌드를 사용할 것을 권장합니다. 알파 테스트 구현 방식을 사용한다면, 알파 테스트와 알파 블렌드의 성능을 프로파일링하고 비교해야 합니다. 활용 사례는 콘텐츠에 따라 다르므로 측정이 필요합니다. 알파 블렌드가 필요하면 블렌드 영역을 작게 만듭니다.

알파 블렌드는 부분적인 투명도를 지원하지만, 알파 테스트에서는 컷아웃 경계가 두드러집니다. 다음 이미지는 알파 블렌드와 알파 테스트를 비교한 모습입니다.

3. 활용 사례: 나뭇잎

정적인 상태에서 나뭇잎을 보면 경계선이 확실하게 보이는 알파 테스트에 비해 가장자리가 부드럽게 구현된 알파 블렌드 쪽이 더 나아 보입니다.

하지만 나뭇잎이 움직이면 알파 블렌드는 어색해 보입니다. 나뭇잎에 투명도가 적용된 부분이 서로를 통과하며 유령 같은 효과를 주기 때문에 배치된 잎사귀의 순서가 사실적으로 렌더링되지 않습니다.

알파 테스트는 나뭇잎이 움직일 때 투명도와 순서를 훨씬 더 잘 처리하여 각 잎사귀가 부분적으로 투명하지 않고 완전히 렌더링되거나 가려지도록 처리합니다. 하지만 가장자리는 알파 블렌드보다 더 거칠거나 앨리어싱이 발생한 것처럼 보입니다.

움직일 때에는 일그러진 가장자리가 눈에 띄지 않는 것이 보통이므로, 알파 테스트의 화질은 수긍할 수 있는 수준입니다. 하지만 알파 블렌드를 사용하면 잎이나 가지의 순서가 뒤바뀌며 착시 현상이 발생합니다.

4. 결론

과도한 오버드로우를 방지하려면 모바일 애플리케이션에 투명도를 적용하기 전에 어떤 연출이 필요한지 신중하게 생각해야 합니다. 어떤 투명도 유형을 선택해야 할지 기준이 항상 분명하지는 않지만, 확실하지 않을 때는 애플리케이션을 프로파일링해 결정에 필요한 데이터를 추가로 확보할 수 있습니다. 다음 튜토리얼에서는 3D 모바일 애플리케이션에 활용할 머티리얼과 셰이더의 베스트 프랙티스를 추가로 살펴봅니다.

Complete this Tutorial