Shader(.hlsl) 파일 불러오기

앞으로 이펙트를 직접 만든다면, Fx Editor(.srfx)를 사용해 주세요. 브라우저에서 GLSL을 작성해 .srfx 를 내보내면, Windows·Mac 양쪽에서 동작하는 이펙트 노드가 됩니다. 이 페이지에서 설명하는 .hlsl 직접 배치는, 그보다 이전부터 있는 별개의 구조입니다.

.hlsl 파일은 영상 소재의 하나로 취급됩니다. 노드가 아니라, 동영상이나 이미지와 마찬가지로 MediaBrowser에 나열되고, 레이어에 놓아서 재생합니다.

두 가지 구조의 차이

	.hlsl(이 페이지)	.srfx(Fx Editor)
무엇이 되는가	레이어에서 재생하는 소재	이펙트 노드(영상을 받아서 가공한다)
작성하는 언어	HLSL	GLSL(Shadertoy 방언)
동작하는 OS	Windows만	Windows / Mac
두는 위치	Source/Shader	CustomFx
파라미터	늘릴 수 없다	uniform 을 쓰면 노드의 포트가 된다

.hlsl 은 Windows 판에서만 동작합니다. 실행 중에 HLSL을 컴파일하는 구조가 Windows 전용이기 때문에, macOS 판에서는 .hlsl 소재를 재생할 수 없습니다.

두는 위치

<Source Directory>/SainaWorks/SynapseRack/Source/Shader/<任意のフォルダ名>/○○.hlsl

Windows의 기본값은 C:/SainaWorks/SynapseRack/Source/Shader/ 입니다. 상위 폴더의 위치는 VJ 소재를 불러올 경로(Source Directory) 지정하기 에서 바꿀 수 있습니다.

폴더를 하나 끼워 주세요. Source/Shader/○○.hlsl 처럼 바로 아래에 둔 파일은 대상 외입니다. Source/Shader/MyShaders/○○.hlsl 처럼, 반드시 폴더 안에 넣습니다. 끼운 폴더 안은 더 중첩해도 상관없습니다.

새로운 .hlsl 을 가져오는 수단은, 현행 버전에는 준비되어 있지 않습니다. 예전에 메뉴에 있던 일괄 불러오기(Source → Load Source Files)는 없어졌고, MediaBrowser로의 드래그 앤 드롭도 .hlsl 에 대해서는 가져올 수 없습니다. 이전 버전에서 이미 가져온 .hlsl 은, 그대로 MediaBrowser에 남아서 재생할 수 있습니다. 새로 작성한다면 .srfx 를 사용해 주세요.

작성법

파일의 내용은 프래그먼트 셰이더 함수 하나입니다. 전체를 감싸는 셰이더 선언은 작성하지 않습니다.

cbuffer Params : register(b0)
{
    float2 resolution;   // 描画先の幅・高さ（ピクセル）
    float  time;         // アプリ起動からの経過秒
    float  globalBPM;    // Global Tempo のBPM
    float  param0;
    float  param1;
    float  param2;
    float  param3;
};

float4 Frag(VsOutput input) : SV_TARGET
{
    float2 uv = input.uv;
    float  v  = sin(uv.x * 20.0 + time * 3.0) * 0.5 + 0.5;
    return float4(v, uv.y, 1.0 - v, 1.0);
}

규칙

항목	내용
함수 이름	Frag, 반환값 float4, 시맨틱 SV_TARGET
인수의 타입	VsOutput(직접 정의하지 않습니다. pos(SV_POSITION)와 uv(TEXCOORD0)를 가집니다)
UV	input.uv 가 0〜1
상수 버퍼	register(b0) 에 위 표의 순서로 전달됩니다. 순서를 바꾸면 값이 어긋납니다
#include	StreamingAssets 폴더를 기준으로 전개됩니다

param0〜param3 은 예약된 자리입니다. 현행 UI에는 이 4개를 조작하는 곳이 없습니다. 순서를 맞추기 위해 선언은 해 두세요.

입력 텍스처는 없습니다. .hlsl 소재는 ‘스스로 그림을 만드는’ 쪽입니다. 영상을 받아서 가공하고 싶은 경우에는 Fx Editor(.srfx) 의 이펙트 노드를 사용해 주세요.

컴파일에 실패했을 때

화면이 마젠타(핑크) 단색이 됩니다. 새까맣지 않고 마젠타라면, 셰이더의 문법 에러입니다.

사용하기

MediaBrowser에, 동영상이나 이미지와 같은 썸네일이 붙은 클립으로 나열됩니다. 레이어로 드래그하거나, 레이어를 선택하고 클릭하면 재생이 시작됩니다.

resolution 에는 그 레이어의 해상도가 들어가므로, 출력 해상도를 바꾸면 셰이더 쪽의 그리는 크기도 따라갑니다. globalBPM 에는 Global Tempo의 값이 그대로 들어가므로, 박에 동기화된 움직임을 작성할 수 있습니다.

관련

• Fx Editor(커스텀 이펙트 .srfx) — 현재의 권장 경로. 양 OS에서 동작하는 이펙트 노드를 직접 만든다
• VJ 소재를 불러올 경로(Source Directory) 지정하기 — Source/Shader 의 상위 폴더를 바꾼다
• 영상·이미지 파일 불러오기 — 동영상·이미지 소재 가져오기
• Global Tempo — globalBPM 에 들어가는 값