픽셀 충실도를 유지하는 변환 된 2D 스프라이트에 대한 "레트로"픽셀 쉐이더를 만드는 방법은 무엇입니까?


10

아래 이미지는 배경 위에 포인트 샘플링으로 렌더링 된 두 개의 스프라이트를 보여줍니다.

여기에 이미지 설명을 입력하십시오

  • 왼쪽 두개골에는 회전 / 크기 조정이 적용되지 않으므로 모든 픽셀이 배경과 완벽하게 일치합니다.
  • 오른쪽 두개골이 회전 / 확대 되어 더 이상 축 정렬 되지 않은 더 큰 픽셀 이됩니다 .

변환 된 스프라이트를 나머지 장면과 동일한 크기의 축 정렬 픽셀로 렌더링하는 픽셀 쉐이더를 어떻게 개발할 수 있습니까?

이것은 Monkey Island와 같은 오래된 게임에서 스프라이트 스케일링이 구현 된 방법과 관련이있을 수 있습니다. 그것이 달성하려는 효과이지만 회전이 추가 되었기 때문입니다.


편집하다

kaoD의 제안에 따라 문제를 사후 프로세스로 해결하려고했습니다. 가장 쉬운 방법은 먼저 별도의 렌더 타겟으로 렌더링하고 (원하는 픽셀 크기에 맞게 다운 샘플링) 두 번째로 렌더링 할 때 업 스케일링하는 것입니다. 위의 요구 사항을 해결했습니다.

먼저 나는 그것을 시도 Linear -> Point했고 그 결과는 다음과 같습니다.

여기에 이미지 설명을 입력하십시오

왜곡은 없지만 결과는 흐리게 보이며 대부분의 하이라이트 색상이 손실됩니다. 내 생각에 그것은 내가 필요한 복고풍의 모습을 break습니다.

두 번째로 시도한 Point -> Point결과는 다음과 같습니다.

여기에 이미지 설명을 입력하십시오

왜곡에도 불구하고 모션에서보다 정지 이미지로 더 잘 보이지만 내 필요에 충분하다고 생각합니다.

시연하기 위해 YouTube에서 픽셀을 필터링했지만 효과에 대한 비디오는 다음과 같습니다.

http://youtu.be/hqokk58KFmI

그러나 누군가가 움직일 때 왜곡의 양을 줄이면서 선명한 모양을 유지하는 더 나은 샘플링 솔루션을 고안 할 수 있도록 며칠 더 질문을 열어 두겠습니다.


그거 두개골이야 ...?
DeadMG

@DeadMG 황소 두개골, 나는 추측?
David Gouveia

멋진 효과, 내가 생각했던 것보다 더 좋아 보입니다 (40x30 EGA의 매우 낮은 해상도 및 팔레트에서 시도했습니다). BTW, 나는 당신이 의도 한대로 효과를 유지하는 더 나은 샘플링 솔루션이 있는지 의심합니다. NN은 또 다른 샘플링이 최종 이미지를 흐리게합니다 (어쨌든 추측).
kaoD

@kaoD 그러나 두 번의 패스를 적용한다는 것을 기억하십시오. 이미지를 업 샘플링하는 두 번째 패스는 여전히 레트로 느낌을 유지하기 위해 가장 가까운 이웃입니다. 그러나 첫 번째 패스에 대해 다른 샘플링 기술을 시도하면 이점이 있다고 생각합니다. 나는 현재 Scale2x를 찾고 있습니다!
David Gouveia

@kaoD Nah, 나는 포기한다. 각 스프라이트 호출간에 셰이더 매개 변수를 변경하면 SpriteBatch즉시 모드를 사용해야하므로 문제가되지 않습니다. 나는 이것과 함께 갈 것이다 :)
David Gouveia

답변:


3

스프라이트가 회전 된 후에 쉐이더를 적용해야합니다.

전체 장면이 아직 음영 처리되지 않았고 스프라이트가 실제로 픽셀 화되어 있으면 전체 장면에 대해 일종의 포스트 FX 필터가 필요합니다. 평균 픽셀 영역은 정상적으로 작동합니다. 그것은 정확히 당신이 의도 한 것이 아니며 (이동하거나 회전 할 때 약간 흐리게 보일 것입니다)하지만 트릭을 할 수 있습니다.

그 복고풍을 원하는대로 진실되게 유지하는 유일한 방법은 실제로 스프라이트 회전을 직접 그리는 것입니다. 스케일링이 구현 된 방법과는 아무런 관련이 없습니다. 해상도가 실제로 열악한 데, 어느 쪽이 매우 낮은 해상도로 시도 했습니까? 또한 트릭을 수행하고 더 자연스럽게 보일 것입니다. 왜냐하면 실제로 당신이보고있는 효과의 원인이기 때문입니다. 그리고 싸다! 아주 싼! 실제로 기존의 것보다 저렴합니다 (프래그먼트 셰이더 실행이 적음).

스프라이트에 비해 해상도가 높기 때문에 샘플 이미지에서 효과가 손상되므로 장면에서 실제 픽셀을 볼 수 있습니다.


예, 아직 쉐이더를 사용하지 않습니다. 해상도가 매우 낮은 텍스처의 일반 스프라이트 일 뿐이며, SpriteBatch포인트 샘플링이 켜진 상태에서 XNA의 기본값 으로 렌더링 됩니다. 그러나 포스트 FX는 실제로 해결 될 수 있습니다. 우선, 선형 샘플링을 사용하여 렌더링 대상으로 렌더링 한 다음 전체 렌더링 대상을 점 샘플링을 사용하여 백 버퍼로 렌더링합니다.
David Gouveia

@DavidGouveia는 해상도를 낮추는 기회를 놓치지 않습니다. 원래 효과를 얻으려면 가장 좋은 방법입니다. 고해상도가 필요한 경우 (GFX의 일부가 고해상도이거나 기본 해상도와 일치하려는 경우) 저해상도 오프 스크린 버퍼로 렌더링 한 다음 고해상도 프레임 버퍼에 전체 페인트 할 수 있습니다. 필터링이 해제 된-스크린 쿼드. 물론 직사각형 픽셀을 피하려면 가로 세로 비율을 일치시켜야합니다.
kaoD

내 편집을 확인하십시오 :) 대부분의 문제를 해결했다고 생각하지만이 문제에 가장 가까운 이웃에 더 나은 샘플링 솔루션이 있는지 궁금합니다. 질문을 잠시 더 길게 진행하겠습니다.
David Gouveia
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.