셰이더 디자이너

이 문서에서는 Visual Studio 셰이더 디자이너를 사용하여 ‘셰이더’라는 사용자 지정 시각 효과를 만들고 수정하고 내보내는 방법을 설명합니다.

셰이더 디자이너를 사용하면 HLSL(High-Level Shader Language) 프로그래밍에 대해 모르더라도 게임 또는 앱용 사용자 지정 시각 효과를 만들 수 있습니다. 셰이더 디자이너에서 셰이더를 만들려면 셰이더를 그래프로 배치합니다. 즉, 데이터와 작업을 나타내는 ‘노드’를 디자인 화면에 추가한 다음, 노드를 서로 연결하여 작업에서 데이터를 처리하는 방법을 정의합니다. 각 작업 노드에서는 해당 지점까지의 효과 미리 보기가 제공되므로 효과의 결과를 시각화할 수 있습니다. 데이터는 노드를 통과하여 셰이더의 출력을 나타내는 최종 노드 방향으로 이동합니다.

지원되는 형식

셰이더 디자이너는 다음과 같은 셰이더 형식을 지원합니다.

형식 이름	파일 확장명	지원되는 작업(보기, 편집, 내보내기)
방향이 지정된 그래프 셰이더 언어	.dgsl	보기, 편집
HLSL 셰이더(소스 코드)	.hlsl	내보내기
HLSL 셰이더(바이트 코드)	.cso	내보내기
C++ 헤더(HLSL 바이트 코드 배열)	.h	내보내기

시작하기

이 섹션에서는 DGSL 셰이더를 Visual Studio C++ 프로젝트에 추가하는 방법에 대해 설명하고 작업을 시작할 수 있는 기본적인 정보를 제공합니다.

참고 항목

셰이더 그래프(.dgsl 파일) 같은 그래픽 항목의 자동 빌드 통합은 C++ 프로젝트에서만 지원됩니다.

프로젝트에 DGSL 셰이더를 추가하려면

1. 그래픽 작업에 필요한 필수 Visual Studio 구성 요소가 설치되어 있는지 확인합니다. 이 구성 요소를 이미지 및 3D 모델 편집기라고 합니다.

   설치하려면 메뉴 모음에서 도구>도구 및 기능 가져오기를 선택하여 Visual Studio 설치 관리자를 연 다음 개별 구성 요소 탭을 선택합니다. 게임 및 그래픽 카테고리에서 이미지 및 3D 모델 편집기 구성 요소를 선택한 다음 수정을 선택합니다.

   

2. 솔루션 탐색기에서 셰이더를 추가할 C++ 프로젝트의 바로 가기 메뉴를 연 다음, 추가>새 항목을 선택합니다.

3. 새 항목 추가 대화 상자의 설치됨 아래에서 그래픽을 선택하고 시각적 셰이더 그래프(.dgsl)를 선택합니다.

   참고 항목

   이미지 및 3D 모델 편집기 구성 요소가 설치되어 있는데 새 항목 추가 대화 상자에 그래픽 범주가 표시되지 않으면 그래픽 항목은 프로젝트 형식에 지원되지 않습니다.

4. 셰이더 파일의 이름과 셰이더 파일을 만들려는 위치를 지정합니다.

5. 추가 단추를 선택합니다.

기본 셰이더

DGSL 셰이더를 만들 때는 항상 최종 색 노드에 연결된 점 색 노드만 있는 최소 셰이더가 만들어집니다. 이 셰이더가 완전하고 작동하는 경우에도 더 많은 작업을 수행하지 않습니다. 따라서 작업 셰이더를 만드는 첫 번째 단계는 주로 점 색 노드를 삭제하거나 다른 노드가 연결할 수 있도록 최종 색 노드에서 연결을 해제하는 것입니다.

셰이더 디자이너 작업

다음 섹션에서는 셰이더 디자이너를 사용하여 사용자 지정 셰이더로 작업하는 방법에 대해 설명합니다.

셰이더 디자이너 도구 모음

셰이더 디자이너 도구 모음에는 DGSL 셰이더 그래프로 작업하는 데 도움이 되는 명령이 포함되어 있습니다.

셰이더 디자이너의 상태에 영향을 주는 명령은 주 Visual Studio 창의 셰이더 디자이너 모드 도구 모음에 있습니다. 디자인 도구와 명령은 셰이더 디자이너 디자인 화면의 셰이더 디자이너 도구 모음에 있습니다.

셰이더 디자이너 모드 도구 모음은 다음과 같습니다.

아래 표에서는 왼쪽에서 오른쪽으로 나타나는 순서에 따라 나열된 셰이더 디자이너 모드 도구 모음에 있는 항목을 설명합니다.

도구 상자 항목	설명
선택	그래프에서 노드 및 가장자리와 상호 작용하는 데 사용할 수 있습니다. 이 모드에서는 노드를 선택하여 이동하거나 삭제할 수 있으며 가장자리를 설정하거나 해제할 수 있습니다.
이동	창 프레임을 기준으로 셰이더 그래프를 이동할 수 있습니다. 이동하려면 디자인 화면에서 한 점을 선택하고 주변으로 이동시킵니다. 선택 모드에서는 Ctrl 키를 길게 눌러 이동 모드를 일시적으로 활성화할 수 있습니다.
확대/축소	창 프레임을 기준으로 셰이더 그래프 세부 정보를 더 많이 표시하거나 더 적게 표시할 수 있습니다. 확대/축소 모드에서 디자인 화면의 한 점을 선택한 다음 오른쪽 또는 아래쪽으로 이동하여 확대하거나 왼쪽 또는 위쪽으로 이동하여 축소합니다. 선택 모드에서는 Ctrl 키를 길게 누르거나 마우스 휠을 사용하여 확대하거나 축소할 수 있습니다.
크기에 맞게	창 프레임에 전체 셰이더 그래프를 표시합니다.
실시간 렌더링 모드	실시간 렌더링을 사용하는 경우 Visual Studio는 사용자 작업이 수행되지 않을 때도 디자인 화면을 다시 그립니다. 이 모드는 시간이 지남에 따라 셰이더 작업을 할 때 유용합니다.
구로 미리 봅니다.	사용하도록 설정하면 구의 모델을 사용하여 셰이더를 미리 봅니다. 미리 보기 도형은 한 번에 하나만 사용하도록 설정할 수 있습니다.
정육면체로 미리 봅니다.	사용하도록 설정하면 정육면체의 모델을 사용하여 셰이더를 미리 봅니다. 미리 보기 도형은 한 번에 하나만 사용하도록 설정할 수 있습니다.
원통으로 미리 봅니다.	사용하도록 설정하면 원통의 모델을 사용하여 셰이더를 미리 봅니다. 미리 보기 도형은 한 번에 하나만 사용하도록 설정할 수 있습니다.
원뿔로 미리 봅니다.	사용하도록 설정하면 원뿔의 모델을 사용하여 셰이더를 미리 봅니다. 미리 보기 도형은 한 번에 하나만 사용하도록 설정할 수 있습니다.
주전자로 미리 봅니다.	사용하도록 설정하면 주전자의 모델을 사용하여 셰이더를 미리 봅니다. 미리 보기 도형은 한 번에 하나만 사용하도록 설정할 수 있습니다.
평면으로 미리 봅니다.	사용하도록 설정하면 평면의 모델을 사용하여 셰이더를 미리 봅니다. 미리 보기 도형은 한 번에 하나만 사용하도록 설정할 수 있습니다.
도구 상자	도구 상자를 표시하거나 숨깁니다.
속성	속성 창을 표시하거나 숨깁니다.
고급	고급 명령 및 옵션을 포함합니다. 내보내기: 셰이더를 여러 가지 형식으로 내보낼 수 있습니다. 다른 이름으로 내보내기: HLSL 소스 코드 또는 컴파일된 셰이더 바이트 코드로 셰이더를 내보냅니다. 셰이더를 내보내는 방법에 대한 자세한 내용은 방법: 셰이더 내보내기를 참조하세요. 그래픽 엔진: 디자인 화면을 표시하는 데 사용되는 렌더러를 선택할 수 있습니다. D3D11를 사용하여 렌더링: Direct3D 11을 사용하여 셰이더 디자이너 디자인 화면을 렌더링합니다. D3D11WARP를 사용하여 렌더링: 사Direct3D 11 WARP(Windows Advanced Rasterization Platform)를 사용하여 셰이더 디자이너 디자인 화면을 렌더링합니다. 보기: 셰이더 디자이너에 대한 추가 정보를 선택할 수 있습니다. 프레임 속도: 사용하도록 설정하면 디자인 화면의 오른쪽 위 모서리에 현재 프레임 속도를 표시합니다. 프레임 속도는 초당 그려지는 프레임 수입니다. 이 옵션은 실시간 렌더링 모드 옵션을 사용할 때 유용합니다.

팁

고급 단추를 선택하여 마지막 명령을 다시 실행할 수 있습니다.

노드 및 연결 작업

선택 모드를 사용하여 노드를 추가, 제거, 연결, 구성하고 위치를 변경합니다. 이러한 기본 작업을 수행하는 방법은 다음과 같습니다.

선택 모드에서 기본 작업을 수행하려면

• 이 경우 가능한 방법은 다음과 같습니다.

  • 그래프에 노드를 추가하려면 도구 상자에서 노드를 선택한 다음 디자인 화면으로 이동합니다.

  • 그래프에서 노드를 제거하려면 노드를 선택한 다음, Delete 키를 누릅니다.

  • 노드의 위치를 변경하려면 노드를 선택한 다음 새 위치로 이동합니다.

  • 두 노드를 연결하려면 한 노드의 출력 터미널을 다른 노드의 입력 터미널로 이동합니다. 형식이 호환되는 터미널만 연결할 수 있습니다. 터미널 사이의 선은 연결을 표시합니다.

  • 연결을 제거하려면 연결된 터미널 중 하나의 바로 가기 메뉴에서 연결 끊기를 선택합니다.

  • 노드의 속성을 구성하려면 노드를 선택한 다음 속성 창에서 속성에 대한 새 값을 지정합니다.

셰이더 미리 보기

앱에서 셰이더가 표시되는 방식을 파악하려는 경우 효과 미리 보기 방식을 구성할 수 있습니다. 앱을 대략적으로 구현하려면 렌더링할 여러 도형 중 하나를 선택하고, 질감과 기타 재질 매개 변수를 구성하고, 시간 기반 효과의 애니메이션을 사용하도록 설정하고, 여러 각도에서 미리 보기를 검사합니다.

셰이프

셰이더 디자이너에는 셰이더를 미리 보는 데 사용할 수 있는 구, 정육면체, 원통, 원뿔, 주전자, 평면의 6개 도형이 포함되어 있습니다. 셰이더에 따라 특정 도형을 선택하면 미리 보기가 더 잘 표시될 수 있습니다.

미리 보기 도형을 선택하려면 셰이더 디자이너 모드 도구 모음에서 원하는 도형을 선택합니다.

질감 및 재질 매개 변수

대부분의 셰이더는 질감 및 재질 매개 변수를 사용하여 앱의 각 개체 종류에 대해 고유한 모양을 생성합니다. 앱에서 셰이더가 표시되는 방식을 확인하려는 경우 미리 보기를 렌더링하는 데 사용되는 질감 및 재질 매개 변수를 앱에서 사용할 질감 및 매개 변수와 일치하도록 설정할 수 있습니다.

질감 레지스터에 다른 질감을 바인딩하거나 기타 재질 매개 변수를 수정하려면:

1. 선택 모드에서 디자인 화면의 빈 영역을 선택합니다. 이렇게 하면 속성 창에 전역 셰이더 속성이 표시됩니다.

2. 속성 창에서 변경하려는 질감 및 매개 변수 속성에 대해 새 값을 지정합니다.

다음 표는 수정할 수 있는 셰이더 매개 변수를 보여 줍니다.

매개 변수	속성
질감 1 - 질감 8	Access: 모델 편집기에서 속성을 설정할 수 있도록 하려는 경우 Public으로 설정하고 그렇지 않으면 Private으로 설정합니다. Filename: 이 질감 레지스터와 연결된 질감 파일의 전체 경로입니다.
재질 주변	Access: 모델 편집기에서 속성을 설정할 수 있도록 하려는 경우 Public으로 설정하고 그렇지 않으면 Private으로 설정합니다. Value: 간접(또는 확산) 조명으로 인한 현재 픽셀의 확산 색입니다.
재질 확산	Access: 모델 편집기에서 속성을 설정할 수 있도록 하려는 경우 Public으로 설정하고 그렇지 않으면 Private으로 설정합니다. Value: 현재 픽셀이 직접 조명을 확산하는 방법을 설명하는 색입니다.
재질 발광	Access: 모델 편집기에서 속성을 설정할 수 있도록 하려는 경우 Public으로 설정하고 그렇지 않으면 Private으로 설정합니다. Value: 자체 제공 조명으로 인한 현재 픽셀의 색 기여도입니다.
재질 반사	Access: 모델 편집기에서 속성을 설정할 수 있도록 하려는 경우 Public으로 설정하고 그렇지 않으면 Private으로 설정합니다. Value: 현재 픽셀이 직접 조명을 반사하는 방법을 설명하는 색입니다.
재질 반사 강도	Access: 모델 편집기에서 속성을 설정할 수 있도록 하려는 경우 Public으로 설정하고 그렇지 않으면 Private으로 설정합니다. Value: 현재 픽셀에서 반사 하이라이트의 강도를 정의하는 지수입니다.

시간 기반 효과

일부 셰이더에는 효과에 애니메이션을 적용하는 시간 기반 구성 요소가 포함되어 있습니다. 효과가 실제로 적용된 모양을 표시하려면 미리 보기를 초당 여러 번 업데이트해야 합니다. 기본적으로는 셰이더를 변경할 때만 미리 보기가 업데이트됩니다. 시간 기반 효과를 확인할 수 있도록 이 동작을 변경하려는 경우에는 실시간 렌더링을 사용하도록 설정해야 합니다.

실시간 렌더링을 사용하도록 설정하려면 셰이더 디자이너 도구 모음에서 실시간 렌더링을 선택합니다.

영향 검사

대부분의 셰이더는 보기 각도, 방향성 광원 등의 변수에 의해 영향을 받습니다. 이러한 변수의 변경에 따른 효과의 반응 방식을 검사하려는 경우 미리 보기 도형을 자유롭게 회전하여 셰이더의 동작 방식을 관찰할 수 있습니다.

도형을 회전하려면 Alt 키를 누른 상태로 디자인 화면에서 임의의 점을 선택하여 옮깁니다.

셰이더 내보내기

앱에서 셰이더를 사용하려면 DirectX가 인식하는 형식으로 셰이더를 내보내야 합니다.

HLSL 소스 코드 또는 컴파일된 셰이더 바이트 코드로 셰이더를 내보낼 수 있습니다. HLSL 소스 코드는 파일 이름 확장명이 .hlsl인 텍스트 파일로 내보내집니다. 셰이더 바이트 코드는 파일 이름 확장명이 .cso인 원시 이진 파일로 내보낼 수도 있고, 셰이더 바이트 코드를 배열로 인코딩하는 C++ 헤더(.h) 파일로 내보낼 수도 있습니다.

셰이더를 내보내는 방법에 대한 자세한 내용은 방법: 셰이더 내보내기를 참조하세요.

바로 가기 키

명령	바로 가기 키
선택 모드로 전환	Ctrl+G, Ctrl+Q S
확대/축소 모드로 전환	Ctrl+G, Ctrl+Z Z
이동 모드로 전환	Ctrl+G, Ctrl+P K
모두 선택	Ctrl+A
현재 선택 영역을 삭제합니다.	Delete
현재 선택을 취소합니다.	이스케이프(Esc)
확대	Ctrl+마우스 휠 앞으로 더하기 기호(+)
축소	Ctrl+마우스 휠 뒤로 빼기 기호(-)
디자인 화면 위로 이동	마우스 휠 뒤로 PageDown
디자인 화면 아래로 이동	마우스 휠 앞으로 PageUp
디자인 화면 왼쪽 이동	Shift+마우스 휠 뒤로 마우스 휠 왼쪽 Shift+PageDown
디자인 화면 오른쪽 이동	Shift+마우스 휠 앞으로 마우스 휠 오른쪽 Shift+PageUp
키보드 포커스를 다른 노드로 이동	화살표 키
키보드 포커스가 있는 노드 선택(노드가 선택 그룹에 추가됨)	Shift+스페이스바
키보드 포커스가 있는 노드의 선택 전환	Ctrl+스페이스바
현재 선택 영역을 전환(노드가 선택되어 있지 않으면 키보드 포커스가 있는 노드 선택)	스페이스바
현재 선택 영역 위로 이동	Shift+위쪽 화살표
현재 선택 영역 아래로 이동	Shift+아래쪽 화살표
현재 선택 영역 왼쪽으로 이동	Shift+왼쪽 화살표
현재 선택 영역 오른쪽으로 이동	Shift+오른쪽 화살표

관련 항목

제목	설명
게임 및 앱을 위한 3D 자산 작업	질감 및 이미지, 3D 모델 및 셰이더 효과를 작업하는 데 사용할 수 있는 Visual Studio Tools에 대한 개요를 제공합니다.
이미지 편집기	Visual Studio 이미지 편집기를 사용하여 질감과 이미지 작업을 수행하는 방법을 설명합니다.
모델 편집기	Visual Studio 모델 편집기를 사용하여 3D 모델 작업을 수행하는 방법을 설명합니다.