Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

doc_visual_shader_plugins

VisualShaders는 셰이더를 생성하기 위한 시각적 대안입니다.

셰이더는 본질적으로 시각적 요소와 연결되어 있으므로 텍스처, 재질 등을 미리 볼 수 있는 그래프 기반 접근 방식은 순수 스크립트 기반 셰이더에 비해 훨씬 더 많은 편의성을 제공합니다. 반면에 VisualShaders는 셰이더 스크립트의 모든 기능을 노출하지 않으며 특정 효과를 위해서는 두 기능을 병렬로 사용해야 할 수도 있습니다.

참고

셰이더에 익숙하지 않다면 :ref:`doc_introduction_to_shaders`부터 읽어보세요.

VisualShader 만들기

VisualShader는 모든 :ref:`class_ShaderMaterial`에서 생성될 수 있습니다. VisualShaders 사용을 시작하려면 선택한 개체에 새 ``ShaderMaterial``를 만듭니다.

../../_images/shader_material_create_mesh.webp

그런 다음 Shader 리소스를 Shader 속성에 할당합니다.

../../_images/visual_shader_create.webp

Shader 리소스를 클릭하면 만들기 셰이더 대화 상자가 자동으로 열립니다. 드롭다운에서 유형 옵션을 :ref:`class_VisualShader`로 변경한 다음 이름을 지정합니다.

../../_images/visual_shader_create2.webp

방금 만든 시각적 개체 셰이더를 클릭하여 셰이더 편집기를 엽니다. 셰이더 Editor의 레이아웃은 네 부분으로 구성됩니다. 왼쪽의 파일 목록, 상단 도구 모음, 그래프 자체, 오른쪽의 재료 미리 보기(토글할 수 있음)

../../_images/visual_shader_editor2.webp

도구 모음의 왼쪽에서 오른쪽으로:

  • 화살표를 사용하여 파일 패널의 가시성을 전환할 수 있습니다.

  • File 버튼은 파일 저장, 로드 및 생성을 위한 드롭다운 메뉴를 엽니다.

  • Add Node 버튼은 노드를 셰이더 그래프에 추가할 수 있는 팝업 메뉴를 표시합니다.

  • 드롭다운 메뉴는 셰이더 유형(정점, 조각 및 조명)입니다. 스크립트 셰이더와 마찬가지로 내장된 노드를 사용할 수 있는지 정의합니다.

  • 다음 버튼과 숫자 입력은 확대/축소 수준, 그리드 스냅 및 그리드 선 사이의 거리(픽셀 단위)를 제어합니다.

  • 토글은 편집기 오른쪽 하단의 그래프 미니맵 표시 여부를 제어합니다.

  • 선택한 노드 자동 정렬 버튼은 선택한 노드를 최대한 효율적이고 깔끔하게 정리하려고 시도합니다.

  • 가변 관리 버튼을 누르면 가변을 추가하거나 제거할 수 있는 드롭다운이 열립니다.

  • 생성된 코드 표시 버튼은 그래프에 해당하는 셰이더 코드를 표시합니다.

  • 토글은 재질 미리보기를 켜거나 끕니다.

  • Online Docs 버튼을 누르면 웹 브라우저에서 이 설명서 페이지가 열립니다.

  • 마지막 버튼을 사용하면 셰이더 편집기를 나머지 편집기와 별도로 자체 창에 넣을 수 있습니다.

참고

VisualShader는 코딩이 필요하지 않지만 스크립트 셰이더와 동일한 논리를 공유합니다. 셰이딩 파이프라인을 잘 이해하려면 두 가지의 기본 사항을 모두 배우는 것이 좋습니다.

시각적인 셰이더 그래프는 씬 뒤에 있는 스크립트 셰이더로 변환되며 도구 모음의 마지막 버튼을 누르면 이 코드를 볼 수 있습니다. 이는 주어진 노드의 기능과 이를 스크립트에서 재현하는 방법을 이해하는 데 편리할 수 있습니다.

외부 텍스트 편집기 사용하기

기본적으로 모든 새로운 VisualShader``에는 출력 노드가 있습니다. 모든 노드 연결은 출력 노드 소켓 하나에서 끝납니다. 노드는 셰이더를 생성하는 기본 단위입니다. 새로운 노드를 추가하려면 왼쪽 상단에 있는 ``Add Node 버튼을 클릭하거나 그래프의 빈 위치를 마우스 오른쪽 버튼으로 클릭하면 메뉴가 나타납니다.

../../_images/vs_popup.webp

HUD는 다음의 정보들을 보여줍니다:

  • 그래프를 마우스 오른쪽 버튼으로 클릭하면 커서 위치에 이 메뉴가 호출되며, 이 경우 생성된 노드도 해당 위치 아래에 배치됩니다. 그렇지 않으면 그래프 중앙에 생성됩니다.

  • 가로 및 세로로 크기를 조정하여 더 많은 콘텐츠를 표시할 수 있습니다. 호출 사이에 크기 변환 및 트리 콘텐츠 위치가 저장되므로 갑자기 팝업을 닫은 경우 이전 상태를 쉽게 복원할 수 있습니다.

  • 드롭다운 옵션 메뉴의 Expand AllCollapse All 옵션을 사용하면 사용 가능한 노드를 쉽게 나열할 수 있습니다.

  • 팝업에서 노드를 그래프로 끌어서 놓을 수도 있습니다.

팝업에는 노드가 카테고리별로 정렬되어 있지만 처음에는 부담스러워 보일 수 있습니다. 노드 중 일부를 추가하고 출력 소켓에 연결한 후 무슨 일이 일어나는지 관찰해 보세요.

scalar 출력을 vector 입력에 연결하면 벡터의 모든 구성 요소가 스칼라 값을 사용합니다.

vector 출력을 scalar 입력에 연결할 때 스칼라 값은 벡터 구성 요소의 평균이 됩니다.

doc_visual_shader_plugins

Visual 셰이더 노드에는 입력 및 출력 포트가 있습니다. 입력 포트는 노드의 왼쪽에 있고, 출력 포트는 노드의 오른쪽에 있습니다.

../../_images/vs_node.webp

이러한 포트는 포트 유형을 구별하기 위해 색상이 지정됩니다.

플레이스 홀더 유형

유형

색상

설명

예제

크기

그레이

스칼라는 단일 값입니다.

스칼라

벡터

보라색

벡터는 값의 집합입니다.

벡터

bool

녹색

켜짐 또는 꺼짐, 참 또는 거짓.

bool

변형

핑크

3x2 행렬(Matrix)로 2D 변형에 사용됩니다.

변형

예제

오렌지

텍스처 샘플러. 텍스처를 샘플링하는 데 사용할 수 있습니다.

예제

모든 유형은 셰이더의 정점, 조각 및 조명 계산에 사용됩니다. 예: 행렬 곱셈, 벡터 추가 또는 스칼라 나누기.

두 장소에서 템플릿을 관리할 수 있습니다.

doc_visual_shader_plugins

다음은 알아 둘 가치가 있는 특별한 노드입니다. 목록은 완전하지 않으며 더 많은 노드 및 예제로 확장될 수 있습니다.

Expression Node(표현식 노드)

Expression 노드를 사용하면 시각적 셰이더 내에 Godot Shading Language(GLSL과 유사한) 표현을 작성할 수 있습니다. 노드에는 필요한 입력 및 출력 포트를 원하는 만큼 추가할 수 있는 버튼이 있으며 크기를 조정할 수 있습니다. 각 포트의 이름과 유형을 설정할 수도 있습니다. 입력한 표현식은 재료에 즉시 적용됩니다(포커스가 표현식 텍스트 상자를 벗어나면). 구문 분석 또는 컴파일 오류는 출력 탭에 인쇄됩니다. 출력은 기본적으로 0 값으로 초기화됩니다. 노드는 특수 탭 아래에 있으며 모든 셰이더 모드에서 사용할 수 있습니다.

이 노드의 가능성은 거의 무한합니다. 복잡한 프로시저를 작성할 수 있고 루프, discard 키워드, 확장 유형 등과 같은 텍스트 기반 셰이더의 모든 기능을 사용할 수 있습니다. 예를 들면 다음과 같습니다.

../../_images/vs_expression2.png

노드 삭제 (-noimp)

Reroute 노드는 순전히 조직 목적으로 사용됩니다. 많은 노드가 포함된 복잡한 셰이더에서는 노드 사이의 경로로 인해 읽기가 어려울 수 있습니다. 이름에서 알 수 있듯이 Reroute를 사용하면 노드 사이의 경로를 조정하여 내용을 더 쉽게 읽을 수 있습니다. 단일 경로에 대해 여러 개의 재라우팅 노드를 가질 수도 있으며 이를 사용하여 직각을 만들 수 있습니다.

../../_images/vs_reroute.webp

경로 재지정 노드를 이동하려면 마우스 커서를 그 위로 이동하고 나타나는 핸들을 잡으세요.

../../_images/vs_reroute_handle.webp

노드 만들기

Fresnel 노드는 법선 및 뷰 벡터를 허용하고 둘 사이의 포화 내적인 스칼라를 생성하도록 설계되었습니다. 또한 방정식의 역산 및 거듭제곱을 설정할 수 있습니다. Fresnel 노드는 물체에 테두리 같은 조명 효과를 추가하는 데 적합합니다.

../../_images/vs_fresnel.webp

불 방식 OR

Boolean 노드는 Scalar 또는 Vector``로 변환되어 각각 ``0 또는 1(0, 0, 0) 또는 ``(1, 1, 1)``를 나타낼 수 있습니다. 이 속성을 사용하면 한 번의 클릭으로 일부 효과 부분을 활성화하거나 비활성화할 수 있습니다.

../../_images/vs_boolean.gif

노드인 경우

If 노드를 사용하면 a``와 ``b 간의 비교 결과를 반환할 벡터를 설정할 수 있습니다. 반환될 수 있는 벡터는 세 가지입니다: a == b``(이 경우 공차 매개변수는 비교 임계값으로 제공됩니다. 기본적으로 최소값과 같습니다(예: ``0.00001)), a > ba < b.

../../_images/vs_if.png

Switch(스위치)

부울 조건이 true 또는 false``인 경우 ``Switch 노드는 벡터를 반환합니다. ``Boolean``는 위에 소개되었습니다. 벡터를 실제 불리언으로 변환하려면 벡터의 모든 구성요소가 0이 아니어야 합니다.

../../_images/vs_switch.webp

지터

Mesh Emitter 노드는 메시 정점에서 입자를 방출하는 데 사용됩니다. 이는 Particles 모드에 있는 셰이더에만 사용할 수 있습니다.

모든 3D 개체가 메쉬 파일인 것은 아닙니다. glTF 파일을 그래프로 끌어서 놓을 수 없습니다. 그러나 상속된 씬을 생성하고 해당 씬에 메시를 자체 파일로 저장한 다음 사용할 수 있습니다.

../../_images/vs_meshemitter.webp

또한 obj 파일을 그래프 편집기로 끌어다 놓아 해당 특정 메시에 대한 노드를 추가할 수도 있습니다. 다른 메시 파일은 이에 대해 작동하지 않습니다.