GLSL 쉐이더 프로그래밍 - 포스트프로세싱을 활용하여 모니터 화면 픽셀 느낌 내기

RGB 텍스처를 사용한 픽셀 화면 구현

모니터를 바라보는 듯한 픽셀 느낌을 내기 위해서는 현재 텍스처와 픽셀 텍스처를 서로 합성해주면 된다. Blender 소프트웨어에서 하는 방법은 https://whitmem.kr/read/281 에 언급을 해두었다. 이번 작업물에서는 Object 자체에 Pixel 텍스처를 구현하는 것이 아니라, 포스트 프로세싱을 통해서 화면을 Pixel 처럼 구현하였다.

화면이 렌더링된 모습

다른 부분은 완전 검은색 부분이라서 (0,0,0) 픽셀이 렌더링되지 않았지만 화면에 보이는 전체적인 객체들을 한 번에 RGB 픽셀 모양으로 합성한 모습이다. 생각보다는 결과물이 나오지 않지만 우선 기본적인 방법만 기록한다.

GLSL PipeLine

기본적인 파이프 라인은 상기와 같다. PNG 이미지를 큐브 텍스처와 함께 렌더링하는 쉐이더와, 이 쉐이더를 RenderTarget에 담아 다시 화면상의 NDC Plane 에 렌더링하는 쉐이더 부 2개로 구성되어있다.

전반적인 렌더 흐름

초기 객체 메시

초기 객체 메시를 렌더링하는 GLSL 단, 객체의 버텍와 PNG 를 렌더하기 위한 텍스처 좌표를 픽셀 쉐이더로 넘긴다.

픽셀 쉐이더

넘겨온 텍셀 좌표를 바탕으로한 픽셀 쉐이더를 렌더링하는 쉐이더 단

위는 객체를 큐브를 렌더링하는 GLSL 단이다. 위 파이프라인은 결과적으로 렌더 타겟에 렌더링되고, 렌더 타겟 텍스처는 다시 NDC에 렌더링되면서 아래 쉐이더로 흘러들어간다.

렌더 타겟의 포스트프로세싱을 위한 버텍스 쉐이더

포스트 프로세싱의 NDC Plane 좌표는 -1~1 까지의 범위를 가지고 있으므로 텍스처 좌표로 맞춰주기 위해서 +1 /2 를 해준다. 그러면 0~1 좌표로 보정된다.

포스프프로세싱을 위한 픽셀 쉐이더

해당 좌표의 RenderTexture 는 color에 담고, rgb 픽셀 하나를 나타내는 텍스처는 x,y에 각각 10000번 곱하여 한 행, 열당 10000개의 RGB 텍셀이 표시되도록 한다. 이 값에 color을 곱하여 RGB 분위기를 나타 낼 수 있었다.

원본 R1 렌더 타겟 텍스처

합성된 뷰