Shader Graph
Shader Graph는 HLSL 대신 노드를 연결해 커스텀 Shader를 만듭니다. URP·HDRP에서 dissolve·outline·물 효과를 구성하고 Blackboard를 C#로 제어합니다. Master Stack과 Sub-Graph를 배우는 노드 기반 셰이더 가이드입니다.
상상해 보세요...
Shader Graph는 그래픽용 회로판과 같습니다. 각 노드는 부품: Texture 노드는 이미지를 샘플링하고, Math 노드는 색을 더하거나 곱하고, Time 노드는 움직임을 만듭니다. 코드 대신 포트를 연결합니다. 결과는 Master Stack으로 흘러 — Base Color, Metallic, Normal…을 정하는 마지막 노드입니다. 시각적이고 HLSL이 필요 없습니다.
개념 자세히
Shader Graph는 Universal Render Pipeline
(URP)와 HDRP의 일부입니다. Built-in에는
없습니다. 각 그래프는 .shadergraph 에셋 — 저장 시 Unity가 HLSL로
컴파일합니다. 생성: Create → Shader Graph → URP → Lit/Unlit Shader Graph.
노드 계열: Input(Time, UV, Position, Normal, Color, Texture
2D, Vector), Math(Add, Multiply, Lerp, Step, Smoothstep, Sine, Noise…),
Utility(Sample Texture 2D, Normal Map, Fresnel Effect…). 최종 결과는
Master Stack의 Fragment(와 Vertex)로
들어갑니다.
Properties와 Keywords로 Inspector 노브를 노출합니다. Properties는 blackboard(왼쪽 패널)에 있습니다 — Float “Speed”를 추가하면 이 Shader를 쓰는 모든 Material에 슬라이더가 생깁니다.
흔한 기법: dissolve(Noise + Step + clip), outline (vertex expand), water ripple(sine + UV offset + normal), hologram(fresnel + emission + scanline). Shader Graph는 Sub-Graphs도 지원 — 노드 그룹을 재사용 컴포넌트로 묶습니다.
예제: Dissolve Effect Graph
// Noise → Step으로 경계를 뚜렷하게 → Alpha Clip으로 픽셀 절단 → Dissolve 효과
실습 단계
Shader Graph Editor 열기
Create → Shader Graph → URP → Unlit/Lit Shader Graph. 에셋을 더블클릭해 에디터를 엽니다.
Blackboard에 Properties 추가
Blackboard(+) → Float, Color, Texture2D… 추가. 캔버스로 드래그해 입력 노드를 만듭니다.
노드 연결
출력 포트(오른쪽 원)에서 입력 포트(왼쪽 원)로 드래그. 포트 색이 맞아야 합니다(Vector3 → Vector3, Float → Float).
Master Stack에 연결
Fragment 블록(오른쪽): 최종 결과를 Base Color, Alpha, Emission…에 넣습니다. Preview가 실시간 갱신됩니다.
저장 → Material 만들기
Ctrl+S로 컴파일. Material을 만들고 새 Shader를 고릅니다. Properties가 Material Inspector에 나타납니다.
인터랙티브 시뮬레이터
이펙트 프리셋을 고르면 대응하는 노드 그래프와 프리뷰를 볼 수 있습니다.
Node Graph
Preview
코드 예제
기본C#에서 Shader Graph 속성을 구동 — 시간에 따라 dissolve.
using UnityEngine;
using System.Collections;
public class DissolveEffect : MonoBehaviour
{
// Property name must match the Shader Graph blackboard
static readonly int DissolveID = Shader.PropertyToID("_DissolveThreshold");
Renderer rend;
void Awake() => rend = GetComponent<Renderer>();
public void PlayDissolveOut(float duration = 1f)
{
StartCoroutine(DissolveRoutine(0f, 1f, duration));
}
public void PlayDissolveIn(float duration = 1f)
{
StartCoroutine(DissolveRoutine(1f, 0f, duration));
}
IEnumerator DissolveRoutine(float from, float to, float dur)
{
float t = 0f;
while (t < dur)
{
t += Time.deltaTime;
rend.material.SetFloat(DissolveID, Mathf.Lerp(from, to, t / dur));
yield return null;
}
rend.material.SetFloat(DissolveID, to);
}
}코드 예제
고급Dissolve Graph의 HLSL 등가 — 최적화나 Sub-Graph가 필요할 때.
// HLSL fragment shader equivalent of the graph above
// (ShaderLab wrapper omitted for brevity)
// Properties matching the Shader Graph blackboard
float4 _BaseColor;
sampler2D _BaseMap;
float _DissolveThreshold; // Driven from C#
sampler2D _NoiseMap;
float4 frag(v2f i) : SV_Target
{
// Sample noise at the mesh UV
float noise = tex2D(_NoiseMap, i.uv).r;
// Step: clip the pixel if noise < threshold
float dissolve = step(_DissolveThreshold, noise);
clip(dissolve - 0.001f); // Discard if dissolve < 0.001
// Edge glow: pixels near the boundary light up
float edgeWidth = 0.05f;
float edge = step(_DissolveThreshold - edgeWidth, noise) * dissolve;
float3 edgeColor = float3(1, 0.4, 0.1) * edge * 3f;
float4 baseColor = tex2D(_BaseMap, i.uv) * _BaseColor;
return float4(baseColor.rgb + edgeColor, baseColor.a);
}📌 빠른 정리
- ▸Shader Graph는 URP·HDRP에서만 동작
- ▸Blackboard Properties → Material Inspector에 표시
- ▸Sub-Graph: 노드 그룹을 재사용으로 묶기
- ▸C#에서 Shader.PropertyToID()로 빠르게 접근
- ▸Master Stack의 Alpha Clip에는 Render Face & Alpha Clip 설정 필요
⚠️ 흔한 실수
❌ 포트 색이 안 맞아 빨간 와이어
Float에 Vector3 연결 — 타입 불일치
✅ Split/Combine 노드로 타입 변환
❌ Material 드롭다운에 Shader Graph가 안 보임
그래프를 저장하지 않음(Ctrl+S)
✅ 저장하고 Unity 컴파일 완료(진행 바)를 기다림