투명도 사용법

물이나 유리같은 표면을 만들 때는, 표면을 통과해 볼 수 있을 뿐만 아니라, 표면에 깊이나 색감을 더해주기도 해야 합니다. 현실에서 이러한 속성을 일컬어 종종 Transparency (투명도) 또는 Opacity (오파시티)라 하며, 서로 같은 것을 가리킵니다. 하지만 언리얼 엔진 4 (UE4) 안에서, 투명도는 표면을 통과해서 볼 수 있느냐 없느냐를 말하는 반면, 오파시티는 표면의 투명한 정도를 정의하는 데 사용됩니다. 이번 하우투에서는 언리얼 엔진 4 에서 머티리얼에 투명도를 도입하기 위해 알아야 하는 모든 것에 대해 배워보겠습니다.

투명도

Transparency, 투명도는 표면이 빛을 막거나 통과시킬 수 있는가를 나타내는 데 사용되는 용어입니다. 예를 들어, 벽돌은 투명도가 없는 오브젝트인 반면, 색유리는 투명도가 있는 오브젝트입니다. UE4 에서 투명도 작동방식은, 픽셀이 100% 불투명, 즉 통과해서 볼 수 없도록 하는 것이 아니라, 어느정도 투명, 즉 통과해 볼 수 있도록 하는 식으로 작동합니다.

위 그림은 텍스처의 도움으로 투명한 영역과 그 정도를 정의하는 투명도 작동방식을 보여줍니다. 텍스처는 위에서 검정, 즉 완전 투명이었다가 아래에서 하양, 즉 불투명으로 서서히 변화하는 그레이디언트입니다. 가운데 영역에는 텍스처의 픽셀이 검정 또는 하양쪽에 얼마나 가까운가에 따라 다양한 정도의 투명도를 갖습니다.

투명도 & 오파시티

UE4 에서 투명도를 다룰 때는 Opacity (오파시티)라는 용어도 듣게 될 것입니다. 오파시티는 표면의 통과해서 볼 수 있는 정도를 가리키는 반면, 투명도는 통과해서 볼 수 있는 표면임을 나타내는 데 사용합니다. 아래 그림에서 실제로 확인할 수 있습니다.

왼쪽에서 시작하여 오른쪽으로 가면서, 머티리얼의 오파시티가 0 에서 1 로 올라갑니다. 그러면 머티리얼이 완전 투명한 상태에서 불투명한 상태로 변합니다. 하지만 이는 머티리얼이 투명도를 사용하도록 구성되었기 때문에만 벌어지는 일입니다. 투명도 구성이 되어있지 않은 머티리얼에 오파시티를 변경해도 머티리얼을 통과해서 볼 수 있을지 여부에는 영향이 없습니다.

• Transparency: 투명도 - 표면을 통과해서 볼 수 있을지 결정하는 데 사용합니다.
• Opacity: 오파시티 - 표면의 투명 또는 불투명 정도를 정의하는 데 사용합니다.

머티리얼에 투명도 사용

머티리얼이 투명도를 사용하도록 구성하는 방법은 다음과 같습니다.

이 튜토리얼은 프로젝트에 시작용 콘텐츠 를 포함했을 경우 찾을 수 있는 콘텐츠를 활용합니다. 프로젝트에 시작용 콘텐츠를 포함시키지 않은 경우, 에셋 이주하기 문서에서 프로젝트간 콘텐츠 이동 방법에 대한 정보를 참고하시기 바랍니다. 프로젝트를 새로 만들지 않고도 시작용 콘텐츠를 추가시킬 수 있습니다.

1. 먼저 콘텐츠 브라우저 에서 우클릭 한 다음 메뉴에서 기본 애셋 생성 아래 머티리얼 을 선택합니다.

   

2. 머티리얼 이름을 Transparency_Material 로 지은 다음 콘텐츠 브라우저 에서 머티리얼에 더블클릭 하여 열어줍니다.

3. 머티리얼이 열렸으면 디테일 패널에서 Material 섹션 아래 Blend Mode 를 Opaque 에서 Translucent 로 변경합니다.

   

4. Blend Mode 설정이 올바르게 되었으면, 다음 머티리얼 표현식 노드를 찾아봅니다. 머티리얼 팔레트에서 다음 이름으로 검색하면 찾을 수 있습니다. 이름을 좌클릭 한 다음 끌어 머티리얼 그래프 위에 놓으면 배치할 수 있습니다.

   • Vector Parameter x 1
   • Scalar Parameter x 1
   

5. 머티리얼 표현식 노드를 추가했으면, 연결해 줄 차례입니다. 먼저 Vector Parameter 노드 이름을 Base_Color 로 짓고 컬러 값을 줍니다. 이 예제에서는 흰색을 기본 색으로 합니다. 다음, Vector Parameter 노드의 출력을 베이스 컬러 입력에 연결합니다. 그 후, Scalar Parameter 이름을 Transparency_Amount 라 하고 기본값을 0.5 로 합니다. 그리고서 Scalar Parameter 출력을 메인 셰이더 노드의 오파시티 입력에 연결합니다.

   

6. 적용, 저장 버튼을 누른 다음 머티리얼 에디터를 닫습니다.

7. 콘텐츠 브라우저 에서 Transparency_Material 을 찾아 우클릭 하여 메뉴에서 머티리얼 인스턴스 생성 옵션을 선택합니다.

8. 이제 머티리얼의 실제 적용 모습을 확인할 수 있도록 머티리얼 인스턴스를 적용할 오브젝트를 찾아야 합니다. 콘텐츠 브라우저 안에서 시작용 콘텐츠 폴더에 보면 Shapes 폴더가 있습니다. Shape_Sphere 를 찾은 다음 좌클릭 후 현재 레벨에 끌어옵니다. 원하는 위치에서 마우스 왼쪽 버튼 을 놓으면 레벨에 메시가 배치됩니다.

   

9. 레벨에 테스트할 것이 생겼으니, 콘텐츠 브라우저 에서 아까 만든 Transparency_Material_Inst 를 찾습니다. 찾았으면 좌클릭 으로 선택 후 콘텐츠 브라우저 에서 Shape_Sphere 위로 끌어옵니다. Shape_Sphere 위에서 마우스 왼쪽 버튼 을 놓으면 메시에 머티리얼 인스턴스가 적용됩니다.

10. 메시에 머티리얼 인스턴스가 적용되었으면, 콘텐츠 브라우저 에서 머티리얼 인스턴스에 더블클릭 하여 엽니다. 열렸으면 Transparency_Amount 옆에 회색으로 탈색된 체크박스를 좌클릭 하여 활성화시킵니다. 그러면 Transparency_Amount 값을 조정하여 오브젝트의 투명도를 조정할 수 있게 됩니다.

투명도 & 리플렉션

투명도를 활용하는 오브젝트는 다음 옵션을 설정하면 씬 리플렉션 표시가 가능합니다. 하지만 리플렉션이 켜진 반투명 머티리얼이 많으면 퍼포먼스상 문제가 생길 수 있다는 점 유념하세요.

1. 위에서 만든 Transparency_Material 을 콘텐츠 브라우저 에서 더블클릭 하여 엽니다. 열렸으면 디테일 패널에서 Translucency 섹션 아래 Translucent Light Mode (반투명 라이트 모드)를 TLM_Volumetric Non Directional (무방향 볼륨형)에서 TLM Surface (표면)으로 변경합니다.

   

2. 머티리얼 그래프에서 Transparency_Amount 머티리얼 표현식을 선택한 다음 Ctrl+W 키를 두 번 눌러 복제합니다. 완료된 머티리얼 그래프 모습은 이와 같을 것입니다.

   

3. 두 개의 머티리얼 표현식 노드 이름을 메탈릭 과 러프니스 로 변경합니다. 메탈릭 머티리얼 표현식의 기본값을 1.0 으로, 러프니스의 기본값을 0 으로 설정합니다. 그런 다음 각 머티리얼 표현식 노드를 메인 노드상의 상응하는 입력에 연결합니다.

   

4. 머티리얼을 적용 및 저장 후 머티리얼 그래프를 닫습니다.

   

5. 이제 레벨을 보면, 메시에 리플렉션과 투명도를 확인할 수 있을 것입니다.

   

머티리얼 인스턴스의 파라미터를 조절하는 것으로 투명도의 결과를 매우 다르게 만들 수 있습니다.

투명도 사용

투명도는 여러가지 다양한 현실 표면 유형을 시뮬레이션하는 데 사용할 수 있습니다. UE4 에서 투명도를 많이 사용하는 경우는 아래와 같습니다.

• 헤어
• 유리
• 물
• 연기나 불 비주얼 이펙트
• 구름
• 임팩트 데칼
• 폴리지

투명도 & 퍼포먼스

투명도가 있는 오브젝트를 여러 개 서로 위에 겹쳐 놓으면, 특히나 '라이팅된 투명도'를 사용하는 경우 급격한 렌더링 / 퍼포먼스 병목현상이 생길 수 있습니다. 이러한 문제를 가리키는 용어가 Overdraw, 오버드로 인데, 투명도 렌더링되는 오브젝트가 서로 많이 겹쳐있는 경우 발생합니다. 오버드로가 퍼포먼스 문제를 유발할 수 있는 이유는, 들여온 투명도 레이어 하나마다 투명도 렌더링 비용이 비싸지기 때문입니다.

이러한 문제가 있는지, 있다면 어디에 있는지 더욱 잘 알아볼 수 있도록 하기 위해서, UE4 에는 셰이더 복잡도 라는 특수 뷰 모드가 있습니다. 셰이더 복잡도 모드는 주어진 표면을 색으로 복잡도 표시를 하여 렌더링하기가 얼마나 복잡한지를 보여줍니다. 초록색이 더 많이 보일 수록 렌더링 비용이 싸지며, 빨간색이 많이 보일 수록 렌더링 비용이 비싸집니다. 이 뷰 모드를 켜는 방법은 다음과 같습니다.

1. 셰이더 복잡도 모드를 켜려면, 에디터 뷰포트 상단의 뷰 모드 옵션을 좌클릭 합니다. 현재 뷰 모드 가 Lit, 라이팅포함으로 설정되어 있습니다.

   

2. 뷰 모드 를 좌클릭 하면 메뉴가 뜹니다. 거기서 셰이더 복잡도 옵션을 선택합니다.

   

3. 셰이더 복잡도 옵션을 클릭한 이후, 레벨 뷰포트는 다음과 같아 보일 것입니다.

   

이 뷰를 통해 어디서 퍼포먼스 문제가 발생할 수 있는지 알 수 있습니다. 빨간색 영역은 렌더링 비용이 매우 비싼 반면, 초록색 영역은 렌더링 비용이 쌉니다. 오버드로를 전부 없애는 것이 100% 가능하지도 않고 조언할만한 것도 아니지만, 이 뷰 모드는 어디서 퍼포먼스 문제가 생길 수 있는지 정확히 알아내고자 할 때 큰 도움이 될 수 있습니다.

반투명 소트 우선권

씬에 붙어있는 반투명 오브젝트가 여럿 있을 때, 가끔은 다른 투명 오브젝트 앞 또는 뒤에 어떤 오브젝트를 렌더링할지 알아내는 데 문제가 있는 경우가 있습니다. 다음 예제는 위에서 만든 머티리얼과 시작용 콘텐츠의 라이팅된 연기 VFX 를 사용하여 만든 데모입니다.

연기가 메시 앞에 있다가 갑자기 메시 뒤에 나타나는 것을 보세요. 이러한 현상을 방지하기 위해 씬에서 연기 VFX 가 항상 다른 반투명 위에 렌더링되도록 Translucency Sort Priority (반투명 소트 우선권) 설정을 해 줘야 합니다. VFX 의 반투명 소트 우선권 변경 방법은 다음과 같습니다.

1. 우선 레벨에서 다른 모든 반투명 위에 렌더링하고자 하는 오브젝트를 좌클릭 하여 선택합니다. 이 예제에서는 연기 VFX 를 선택하겠습니다.

   

2. 디테일 패널에서 Rendering 섹션 아래 하양 트라이앵글 을 클릭하여 부가 프로퍼티를 노출시킵니다.

3. 새로운 옵션 목록에서 Translucency Sort Priority 를 찾은 다음 100 값을 입력합니다.

   

   기본적으로 레벨에 추가되는 모든 것에는 Translucency Sort Priority 가 0 입니다. 투명한 무언가가 항상 다른 투명한 것 뒤에 그려지도록 하려면, 음수 값을 사용하면 됩니다.

4. 이제 씬에 연기 VFX 가 잘 돌아가나 확인합니다. Translucency Sort Priority 가 100 으로 설정되었으니, 연기가 항상 다른 반투명 오브젝트 위에 그려질 것입니다.

5. Translucency Sort Priority 를 -100 으로 설정하면 연기가 항상 다른 반투명 오브젝트 뒤에 그려집니다.

Translucency Sort Priority 를 조절하는 것으로 레벨의 소팅 문제를 고칠 수는 있지만, 게임플레이 도중 이펙트나 오브젝트 스폰시 새로운 소팅 문제가 생길 수 있습니다. 이때문에 Translucency Sort Priority 수치를 얼마나 어디에 할 것인지 정의하는 것이 좋습니다. 예를 들어 스폰된 오브젝트 전부 Translucency Sort Priority 를 100 으로 했다 칩시다. 레벨에 소팅 문제가 있다면, 레벨의 그 오브젝트 Translucency Sort Priority 를 99 까지의 값으로 설정하면 됩니다. 이런 식으로 스폰된 게임 이펙트는 레벨 오브젝트의 Translucency Sort Priority 오브젝트가 어찌됐건 상관없이 항상 다른 것 위에 렌더링됩니다.

결론

투명도는 3D 프로젝트의 현실감을 살리는 데 도움을 줄 수 있는 매우 강력한 도구입니다. 하지만 강력한 도구가 그렇듯이, 최대한의 위력을 발휘하도록 하기 위해서는 주의가 필요합니다. 리플렉션을 사용하는 투명 오브젝트의 수를 가급적 최소한으로 유지시키는 것 기억하시구요. 에디터에서나 게임 도중에서도 지속적으로 셰이더 복잡도 모드를 확인하여 투명도 오버드로가 최소한으로 유지되는지 확인합니다.