pixel art renderer 연구 (2)

오늘은 몇 가지 생각나는 다른 시도들을 해 보았다.

 

color space 변경

우선 색공간 설정을 gamma -> linear로 변경해보았다. 이게 팔레트에서 의도한 색이 그대로 표현되지 않을까 해서. 

 

대충 이런 식으로 나온다. 느낌이 괜찮은 듯하긴 한데 원래 화면에 비해서 너무 어두워보임. 문제는 sRGB 옵션이었다. 컬러 스페이스가 linear일 때 팔레트 텍스쳐는 당연히 sRGB가 꺼져 있어야 하는데(원본 텍스쳐가 감마 반영이 안 되어 있는 텍스쳐이므로), 문제는 유니티에서 3D 텍스쳐가 sRGB 옵션을 지원하지 않는다.

이 때문에 3D 텍스쳐를 버리고 다시 2D 텍스쳐로 변경. 문제는 3D 색 공간을 2D 텍스쳐에 인코딩하고 그걸 읽어오는 방식(LUT처럼)으로 구현했다. 이 과정에서 인덱스 컬러를 찾을 때 gamma correction이 된 색을 기준으로 찾아야 원래 의도한 색에 맞는 팔레트가 선택이 될 텐데 그걸 생각을 못해서 한참을 헤맸다. 셰이더 인풋은 gamma correction이 안 된 색이 들어오므로, (셰이더 인풋) => (gamma correction 적용) => (그 색에 맞는 인덱스 컬러 선택) => (gamma correction 제거) => 반환 과 같은 과정을 거쳐야 원하는 결과를 얻을 수 있다.

이렇게 바꿔서 적용하면 다음과 같이 보인다.

 

확실히 느낌이 전혀 다르다. 이제 팔레트에서 고른 색대로 보이는게 잘 되는 것 같다.

color distance

가장 가까운 두 색간의 거리를 비교할 때 그냥 RGB 색상값 차이로 접근했는데, 이 색상 공식을 바꾸면 좀 더 괜찮은 결과가 나올 수 있지 않을까 싶어 이것도 테스트해보았다. 검색을 좀 해보니 L*a*b* 색 공간을 이용해서 색상 간의 거리를 정의하는게 좀 일반적으로 쓰이는 방법인 것 같았다. 자세한 건 https://en.wikipedia.org/wiki/CIELAB_color_space 위키 참고. 같은 팔레트에 서로 다른 color distance 공식을 적용해서 비교해보았다.

가운데가 원래 씬. 왼쪽 오른쪽이 각각 팔레트 쓰는데 RGB거리, LAB거리 쓴 것. 결과가 꽤 다르게 나오긴 하는데 흠 RGB가 더 보기 괜찮아 보이는 듯하고.. 일단 지금은 씬이 뭘 쓰든 별로 안 이뻐서, 씬을 좀 더 이쁘게 보이게 하는 작업을 마친 다음에 color distance도 고려해봐야겠다 정도로만 생각하고 넘어가는게 좋을 것 같다.

toon shading

툰 셰이딩을 적용하면 좀 더 픽셀 아트스러운 느낌이 날 것 같아서(너무 당연한 이야기지만) 툰 셰이딩을 적용해보기로 했다.

일단 그냥 툰 셰이더 적용(대충).

인덱스 컬러까지 적용. 이 씬은 둘이 그다지 큰 차이가 안 나는 듯. 다른 씬도 테스트해보았다.

위가 툰 셰이더만 적용, 아래는 인덱스 컬러까지 적용. 그림자 주변에서 이상하게 색깔이 깨지는데 이건 왠지 잘 모르겠다. 그리고 인덱스 컬러같은 건 안 써도 그냥 툰 셰이딩 + 안티엘리어싱 off 만으로도 픽셀아트스러운 느낌이 많이 나는 것 같다. 인덱스 컬러는 굳이 할 필요가 없으려나? 그리고 툰 셰이딩 단계를 너무 적게 잡은 것 같아서 그것도 수정이 필요할 듯.

너무 밋밋해서 적당히 3단계로 변경. 흠 이렇게 놓고 보니 굳이 인덱스 컬러는 할 필요가 없는 것 같다.. 셀 셰이딩 만으로도 그럴듯한 느낌이 나는 듯.

outline

이제 다시 아웃라인 적용.

이 아웃라인이 느낌이 상당히 괜찮은 것 같다. 인덱스 컬러도 그냥 갖다 버리긴 좀 아쉬운데.. 뭔가 이렇게 저렇게 잘 써먹으면 퀄리티를 높일 방법이 많이 있을 것 같다.

 

기본적으로 쓸만한 뷰는 얻은 것 같고, 이제 그동안 찾은 여러가지 자료를 이용해서 퀄리티를 높일 방법을 본격적으로 고민해보면 될 듯.