56. 타일 최적화 및 셰이더 작업(포스트 프로세싱)

타일 최적화

- 타일이 맵에 1000개 이상으로 많아지면서 프레임이 많이 떨어졌다. (기존 150프레임 -> 현재 100프레임)

- 100프레임에서도 분명 돌아가지만 시연용 컴퓨터에서 무리 없이 작동되도록 하기 위해 기존 프레임 수준으로 끌어올릴 필요성을 느꼈고, 해결 방안을 모색했다.

- 현재 타일은 충돌체에 의해 구분되는 3종류의 타일을 사용하고 있는데, 벽, 발판, 충돌체없음과 같이 3종류다.

- 가장 많이 사용되는 타일은 충돌체가 없는 타일로, 그 중에서도 빈 공간을 의미하는 검정색 타일이 가장 많이 사용되었다.

- 이런 타일들은 실제로 아무 역할도 하지 않기 때문에 타일로 분류하기보단 그냥 맵을 꾸며주는 데코 오브젝트로 분류하고, 기존에 하나씩 그려주던 것도 타일 이미지를 수정해서 타일 5개 크기를 하나의 오브젝트로 관리하도록 했더니 기존 프레임과 비슷한 수준으로 회복되었다.

 

 

셰이더 작업 (포스트 프로세싱)

- 포스트 프로세싱 작업을 진행할 때 수월했던 점은 현재 디퍼드 렌더링을 사용하고 있어서 컬러 정보를 언제든지 가져올 수 있다는 점이었다.

- 많은 경우 포스트 프로세싱을 구현할 때 uv좌표를 흔들어서 원하는 효과를 구현하게 되는데, 컬러 텍스쳐를 활용해서 Final 과정에서 합쳐질 때 적절히 효과를 구현해주었다.

- 이번에 구현한 내용은 왜곡 효과(Distortion)인데 코드를 보면 굉장히 단순하다.

float2 Distortion(float2 vUV, float fAccTime, float fProgress)
{
    // Align Center
    vUV -= 0.5f;
   
    float fRadius = length(vUV);
    float fTheta = atan2(vUV.y, vUV.x);
    
    float fPulse = sin(40 * fRadius - 10.0 * fAccTime) * fProgress;
    
    float2 fPulseRect = float2(fPulse * cos(fTheta), fPulse * sin(fTheta));
    
    vUV += 0.5f;
    return vUV + 0.02 * fPulseRect;
}

- 결과적으로는 화면 중심으로부터 물결파장을 일으키는 셰이더 효과인데, 화면 중심으로 uv좌표를 이동시키고, 

반지름 값을 통해 중심으로부터 현재 픽셀로 향하는 2차원 벡터를 만들어주게 된다.

- 그리고 atan2 함수를 이용해 각도를 구한 후 sin 함수를 통해 파장을 만들어내는데, sin 함수는 주기함수이며 인자로 fRadius와 fAccTime을 받는다.

- fAccTime은 누적시간인데, 이 값은 계속해서 증가하기 때문에 만들어진 물결이 바깥 방향으로 나가는 효과를 만들어낸다.

- fPulseRect는 원형 좌표계를 직사각형 좌표계로 변환하는 과정이다.

직사각형으로 만드는 이유는 현재 사용하는 모니터와 좌표계가 원형 좌표계가 아닌 직사각형 좌표계이기 때문이다.

 

내일 할 일

- 맵 작업 이어서 진행

- 몬스터 상호작용