1、UE4里使用HLSL。

最近再次捣鼓shader，我把https://www.shadertoy.com/这个网站上的shader应用到UE4里，在UE4里把HLSL写在custom material node，或者使用usf文件，在游戏模式下使用，这个方法可以参考官方提供的案例UE4ShaderPluginDemo-4.7，两个方法都是可行的，我这里演示下custom material node上的使用，这里我想说下，我觉得custom node局限的两个地方，一是几乎无法使用函数（我看到日本有人使用一种我无法理解的方法写function，http://monsho.blog63.fc2.com/blog-entry-194.html），第二是返回值类型只有给定的4种，当我想返回矩阵类型都没有。

下面是在custom node里的代码，来源于https://www.shadertoy.com/view/MdXSzS。这里分享一下我从GLSL转HLSL的小技巧，一个是使用预处理宏这样我就不需要去更改两种shader语法上的差异，另一个是*号，在HLSL需要使用mul函数替代。

#define vec2 float2
#define vec3 float3
#define vec4 float4
#define mat2 float2x2
#define mat3 float3x3
#define fract frac
#define mix lerp

vec2 uv = (fragCoord.xy / iResolution.xy) - .5;
	float t = iGlobalTime * .1 + ((.25 + .05 * sin(iGlobalTime * .1))/(length(uv.xy) + .07)) * 2.2;
	float si = sin(t);
	float co = cos(t);
	float2x2 ma = float2x2(co, si, -si, co);

	float v1, v2, v3;
	v1 = v2 = v3 = 0.0;
	
	float s = 0.0;
	for (int i = 0; i < 90; i++)
	{
		vec3 p = s * vec3(uv, 0.0);
		//p.xy *= ma;
		p.xy = mul(p.xy, ma);
		p += vec3(.22, .3, s - 1.5 - sin(iGlobalTime * .13) * .1);
		for (int i = 0; i < 8; i++)	p = abs(p) / dot(p,p) - 0.659;
		v1 += dot(p,p) * .0015 * (1.8 + sin(length(uv.xy * 13.0) + .5  - iGlobalTime * .2));
		v2 += dot(p,p) * .0013 * (1.5 + sin(length(uv.xy * 14.5) + 1.2 - iGlobalTime * .3));
		v3 += length(p.xy*10.) * .0003;
		s  += .035;
	}
	
	float len = length(uv);
	v1 *= smoothstep(.7, .0, len);
	v2 *= smoothstep(.5, .0, len);
	v3 *= smoothstep(.9, .0, len);
	
	vec3 col = vec3( v3 * (1.5 + sin(iGlobalTime * .2) * .4),
					(v1 + v3) * .3,
					 v2) + smoothstep(0.2, .0, len) * .85 + smoothstep(.0, .6, v3) * .3;

	vec4 fragColor = vec4(min(pow(abs(col), vec3(1.2,1.2,1.2)), 1.0), 1.0);
	return fragColor;

使用DirectX 11 Shader材质，这里可以加载Maya预设的一些shader看效果，我就是在官方提供的基础上修改的，这种shader的写法和底层图形接口使用的有些不一样，Maya有它的规则，主要是shader代码里暴露出来的供调节的参数有点特殊，但也挺好理解。

把下面的代码复制，保存到xxx.fx文件，就可以被DirectX 11 Shader加载了。

#include "Common10.fxh"

float gScale1 <
    string UIWidget = "slider";
    float UIMin = -1000;
    float UIMax = 1000;
    float UIStep = 0.01;
> = 1.0;
/
#define vec2 float2
#define vec3 float3
#define vec4 float4
#define mat2 float2x2
#define mat3 float3x3
#define fract frac
#define mix lerp

#define iResolution float2(1,1)
#define iGlobalTime gScale1

float4 star(float2 intputvalue)
{
// return float4(1,0,0,0);
#define fragCoord intputvalue

vec2 uv = (fragCoord.xy / iResolution.xy) - .5;
	float t = iGlobalTime * .1 + ((.25 + .05 * sin(iGlobalTime * .1))/(length(uv.xy) + .07)) * 2.2;
	float si = sin(t);
	float co = cos(t);
	float2x2 ma = float2x2(co, si, -si, co);

	float v1, v2, v3;
	v1 = v2 = v3 = 0.0;
	
	float s = 0.0;
	for (int i = 0; i < 90; i++)
	{
		vec3 p = s * vec3(uv, 0.0);
		//p.xy *= ma;
		p.xy = mul(p.xy, ma);
		p += vec3(.22, .3, s - 1.5 - sin(iGlobalTime * .13) * .1);
		for (int i = 0; i < 8; i++)	p = abs(p) / dot(p,p) - 0.659;
		v1 += dot(p,p) * .0015 * (1.8 + sin(length(uv.xy * 13.0) + .5  - iGlobalTime * .2));
		v2 += dot(p,p) * .0013 * (1.5 + sin(length(uv.xy * 14.5) + 1.2 - iGlobalTime * .3));
		v3 += length(p.xy*10.) * .0003;
		s  += .035;
	}
	
	float len = length(uv);
	v1 *= smoothstep(.7, .0, len);
	v2 *= smoothstep(.5, .0, len);
	v3 *= smoothstep(.9, .0, len);
	
	vec3 col = vec3( v3 * (1.5 + sin(iGlobalTime * .2) * .4),
					(v1 + v3) * .3,
					 v2) + smoothstep(0.2, .0, len) * .85 + smoothstep(.0, .6, v3) * .3;

	vec4 fragColor = vec4(min(pow(abs(col), vec3(1.2,1.2,1.2)), 1.0), 1.0);
	return fragColor;
}

// Pixel shader.
// NOTE: This expects screen quad vertex shader output.
float4 PS_Mandelbrot(VS_TO_PS_ScreenQuad IN) : SV_TARGET 
{
return star(IN.UV.xy);
}

// Main technique.
technique10 Main
{
    pass p0
    {
        SetVertexShader(CompileShader(vs_4_0, VS_ScreenQuad()));
        SetGeometryShader(NULL);
        SetPixelShader(CompileShader(ps_4_0, PS_Mandelbrot()));
    }
}

我再展示一个很好玩的效果

#include "Common10.fxh"

float gScale1 <
    string UIWidget = "slider";
    float UIMin = -1000;
    float UIMax = 1000;
    float UIStep = 0.01;
> = 1.0;
///
#define vec2 float2
#define vec3 float3
#define vec4 float4
#define mat2 float2x2
#define mat3 float3x3
#define fract frac
#define mix lerp

#define iResolution float2(1,1)
#define iGlobalTime gScale1
#define iMouse float2(1,1)

#define S(a, b, t) smoothstep(a, b, t)
#define B(a, b, blur, t) S(a-blur, a+blur, t)*S(b+blur, b-blur, t)
#define sat(x) clamp(x, 0., 1.)

float remap01(float a, float b, float t) {
	return sat((t-a)/(b-a));
}

float remap(float a, float b, float c, float d, float t) {
	return sat((t-a)/(b-a)) * (d-c) + c;
}

vec2 within(vec2 uv, vec4 rect) {
	return (uv-rect.xy)/(rect.zw-rect.xy);
}

vec4 Brow(vec2 uv, float smile) {
    float offs = mix(.2, 0., smile);
    uv.y += offs;
    
    float y = uv.y;
    uv.y += uv.x*mix(.5, .8, smile)-mix(.1, .3, smile);
    uv.x -= mix(.0, .1, smile);
    uv -= .5;
    
    vec4 col = vec4(0,0,0,0);
    
    float blur = .1;
    
   	float d1 = length(uv);
    float s1 = S(.45, .45-blur, d1);
    float d2 = length(uv-vec2(.1, -.2)*.7);
    float s2 = S(.5, .5-blur, d2);
    
    float browMask = sat(s1-s2);
    
    float colMask = remap01(.7, .8, y)*.75;
    colMask *= S(.6, .9, browMask);
    colMask *= smile;
    vec4 browCol = mix(vec4(.4, .2, .2, 1.), vec4(1., .75, .5, 1.), colMask); 
   
    uv.y += .15-offs*.5;
    blur += mix(.0, .1, smile);
    d1 = length(uv);
    s1 = S(.45, .45-blur, d1);
    d2 = length(uv-vec2(.1, -.2)*.7);
    s2 = S(.5, .5-blur, d2);
    float shadowMask = sat(s1-s2);
    
    col = mix(col, vec4(0.,0.,0.,1.), S(.0, 1., shadowMask)*.5);
    
    col = mix(col, browCol, S(.2, .4, browMask));
    
    return col;
}
vec4 Eye(vec2 uv, float side, vec2 m, float smile) {
    uv -= .5;
    uv.x *= side;
    
	float d = length(uv);
    vec4 irisCol = vec4(.3, .5, 1., 1.);
    vec4 col = mix(vec4(1.0,1.0,1.0,1.0), irisCol, S(.1, .7, d)*.5);		// gradient in eye-white
    col.a = S(.5, .48, d);									// eye mask
    
    col.rgb *= 1. - S(.45, .5, d)*.5*sat(-uv.y-uv.x*side); 	// eye shadow
    
    d = length(uv-m*.4);									// offset iris pos to look at mouse cursor
    col.rgb = mix(col.rgb, vec3(0.,0.,0.), S(.3, .28, d)); 		// iris outline
    
    irisCol.rgb *= 1. + S(.3, .05, d);						// iris lighter in center
    float irisMask = S(.28, .25, d);
    col.rgb = mix(col.rgb, irisCol.rgb, irisMask);			// blend in iris
    
    d = length(uv-m*.45);									// offset pupile to look at mouse cursor
    
    float pupilSize = mix(.4, .16, smile);
    float pupilMask = S(pupilSize, pupilSize*.85, d);
    pupilMask *= irisMask;
    col.rgb = mix(col.rgb, vec3(0.,0.,0.), pupilMask);		// blend in pupil
    
    float t = iGlobalTime*3.;
    vec2 offs = vec2(sin(t+uv.y*25.), sin(t+uv.x*25.));
    offs *= .01*(1.-smile);
    
    uv += offs;
    float highlight = S(.1, .09, length(uv-vec2(-.15, .15)));
    highlight += S(.07, .05, length(uv+vec2(-.08, .08)));
    col.rgb = mix(col.rgb, vec3(1.,1.,1.), highlight);			// blend in highlight
    
    return col;
}

vec4 Mouth(vec2 uv, float smile) {
    uv -= .5;
	vec4 col = vec4(.5, .18, .05, 1.);
    
    uv.y *= 1.5;
    uv.y -= uv.x*uv.x*2.*smile;
    
    uv.x *= mix(2.5, 1., smile);
    
    float d = length(uv);
    col.a = S(.5, .48, d);
    
    vec2 tUv = uv;
    tUv.y += (abs(uv.x)*.5+.1)*(1.-smile);
    float td = length(tUv-vec2(0., .6));
    
    vec3 toothCol = vec3(1.,1.,1.)*S(.6, .35, d);
    col.rgb = mix(col.rgb, toothCol, S(.4, .37, td));
    
    td = length(uv+vec2(0., .5));
    col.rgb = mix(col.rgb, vec3(1., .5, .5), S(.5, .2, td));
    return col;
}

vec4 Head(vec2 uv) {
	vec4 col = vec4(.9, .65, .1, 1.);
    
    float d = length(uv);
    
    col.a = S(.5, .49, d);
    
    float edgeShade = remap01(.35, .5, d);
    edgeShade *= edgeShade;
    col.rgb *= 1.-edgeShade*.5;
    
    col.rgb = mix(col.rgb, vec3(.6, .3, .1), S(.47, .48, d));
    
    float highlight = S(.41, .405, d);
    highlight *= remap(.41, -.1, .75, 0., uv.y);
    highlight *= S(.18, .19, length(uv-vec2(.21, .08)));
    col.rgb = mix(col.rgb, vec3(1.,1.,1.), highlight);
    
    d = length(uv-vec2(.25, -.2));
    float cheek = S(.2,.01, d)*.4;
    cheek *= S(.17, .16, d);
    col.rgb = mix(col.rgb, vec3(1., .1, .1), cheek);
    
    return col;
}

vec4 Smiley(vec2 uv, vec2 m, float smile) {
	vec4 col = vec4(0.,0.,0.,0.);
    
    if(length(uv)<.5) {					// only bother about pixels that are actually inside the head
        float side = sign(uv.x);
        uv.x = abs(uv.x);
        vec4 head = Head(uv);
        col = mix(col, head, head.a);

        if(length(uv-vec2(.2, .075))<.175) {
            vec4 eye = Eye(within(uv, vec4(.03, -.1, .37, .25)), side, m, smile);
            col = mix(col, eye, eye.a);
        }

        if(length(uv-vec2(.0, -.15))<.3) {
            vec4 mouth = Mouth(within(uv, vec4(-.3, -.43, .3, -.13)), smile);
            col = mix(col, mouth, mouth.a);
        }

        if(length(uv-vec2(.185, .325))<.18) {
            vec4 brow = Brow(within(uv, vec4(.03, .2, .4, .45)), smile);
            col = mix(col, brow, brow.a);
        }
    }
    
    return col;
}

float4 mainImage(vec2 fragCoord )
{
	float t = iGlobalTime;
    
    vec2 uv = fragCoord.xy / iResolution.xy;
    uv -= .5;
    uv.x *= iResolution.x/iResolution.y;
    
    vec2 m = iMouse.xy / iResolution.xy;
    m -= .5;
    
    if(m.x<-.49 && m.y<-.49) {			// make it that he looks around when the mouse hasn't been used
    	float s = sin(t*.5);
        float c = cos(t*.38);
        
        m = vec2(s, c)*.4;
    }
    
    if(length(m) > .707) m *= 0.;		// fix bug when coming back from fullscreen
    
    float d = dot(uv, uv);
    uv -= m*sat(.23-d);
    
    float smile = sin(t*.5)*.5+.5;
	float4 fragColor = Smiley(uv, m, smile);
	return fragColor;
}

// Pixel shader.
// NOTE: This expects screen quad vertex shader output.
float4 PS_Mandelbrot(VS_TO_PS_ScreenQuad IN) : SV_TARGET 
{
return mainImage(IN.UV.xy);
}

// Main technique.
technique10 Main
{
    pass p0
    {
        SetVertexShader(CompileShader(vs_4_0, VS_ScreenQuad()));
        SetGeometryShader(NULL);
        SetPixelShader(CompileShader(ps_4_0, PS_Mandelbrot()));
    }
}