Fx Editor(커스텀 이펙트 .srfx)

GLSL 셰이더를 작성해서 SynapseRack 의 이펙트 노드를 직접 만들 수 있습니다. 흐름은 3단계입니다.

1. 웹 에디터 Fx Editor 에서 셰이더를 작성한다
2. Export 해서 .srfx 파일을 다운로드한다
3. .srfx 를 CustomFx 폴더에 넣는다 → 노드 목록의 Custom FX 카테고리에 나타난다

Fx Editor(웹 에디터)

https://fx-editor.synapserack.com/ 를 브라우저에서 열기만 하면 사용할 수 있습니다. 설치도 로그인도 필요 없습니다.

편집 화면은 3개의 패널로 구성되어 있습니다.

패널	내용
코드 에디터	Shadertoy 방언의 GLSL(mainImage)을 작성합니다. 컴파일 에러는 자신이 작성한 행 번호에 맞춰 표시됩니다
라이브 프리뷰	WebGL2 로 그 자리에서 실행. 테스트 패턴／동영상 파일(드래그 앤 드롭 또는 선택)／웹캠으로 입력을 전환할 수 있습니다
노드 프리뷰	그 셰이더가 SynapseRack 에서 어떤 노드가 되는지를 표시합니다. 여기의 슬라이더를 움직이면 프리뷰에도 반영됩니다

톱 페이지에는 샘플이 나열되어 있어, 클릭하면 그 자리에서 열 수 있습니다. 편집한 작품은 브라우저 안(localStorage)에 자동 저장되어, 톱 페이지의 ‘내 작품’에 남습니다(최대 100건, 오래된 것부터 사라집니다).

그 외의 버튼:

버튼	동작
공유	셰이더를 URL 에 담은 링크를 복사합니다. 열면 그 자리에서 복원됩니다
ISF 불러오기	ISF(Interactive Shader Format)의 .fs 를 읽어 이 에디터의 형식으로 변환합니다. 톱 페이지에서는 일괄 변환 페이지(.fs 를 한꺼번에 드롭 → .srfx 가 반환됩니다)로도 갈 수 있습니다
Export	변환 서비스(fxconv)로 보내 .srfx 를 다운로드합니다

Export 만은 인터넷 연결과 변환 서비스가 필요합니다. 프리뷰와 노드 프리뷰는 완전히 브라우저 안에서 동작하지만, 내보내기는 HLSL(Windows 용)과 Metal(Mac 용)로의 크로스 컴파일을 수반하므로 변환 서비스로 전송됩니다. 변환 서비스에는 1분당 10 리퀘스트의 레이트 리밋이 있으며, 초과하면 그 사실이 표시됩니다.

내보낸 .srfx 는 Windows 에서도 Mac 에서도 그대로 동작합니다. 파일 하나로 배포할 수 있고, Fx Editor 에서 다시 열어 편집을 이어갈 수도 있습니다.

셰이더 작성법

Shadertoy 방언의 mainImage 를 작성합니다.

uniform float uIntensity; // 0 1 0.5

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 uv = fragCoord / iResolution.xy;
    vec3 col = texture(iChannel0, uv).rgb;
    fragColor = vec4(col * uIntensity, 1.0);
}

제공되는 uniform(선언하지 않음)

iResolution / iTime / iTimeDelta / iFrame / iMouse / iChannel0 은 런타임이 전달합니다. iChannel0 이 FX 체인에서 흘러온 영상입니다.

앱 쪽이 여기에 넣고 있는 값은 다음과 같습니다.

uniform	내용
iResolution	그리는 대상의 폭·높이
iTime	경과 시간
iTimeDelta	이전 프레임으로부터의 경과 초
iFrame	프레임 번호
iMouse	마우스 좌표(zw 는 왼쪽 버튼을 누르고 있는 동안에만 좌표가 들어갑니다)

파라미터 = uniform 선언

uniform 을 한 줄 추가하면 그것이 노드의 입력 포트가 됩니다.

uniform float uZoom;          // レンジ 0〜1、初期値 0
uniform float uZoom; // 1 4 2 // レンジ 1〜4、初期値 2

끝의 주석 // min max default 는 레인지 힌트입니다(default 는 생략 가능).

선언	노드 쪽
uniform float / uniform int	슬라이더가 달린 입력 포트(힌트의 min/max 가 그대로 레인지가 됩니다)
uniform bool	토글이 달린 입력 포트
uniform vec2 / vec3 / vec4	포트는 만들어지지 않습니다(값은 셰이더 안의 기본값 그대로)

노드의 포트가 되는 것은 float / int / bool 뿐입니다. vec2/vec3/vec4 파라미터는 선언한 기본값 그대로 고정되며, 노드 위에 행이 나오지 않으므로 조작할 수 없습니다. 색이나 좌표를 다루고 싶은 경우에는 지금으로서는 float 를 여러 개로 나누어 선언하는 것이 확실합니다.

입력 텍스처는 iChannel0 한 장뿐입니다. 앱 쪽 런타임이 셰이더에 전달하는 텍스처는 FX 체인에서 온 영상 한 장뿐입니다. 추가로 sampler2D(마스크 이미지 등)를 선언해도, 앱 쪽에 그것을 배선할 경로는 없습니다.

min 과 max 가 같은 값이면 슬라이더가 죽어 버리므로, 앱 쪽이 자동으로 max = min + 1 로 넓힙니다.

.srfx 를 앱에 불러오기

두는 위치

<Source Directory>/SainaWorks/SynapseRack/CustomFx/

• Windows 기본값: C:/SainaWorks/SynapseRack/CustomFx
• Mac 기본값: ~/SainaWorks/SynapseRack/CustomFx(사용자 폴더 바로 아래)

이 폴더는 시작할 때 자동으로 만들어집니다. 부모 폴더의 위치는 Settings.json 의 parentPath 로 바꿀 수 있습니다(VJ 소재를 불러오는 경로(Source Directory) 지정하기 와 같은 설정입니다).

서브 폴더를 만들어 정리해도 상관없습니다. CustomFx 폴더는 재귀적으로 탐색되므로, CustomFx/직접만든/glitch.srfx 처럼 중첩해도 불러와집니다.

파일 취급

.srfx 를 덮어쓰면 이펙트가 갱신되고, 지우면 언인스톨입니다. 파일 하나를 넣고 빼는 것만으로 끝납니다.

노드로 사용하기

Node Editor 에서 노드를 추가하면 Custom FX 카테고리에 직접 만든 이펙트가 나열됩니다. 노드의 표시 이름은 Fx Editor 에서 붙인 이펙트 이름입니다.

포트 구성은 내장 FxShader 노드와 같은 형태입니다.

포트	역할
In(FxIn)	체인의 입력
Enable	이펙트의 ON/OFF
Out(FxOut)	체인의 출력
파라미터별 입력	uniform 에서 생겨난 float/int/bool 행

내장 FxShader 노드와 같은 체인에 섞을 수 있습니다. FxIn / FxOut 을 줄줄이 이어서, 순서도 자유입니다. 체인을 구성하는 방법은 이펙트 사용법을 참조하세요.

노드의 중앙에는 프리뷰가 나옵니다. 테스트 이미지에 이펙트를 적용한 것으로, 약 15fps 로 갱신됩니다. FxShader 노드의 프리뷰 표시 토글과 공통이므로 한꺼번에 끌 수 있습니다.

Enable 을 OFF 로 하면 자신뿐만 아니라 체인 뒤쪽의 Fx 슬롯까지 통째로 무효가 됩니다. ‘자신만 그대로 통과’가 아니라, FxShader 노드와 같은 슬롯 단위의 의미론입니다.

같은 이름의 이펙트가 여러 개 있을 때는 표시 이름에 서브 폴더 이름이 붙습니다. 예: 직접만든/Glitch.srfx 와 받은것/Glitch.srfx 를 넣으면 Glitch 와 Glitch (받은것) 처럼 구별됩니다. 그래도 충돌하는 경우에는 끝에 일련번호가 붙습니다.

핫 리로드(작성하면서 고치기)

앱은 CustomFx 폴더를 감시하고 있으므로, 대부분의 경우 재시작 없이 반영됩니다.

한 일	일어나는 일
새 .srfx 를 넣는다	노드 목록에 추가됩니다(재시작 불필요)
이미 배치해 둔 노드의 번들을 덮어쓴다	약 0.4초 기다린 뒤, 그 자리에서 다시 컴파일합니다. 배선과 파라미터 값은 유지됩니다
.srfx 를 지운다	전개 캐시도 지워지고, 배치해 둔 노드는 그대로 통과 상태가 됩니다. 노드 목록에서 사라지는 것은 다음 실행 시입니다

파라미터의 구성(개수·이름)을 바꾼 경우에는 노드를 다시 배치하세요. 포트는 노드 하나당 한 번만 만들어지므로, 덮어쓰기 리로드에서는 기존 포트가 그대로 사용됩니다. 내용만 고친 경우(식 조정 등)에는 다시 배치할 필요가 없습니다.

저장된 파라미터 값은 ‘이름’으로 복원됩니다. uniform 의 나열 순서를 바꿔도, 값이 다른 파라미터로 옮겨가 버리는 일은 없습니다.

에러가 보이는 방식

불러오기나 컴파일에 실패한 노드는 영상을 그대로 통과시키면서 고장 났음을 표시합니다. 새까맣게 되지는 않습니다.

• 노드의 타이틀에 ⚠ 가 붙습니다
• 노드 안에 한 줄 요약이 나옵니다(예: shader compile failed)
• 그 행에 마우스를 올리면 컴파일러의 메시지 전문이 툴팁으로 나옵니다

고친 번들을 다시 저장하면 핫 리로드가 실행되어 ⚠ 가 사라집니다.

제약·주의점

Windows 는 Direct3D11 만 지원합니다. Direct3D12 에서는 불러오기가 명시적으로 거부되고, 노드는 ⚠ 가 붙은 통과 상태가 됩니다. Mac 은 Metal 로 동작합니다.

파라미터의 총량에는 상한이 있습니다. uniform 은 float 환산으로 32개분까지. 초과하면 불러올 때 거부됩니다.

프로젝트는 .srfx 의 위치를 절대 경로로 기억합니다. 다른 PC 나 드라이브 구성이 다른 환경에서 프로젝트를 열면, CustomFx 폴더의 위치가 다를 경우 이펙트를 찾지 못해 ⚠ 가 됩니다. 다만 저장된 파라미터 값과 배선은 그대로 남으므로, 같은 구성으로 .srfx 를 다시 넣으면 복구됩니다. 프로젝트를 다른 사람에게 건넬 때는 .srfx 도 함께 건네주세요.

관련

• 이펙트 사용법(FxShader) — FxIn / FxOut 체인 구성 방법
• VJ 소재를 불러오는 경로(Source Directory) 지정하기 — CustomFx 폴더의 부모를 바꾸기
• Shader(.hlsl) 파일 불러오기 — HLSL 을 직접 두는 기존 방식(별개 기능입니다)