셰이더 에디터

셰이더는 게임에서 화면에 렌더링되는 그래픽을 조작하는 데 매우 강력한 도구입니다. 이를 통해 스프라이트에 미세한 색조를 추가하는 것부터 전체 화면 왜곡 효과까지 매우 빠른 효과를 구현할 수 있습니다. 하지만 셰이더란 무엇일까요?

셰이더는 기본적으로 그래픽 카드에서 직접 실행되는 두 부분으로 구성된 프로그램입니다. 이로 인해 GPU가 모든 작업을 처리하므로 매우 빠르며, CPU 사이클을 게임 코드에 할당할 수 있습니다. 전체 셰이더는 정점 셰이더 프로그램과 프래그먼트 셰이더 프로그램(픽셀 셰이더라고도 함)으로 구성됩니다. 이 두 개의 작은 프로그램은 함께 작동하여 그래픽 카드가 화면에 렌더링하는 내용을 조작합니다. 이를 통해 실제로 디스플레이 버퍼에 렌더링되는 위치, 색상 및 알파 값을 실시간으로 조작할 수 있습니다.

정점 셰이더

정점 셰이더는 렌더링 파이프라인에서 개별 정점(이미지를 렌더링하는 데 사용되는 삼각형의 점)을 처리하는 프로그래머블 셰이더 단계입니다. 게임메이커는 스프라이트나 표면과 같은 기하학을 렌더링할 때 정점 스트림(정점 버퍼라고 함)을 생성하여 이러한 삼각형의 기하학을 정의합니다. 예를 들어, 스프라이트는 두 개의 삼각형(일반적으로 다각형이라고 함)으로 렌더링되어 "쿼드"를 형성합니다. 정점 버퍼의 이 정점 스트림은 정점 셰이더에 입력으로 제공되며, 정점 데이터는 프로그래머블 방식으로 처리됩니다. 정점 셰이더의 출력은 GPU가 삼각형을 조립하는 데 사용되며, 이후 적절히 클리핑되고 뷰 포트 및 뷰 카메라에 맞게 제거됩니다. 그 후, 새로운 출력 스트림인 프래그먼트가 생성됩니다. 프래그먼트는 화면에 나타나는 단일 픽셀에 해당하는 작은 데이터 구조입니다.

프래그먼트 셰이더

프래그먼트 셰이더는 렌더링 파이프라인에서 "프래그먼트"(주어진 다각형에 텍스처를 적용하는 보간된 픽셀)를 처리하는 프로그래머블 셰이더 단계입니다. 이들은 렌더링된 삼각형 픽셀의 최종 픽셀 색상을 출력하는 역할을 합니다. 기본적으로 프래그먼트 셰이더는 정점 셰이더에 의해 파이프라인을 통해 전달된 모든 프래그먼트를 입력으로 받아 처리하여 최종적으로 화면에 그려질 픽셀의 색상과 알파를 변경합니다.

셰이더가 실제로 어떻게 작동하는지와 그래픽 파이프라인에서의 위치에 대한 전체 개요는 이 문서의 범위를 벗어나지만, 간단한 가이드는 다음 링크에서 확인할 수 있습니다: 셰이더 사용 가이드

언어 지원

게임메이커는 다음과 같은 셰이더 언어를 지원합니다:

GLSL ES 셰이더를 작성할 때는 공식 언어 사양을 최대한 준수하는 것이 좋습니다. 일부 대상 플랫폼은 다른 플랫폼보다 더 엄격할 수 있습니다(예: HTML5 및 GX.games 대상은 Windows, macOS 등과 비교할 때 언어 제한이 더 많을 수 있습니다).

셰이더 만들기

셰이더 리소스를 만들려면 자산 브라우저 내에서 마우스 오른쪽 버튼을 클릭하고 Create -> Shader를 선택합니다. 기본 셰이더를 생성한 후, 새 리소스에서 마우스 오른쪽 버튼 메뉴를 사용하여 셰이더 유형을 선택한 다음 코드를 편집할 수 있습니다. 코드 편집기는 새 셰이더를 만들 때 "프로그램"인 정점과 프래그먼트로 나뉘어 있으며, 각 프로그램은 편집기 상단의 탭에서 사용할 수 있습니다. 두 부분은 동시에 생성되며, 정점 셰이더 없이 셰이더를 생성할 수 없습니다. 프래그먼트 셰이더만 사용하려는 경우에도 먼저 "패스 스루" 정점 셰이더를 생성해야 하므로, 기본적으로 생성되는 모든 새 셰이더에는 이미 정점 및 프래그먼트 패스 스루 셰이더가 코드화되어 있습니다.

GLSL ES 셰이더는 모든 대상 플랫폼에서 사용할 수 있지만, HTML5 대상 플랫폼에서 작동하려면 HTML5 게임 옵션에서 WebGL을 활성화해야 합니다. 그렇지 않으면 작동하지 않습니다.

활용 예제

다음은 셰이더를 활용하는 몇 가지 예제입니다:

예제 1: 색상 변화 셰이더

// 정점 셰이더 코드
// 정점의 위치를 그대로 전달

// 프래그먼트 셰이더 코드
// 픽셀 색상을 변경

예제 2: 텍스처 왜곡 셰이더

// 정점 셰이더 코드
// 정점의 UV 좌표를 변형

// 프래그먼트 셰이더 코드
// 텍스처를 왜곡하여 출력

예제 3: 애니메이션 효과 셰이더

// 정점 셰이더 코드
// 시간에 따라 정점 위치 변경

// 프래그먼트 셰이더 코드
// 애니메이션 효과 적용

자세한 셰이더 함수 및 사용 방법에 대한 정보는 다음 페이지를 참조하세요:

• 셰이더 함수
• 셰이더 상수
• GLSL ES 1.0 사양
• HLSL 언어 참조
• PSSL 언어 프레젠테이션