본문으로 건너뛰기
CHOI HONGSU
⏱ 1 min read

VFX 최적화 가이드

VFX Resource Optimization Guide 이펙트 리소스 최적화 가이드

이 작업에서는 이펙트 제작 단계에서 반복적으로 발생하던 비용을 줄이기 위해, 오버드로우 확인 기준, Timeline 제어 방식, MPB 기반 색 제어, 셰이더 구조 정리, 파티클 텍스처 아틀라스, ResourceChecker 기반 검수 흐름을 정리했습니다. 목표는 개별 이펙트의 표현을 크게 바꾸는 것이 아니라, 재사용 가능한 구조를 만들고 불필요한 리소스 중복을 줄이는 것이었습니다.

Problem

기존 이펙트는 스킬 / 팀 컬러 / 연출 단위로 프리팹, 머티리얼, 텍스처가 나뉘는 경우가 많았습니다.

이 구조에서는 같은 이펙트라도 아군 / 적군 색상 차이 때문에 별도 프리팹과 머티리얼이 생기고, 비슷한 파티클 텍스처가 여러 장으로 분산될 수 있습니다.

또한 투명 파티클은 ZTest가 적용되더라도 알파 블렌딩 특성상 오버드로우 비용이 누적되기 쉽기 때문에, 제작 단계에서부터 화면 점유 면적과 알파 영역을 관리할 필요가 있었습니다.

Goal

이펙트 리소스의 렌더링 비용과 관리 비용을 함께 줄이는 것을 목표로 했습니다.

  • 투명 파티클의 오버드로우 확인 기준 정리
  • Timeline / Animation Key 기반 제어를 줄이고 풀링 가능한 구조로 변경
  • 아군 / 적군 색상 차이는 MaterialPropertyBlock으로 제어
  • 유사 셰이더와 노드를 정리해 셰이더 수 감소
  • 파티클 텍스처를 아틀라스로 묶어 머티리얼 재사용성 향상
  • ResourceChecker로 Texture / Material / Mesh 수량을 확인하는 검수 흐름 정리

Implementation

  1. 01

    오버드로우

    오버드로우 확인 방법

  2. 02

    2. 단계 제목

    오버드로우뷰에서 흰색으로 나오는 부분을 최소화 해주셔야 합니다.

    ( ZTest는 적용되지않지만 ( 반투명) 이펙트 오버드로우 확인하기에 좋습니다. )

    Blending Mode/Shader 단순화 덜 복잡한 블렌딩/셰이더를 사용하면 오버드로우 부담이 줄어듭니다.

    알파 블렌드 최소화 알파로 빠지는 부분을 최소화해주셔야 합니다.

  3. 03

    이펙트 커스텀노드/ 애니메이션 키 제어 제거

    → Prefab Control Track (소스 수정) / 풀링 시스템 적용 or Signal Track + 스크립트 / 풀링 시스템 적용

  4. 04

    이펙트 컬러 메테리얼 프로퍼티 블럭으로 제어

    아군(Blue) / 적군(Red) 등 단순 컬러 구분이라면 Material Property Block을 통해 컬러를 바꿉니다.

    헤드라이트 색도 Material Property Block을 통해 컬러를 바꿉니다.

    기존유닛 스킬별로 Blue /Red 프리팹,메테리얼 나눠서 적용

    → 수정후 공용이펙트를 제외하고 KeyColor만 MPB로 제어

    키컬러 프로퍼티 명은 Tint_Color ( 셰이더 - Kong82_FXS_FX_Alphablend_1T_One )

    기존 HeadLight

    유닛별로 (4개 프리팹)안에 (4개 메테리얼)로 제어

    → 수정 Headlight 유닛별로 (1개 프리팹)안에 (1개 메테리얼)로 MPB로 색 제어

  5. 05

    셰이더구조 및 노드 정리

    기존 셰이더 25개

    Kong82_FXS_FX_Add_1T Kong82_FXS_FX_Add_2T Kong82_FXS_FX_Add_Gra_Flipbook Kong82_FXS_FX_Add_Gra_Shockwave Kong82_FXS_FX_Add_Shockwave Kong82_FXS_FX_Additve_Shield Kong82_FXS_FX_Alpha_Shockwave Kong82_FXS_FX_Alphablend_1T Kong82_FXS_FX_Alphablend_2T Kong82_FXS_FX_BasicTrail Kong82_FXS_FX_CartoonSmoke Kong82_FXS_FX_Crack Kong82_FXS_FX_Dissolve Kong82_FXS_FX_Distortion Kong82_FXS_FX_FireTrail Kong82_FXS_FX_MaskFlow Kong82_FXS_FX_Parallax_Crack Kong82_FXS_FX_Particles_Unlit Kong82_FXS_FX_Smoke Kong82_FXS_FX_Twoside Kong82_FXS_FX_UI_BasicDistortion Kong82_FXS_FX_UI_Distortion Kong82_FXS_FX_UI_RadialBlur Kong82_FXS_FX_Water Kong82_FXS_FX_Water_Toon

    셰이더 구조 수정후

    인게임 셰이더 8개

    Kong82_FXS_FX_Add_Shockwave Kong82_FXS_FX_Alphablend_1T_One // 변경 MPB로 색제어 Kong82_FXS_FX_Alphablend_2T_Dissove // 변경

    Kong82_FXS_FX_HeadLight // 추가 MPB로 색제어 Kong82_FXS_FX_CartoonSmoke_HS // 변경 Kong82_FXS_FX_MaskFlow_HS_Trail // 변경 Kong82_FXS_FX_Parallax_Crack_HS // 변경 Kong82_FXS_FX_Water_Toon

    UI 셰이더 4개

    Kong82_FXS_FX_UI_Additve_Shield Kong82_FXS_FX_UI_Smoke Kong82_FXS_FX_UI_Distortion Kong82_FXS_FX_UI_Alphablend_2T

    예시 작업

    Gas 셰이더 최적화

    기존 ( 셰이더 3개 / 메테리얼 3개 / 텍스쳐 10개 ) - 왼쪽

    수정 ( 셰이더 1개 / 메테리얼 1개 / 텍스쳐 3개 ) - 오른쪽

  6. 06

    셰이더 프로퍼티 비교

    기존 셰이더

  7. 07

    병합 셰이더

    재사용이 없는 셰이더는 병합해서 불필요한 텍스쳐와 노드를 제거해서 사용

    MBP 사용할 셰이더 분리 ( 색 제어 )

    재사용 많은 셰이더는 최대한 가볍게 쓰면서 오버드로우 최소화

Gallery

파티클 텍스처 아틀라스

파티클 텍스처 아틀라스

  1. 불꽃, 연기, 빛 효과 등 비슷한 알파 블렌딩을 사용하는 텍스처들은 한 장의 아틀라스에 모아서 배치합니다.
  2. Sprite처럼 UV 좌표만 바꿔서 다른 파티클 이미지를 쓸 수 있도록 구현하면, 머티리얼 재사용이 가능해집니다.

이펙트 최적화프로파일링 툴

  1. 01

    ResourceChecker

    씬에 있는 Texture, Materials, Mesh를 체크할 수 있습니다.

  2. 02

    Hierachy 창

    Go를 누르면 Hierachy 창으로 갈 수 있습니다.

    불필요한 리소스체크는 프로파일링 후 제거하시면 좋을것같습니다.

    프로파일링 할 에셋 씬에 하나만 가져와서 최적화 진행

  3. 03

    기존

    뱅가드 - Texure 31 Material 29 Mesh 5 (2538verts)

    뱅가드 - Texure 16 Material 15 Mesh 3 ( 1721verts)