[💬] 픽셀퍼펙트 관련해서 전에 생각해봤던 방식이 있는뎅

[율냥이(alszmtm)]

https://yulcat.com/2016/10/05/유니티로-픽셀-아트-표현하기/

옛날에 블로그에 써봤던 똥글인데 사실 이방법 실제로 써본적은 없다

관심있는 사람 있으면 한번 써보고 후기 남겨주라

이하 전에 썼던 본문

-----------------------------------------------------------------

유니티에서 픽셀 아트를 표현하기 위해 보통 스프라이트의 filter mode를 point로 설정하는 방법을 사용합니다. 이 방법은 픽셀의 경계를 뚜렷하게 표현해주지만, 해상도에 따라 왜곡이 발생합니다.

끔찍하게 왜곡된 게임 화면…

왜 이런 현상이 발생하는지, filter mode별로 이미지를 확대하는 방법을 알아보았습니다.

Nearest-neighbor interpolation

Nearest-neighbor (이하 NN) 방식은 가장 단순한 방식으로, 이름 그대로 가장 가까운 주어진 점의 색상을 그대로 사용합니다. 유니티에서 filter mode – point 가 이 방법을 씁니다.

검은 점이 주어진 점의 위치

비트맵 이미지는 균일한 2차원 배열로 이루어져 있기 때문에, 가장 가까운 픽셀의 색상을 사용하다 보면 위 그림과 같이 정사각형들의 배열이 그려지게 됩니다. 그래서 우리가 픽셀 아트 하면 생각하는 정사각형들로 이루어진 화면을 표현할 수 있죠.

 

하지만 항상 화면이 이미지 크기의 정수배 해상도일 수는 없습니다. 이미지가 애매한 배율로 확대된 경우, 위 그림과 같이 비율이 깨져서 그림이 왜곡되는 현상을 피할 수 없어요.

Bilinear interpolation

Bilinear (이하 BL) 방식은 NN 못지않게 단순하면서도 부드러운 결과물을 내기 때문에 많이 쓰이는 방식입니다. 유니티3D에서도 기본 필터링 모드는 BL로 지정되어 있죠.

간단한 비례식으로 색 섞기

비례식으로 색을 섞어서 표현하기 때문에, NN 방식에 비해 비율이 깨지거나 하는 문제는 덜하지만, 색상과 색상의 경계가 흐려지는 문제가 발생합니다. 따라서 픽셀 아트에서는 기피하는 방식입니다.

픽셀이었던가…?개선안 : Bilinear downscaling

그렇다면, NN 방식으로 목표 해상도보다 크게 업스케일하고, BL 방식으로 목표 해상도에 맞춰 다운스케일하면 어떨까요? 명확하게 한 픽셀 영역에 속하는 곳은 균일한 색상을 가지고, 픽셀과 픽셀의 경계가 불분명한 곳만 색상을 섞어서 표현할 수 있지 않을까요?

먼저, 포토샵으로 해당 방법을 시험해보았습니다.

NN 250%. 픽셀 왜곡을 확인할 수 있습니다.BL 250%. 화면 전체가 뿌옇게 되었습니다.NN 300% 후 BL 83.33%.

목표로 했던 것처럼 왜곡은 억제하면서 뿌연 화면은 덜합니다.

좌측은 Bilinear, 우측은 NN으로 목표 이상으로 확대한 후 BL로 축소한 이미지입니다. 더욱 선명하게 사각 픽셀이 보이면서도, 비율은 해치지 않는 것을 확인할 수 있습니다.

유니티에 적용하기

유니티의 Render Texture 기능을 사용하면, 위 방식을 코드 한줄 짜지 않고 적용할 수 있습니다.

먼저, Create – Render Texture 로 렌더 텍스처를 생성합니다.

그리고 렌더 텍스처의 사이즈를 화면의 가상 해상도의 정수배로 설정합니다.

제가 가진 이미지의 크기가 256 x 223이고, 출력 사이즈는 650 x 557 로 정했습니다. 따라서 렌더 텍스처 사이즈는 이미지 크기의 3배인 768 x 669 로 정해, 출력 사이즈보다 크도록 정했습니다.

그리고 Camera 의 Target Texture 를 방금 만든 렌더 텍스처로 정했습니다. 이제 이 카메라는 화면이 아닌 렌더 텍스처에 렌더 결과를 출력합니다.

No Cameras rendering 메시지가 신경쓰인다면, Culling Mask 가 nothing으로 설정된 더미 카메라 하나를 생성해 둡니다.

그리고 UI – Raw Image 하나를 생성해서 렌더 텍스처를 출력하도록 해 줍니다. 이제 게임 화면은 Render Texture 를 경유해 UI Canvas 에서 그려지게 됩니다.

위 방식을 사용해 출력한 화면입니다. 대각선 픽셀을 유심히 보세요.
point 방식으로 화면에 바로 출력한 경우. 대각선 픽셀이 삐뚤빼뚤합니다.

사실 렌더 텍스처 기능은 이거 찾아보다가 처음 써봤는데, 다양한 상황에 응용할 수 있을것 같네요.

• Bilinear interpolation (wikipedia)
• Nearest-neighbor interpolation (wikipedia)
• image scaling (wikipedia)
• Improving bilinear filtering (libretro)

 

[asdasd(211.184)]

이쪽이 워낙 결과물에 대한 보상이 불확실해서 연구되지 않거나, 연구하더라도 발전속도가 느림 .. 근 몇년중에 그나마 RotSprite 이라는 예시가 있는데 이거 참고해도 재밌을듯

[asdasd(211.184)]

물론 찍다보면 이게 뭐하는짓인가 싶을떄도 많은데.. 2차선 도로에 있는 2색 신호등에 억지로 노란빛을 넣으려고 고생하는 오랑우탄이 되는 기분

[asdasd(211.184)]

점찍는 애들은 기본적으로 스케일링에 대해서 배수 확대로 들어가는 방식을 가장 선호함. 근데 로테이션은 생산성문제에서 그게 안되서 문제였고, 크퀘처럼 유사 3d 로 컷아웃해서 가던가, 그게 마음에 안들었던 기존 픽셀 원리주의자들이 알고리즘 개선을 통해 나온거 ㅇㅇ..

[asdasd(211.184)]

vr 정도의 시장주목도와 자본이 있다면야, 3d 시대를 맞이하여, 텍스쳐링과 복셀기술로 보간과 스케일링 등을 개선한 새로운 방식이 나왔을거 같기도 한데 그건 행복회로를 오버클럭해도 안될것 같고 ㅠ 흑

[익명(qqaaa)]

좋은글 감사합니다

[dd(211.195)]

ㅊㅊ