GLSL 쉐이딩 프로그래밍 - 멋진 그래픽 개발 일지 1

요즘 애들이 다 한다던 턴제 게임을 시작했다. 아무래도 엔진을 기반으로 만들어진 게임인 것 같은데, 게임 퀄리티도 좋고 그래픽, 시청각적인 측면에서도 꽤 나쁘지 않아서 플레이하고 있다. (스토리는 잘 모르겠다 ㅋㅋㅋㅋㅋㅋ) 게임을 하다보니 이런 그래픽은 어떻게 만들었을까라는 생각이 들곤 했는데, 역시 개발자들은 수학 천재인걸까? 아님 엔진에서 제공을 하는걸까? 아니 엔진 개발자는 천재인건가 그러면?

나도 멋진 그래픽 처리를 만들고 싶다는 생각이 들게 되었고 오랜만에 쉐이딩 처리에 재입문하게 되었다. 나도 언젠간 빛 연산을 멋지게 하는 3D 렌더링 화면을 만들고 말겠어!

쉐이더

쉐이더는 기본적으로 어떤 객체나 그래픽 표현할을 위한 정점 꼭짓점이 존재할 때, 이 정점을 서로 어떻게 처리할 것인지, 그리고 그 내부 색상은 어떻게 할 것인지에 대한 처리 흐름을 명시해놓은 소프트웨어라고 보면 좋을 것 같다.

과거에는 C++ DirectX 를 직접 저수준으로 제어하기 위해서 HLSL 쉐이더 언어를 배워서 사용하곤 했었다. 그 때 책을 보면서 공부했었는데 자주 사용하던 프로그램이 AMD사에서 배포하던 RenderMonkey 라는 프로그램이었다. https://gpuopen.com/archived/rendermonkey-toolsuite/ 지금은 아카이브되어서 더 이상 개발이 중단된 것으로 보인다. 다운로드는 가능하지만 유지보수를 안해주는 듯 싶다. 또한 주변에서도 사용하는 사람을 별로 못 봤다... 그래서 다른 프로그램을 찾을 필요성이 생겼다.

최근에는 DirectX가 아니라 웹에서 3D 구현을 위해서 WebGL을 공부하고 있는데 여기에 사용되는 쉐이더가 GL 기반인 GLSL 이다. HLSL이랑 문법이 다르지만 그래도 원리는 비슷 비슷해서 진입 장벽이 그렇게 높지는 않았다. 다만, 복잡한 수학 연산 처리가 들어가면 들어갈수록 힘들어지겠지...

아무튼 이런 GLSL을 작성하기 위한 IDE가 있으면 좋은데 VSCODE 내에 확장 프로그램도 있고, 온라인 에디터도 있는 듯 싶어서 찾다가 좋은 프로그램을 하나 알게 되었다.

https://shadered.org/ shadered 라는 소프트웨어인데 GLSL 등을 공부하고 작업하기에 딱 적합한 것 같아서 (프로그래밍 용도로) 사용하게 되었다.

오른쪽에 프리뷰 뷰포트를 기본 제공하고 왼쪽에서 작성하고 저장하면 즉시 컴파일 되는 듯 싶다.

기본적으로 필요한 변수들은 자동 맵핑되어있고, 원한다면 추가할 수도 있다.

인풋 슬롯을 추가할 수도 있다.

위에는 vertex 쉐이더 말고도 pixel shader을 수정할 수 있는 듯 싶다. 요즘은 픽셀 쉐이더라고 안 부르고, fragment shader 이라고 부른다고 카더라

기본 코드를 보니, 각 면의 법선 벡터를 기반으로 색상 값을 그대로 전달 해주는 것을 확인할 수 있었다. 파란색 면인 부분은 법선 벡터가 당연히 (0,0,1) 또는 (0,0,-1)일 테니 abs를 취하여 (0,0,1)을 그대로 픽셀 쉐이더로 넘기고, 픽셀 쉐이더에서 넘어온 파란색을 그대로 아웃 컬러로 지정해주는 것을 확인할 수 있다.

그러면 다음 게시글 부터는 배우고 알게된 것들을 좀 정리해야겠다.