Dissolve 셰이더 실험: 노이즈 스케일과 발광 경계 폭을 따로 바꿔보기

Dissolve의 경계가 두꺼워지면 더 많이 사라진 것처럼 보일까요? 노이즈 패턴을 촘촘하게 만들었을 때도 같은 진행 값을 그대로 비교해도 될까요? 이번에는 이 두 질문을 분리하기 위해 작은 브라우저 셰이더를 만들었습니다.

이 글은 AI의 도움으로 작성한 코드 실험 기록입니다. WebGL2에서 실제로 실행한 비교 화면과, 시각적인 아이디어를 설명하는 생성 일러스트를 각각 표시했습니다. Unreal Engine에서 수행한 작업이나 운영자의 기존 제작 경험으로 소개하지 않습니다.

같은 입력을 남기고, 두 변수만 나눠서 바꾸기

화면 정면을 보는 quad 위에 원형 마스크를 만들고, 직접 작성한 두 옥타브의 value noise로 남길 영역을 판정했습니다. 각 조건은 512×512 픽셀입니다. 시드 37, 시간 0초, 컷오프 0.48, 원형 외곽과 색 계산은 고정했습니다.

조건	노이즈 스케일	경계 폭	바꾼 내용
기준	3	0.035	비교 출발점
노이즈 스케일만 변경	7	0.035	노이즈 샘플링 좌표의 배율
경계 폭만 변경	3	0.14	남은 표면에 밝은 색을 섞는 값의 구간

아래는 같은 실행에서 얻은 실제 캡처입니다. 그림 속 세 화면은 이 표와 같은 순서입니다.

실행 환경은 macOS arm64, Playwright 1.62.1, Chromium Headless Shell 151, WebGL2·GLSL ES 3.00입니다. 렌더러는 SwiftShader입니다. 같은 세션에서 동일 입력으로 다시 그린 픽셀은 세 조건 모두 일치했고, WebGL 오류는 없었습니다. 소프트웨어 렌더링을 사용했으므로 GPU 속도나 Unreal Material 비용에 대한 결론은 내리지 않습니다.

노이즈 스케일을 올리니 패턴과 남은 면적이 함께 달라졌다

가운데 화면은 기준 화면보다 작은 구멍과 끊어진 조각이 더 자주 나타납니다. 여기서 스케일은 조각의 크기를 직접 지정하는 값이 아니라, UV에 곱해 노이즈를 읽는 좌표 범위를 바꾸는 값입니다. 같은 원 안에서 더 넓은 노이즈 영역을 읽게 한 것입니다.

예상보다 눈에 들어오는 차이는 남은 면적도 같지 않다는 점입니다. 컷오프는 두 조건 모두 0.48이지만, 같은 크기의 화면에 들어온 노이즈 값 분포가 달라졌습니다. 따라서 이 비교를 보고 “노이즈가 촘촘할수록 항상 더 많이 사라진다”고 일반화할 수 없습니다. 이 시드와 프레임에서 나타난 결과입니다.

패턴의 인상만 비교하려면 각 조건의 남은 면적을 맞추는 두 번째 실험이 필요합니다. 이번 기록에서는 컷오프를 고정한 결과를 그대로 남겼습니다. 이후 여러 시드로 같은 차이가 유지되는지 확인해볼 여지도 있습니다.

경계 폭은 사라지는 위치를 그대로 두고 밝은 영역을 넓혔다

오른쪽 화면은 기준과 동일한 노이즈를 사용합니다. 화면에서 어두운 배경으로 잘린 위치는 유지되고, 남은 표면 안쪽으로 밝은 색 영역이 넓어집니다. 코드에서도 표면을 남길지 판단하는 부분에는 경계 폭을 사용하지 않았습니다.

이번 입력에서 남은 영역을 세어보면 기준과 경계 폭 변경 조건은 각각 90,650픽셀로 같았습니다. 이 수치는 두 캡처의 판정 결과를 확인하기 위한 값입니다. 렌더링 성능이나 물리적인 발광 폭을 측정한 수치는 아닙니다.

경계 폭 0.14는 0.035의 네 배지만, 화면에서 보이는 띠의 두께가 모든 위치에서 네 배가 된다는 뜻도 아닙니다. 여기서 폭은 0–1 노이즈 필드 안의 값 구간입니다. 같은 값 차이라도 노이즈가 공간적으로 얼마나 빠르게 변하는지에 따라 화면에 나타나는 폭이 달라질 수 있습니다.

컷오프와 색 경계가 만나는 핵심 코드

실제로 실행한 fragment shader에서 아래 부분이 두 역할을 나눕니다. noise2는 시드가 고정된 value noise 함수이며, 두 결과를 0.72와 0.28의 비율로 섞었습니다.

vec2 q = vUv * uNoiseScale + vec2(uTime * 0.12, 0.0);
float field = noise2(q) * 0.72
            + noise2(q * 2.0 + 11.0) * 0.28;

if (field < uThreshold) {
    fragColor = vec4(background, 1.0);
    return;
}

float edge = 1.0 - smoothstep(
    uThreshold, uThreshold + uEdgeWidth, field
);
fragColor = vec4(mix(material, rim, edge), 1.0);

첫 번째 판정은 배경색을 출력해 표면이 사라진 모습을 만듭니다. 실제 투명도나 엔진의 Masked blend를 사용한 구현은 아닙니다. 그다음 smoothstep으로 남아 있는 표면의 경계 쪽에 색을 섞습니다. 이 예제의 밝은 띠에는 bloom, HDR 발광, 노출 모델도 들어 있지 않습니다.

함수의 동작은 Microsoft의 HLSL SmoothStep 문서와 Khronos의 GLSL 함수 정의를 대조했습니다. 최소·최대 경계 사이를 부드럽게 연결한다는 점을 사용했고, 이번 입력에서는 항상 아래 경계보다 위 경계가 크도록 설정했습니다.

Unreal Material로 옮길 때 따로 확인할 부분

Epic의 Math Material Expressions 문서에도 SmoothStep의 Min, Max, Value 입력이 설명돼 있습니다. 이를 참고하면 노이즈와 진행 값의 비교, 남은 영역의 경계 색이라는 두 역할을 Material 그래프에서도 나누어 생각해볼 수 있습니다.

다만 이번 브라우저 결과만으로 Unreal에서 같은 외관이 나온다고 판단하지는 않습니다. 사용한 노이즈 함수부터 다를 수 있고, Masked 판정, 텍스처 필터링, 안티앨리어싱, Emissive와 노출도 다시 확인해야 합니다. 후속 Unreal 실험에서는 먼저 노이즈와 임계값을 맞추고, 실루엣이 같은지 확인한 뒤 경계 색과 발광을 추가하는 순서가 적절해 보입니다.

기존 Unreal Material Dissolve 구조와 실습에는 엔진에서 확인한 별도 예제가 있습니다. 이번 글은 그 설명을 반복하기보다, 노이즈의 샘플링 배율과 경계 값 구간이 서로 다른 변수라는 점을 고정 프레임으로 비교한 기록입니다.

다음에 확인하고 싶은 것은 화면 크기를 줄였을 때 얇은 경계가 얼마나 유지되는지입니다. 여러 시드와 컷오프에서도 패턴이 읽히는지까지 확인하면, 작은 스킬 아이콘이나 멀리 있는 효과를 위한 설정을 비교하는 실험으로 이어갈 수 있겠습니다.

작은 셰이더 실험 모아보기 · 작업기록 목록

출처 확인일: 2026년 10월 28일. 실제 캡처는 이번 WebGL2 실행에서 얻었으며, 세 개의 개념 일러스트는 OpenAI 이미지 생성 도구로 제작했습니다.