将ShaderToy转换为片段着色器

Question

我在ShaderToy上遇到了几个着色器,我没有成功将它们转换成可以在移动设备上使用的格式,例如.fsh.

我有这个 Shader,我希望能够在移动设备上使用它.

我知道我需要修改iXXXX变量并将mainImage更改为main().

有谁知道我怎么做到这一点？我无法找到任何有关如何执行此操作的资源,也从未遇到过.

float noise(vec2 p)
{
    float sample = texture2D(iChannel1,vec2(1.,2.*cos(iGlobalTime))*iGlobalTime*8. + p*1.).x;
    sample *= sample;
    return sample;
}

float onOff(float a, float b, float c)
{
    return step(c, sin(iGlobalTime + a*cos(iGlobalTime*b)));
}

float ramp(float y, float start, float end)
{
    float inside = step(start,y) - step(end,y);
    float fact = (y-start)/(end-start)*inside;
    return (1.-fact) * inside;

}

float stripes(vec2 uv)
{

    float noi = noise(uv*vec2(0.5,1.) + vec2(1.,3.));
    return ramp(mod(uv.y*4. + iGlobalTime/2.+sin(iGlobalTime + sin(iGlobalTime*0.63)),1.),0.5,0.6)*noi;
}

vec3 getVideo(vec2 uv)
{
    vec2 look = uv;
    float window = 1./(1.+20.*(look.y-mod(iGlobalTime/4.,1.))*(look.y-mod(iGlobalTime/4.,1.)));
    look.x = look.x + sin(look.y*10. + iGlobalTime)/50.*onOff(4.,4.,.3)*(1.+cos(iGlobalTime*80.))*window;
    float vShift = 0.4*onOff(2.,3.,.9)*(sin(iGlobalTime)*sin(iGlobalTime*20.) + 
                                         (0.5 + 0.1*sin(iGlobalTime*200.)*cos(iGlobalTime)));
    look.y = mod(look.y + vShift, 1.);
    vec3 video = vec3(texture2D(iChannel0,look));
    return video;
}

vec2 screenDistort(vec2 uv)
{
    uv -= vec2(.5,.5);
    uv = uv*1.2*(1./1.2+2.*uv.x*uv.x*uv.y*uv.y);
    uv += vec2(.5,.5);
    return uv;
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord.xy / iResolution.xy;
    uv = screenDistort(uv);
    vec3 video = getVideo(uv);
    float vigAmt = 3.+.3*sin(iGlobalTime + 5.*cos(iGlobalTime*5.));
    float vignette = (1.-vigAmt*(uv.y-.5)*(uv.y-.5))*(1.-vigAmt*(uv.x-.5)*(uv.x-.5));

    video += stripes(uv);
    video += noise(uv*2.)/2.;
    video *= vignette;
    video *= (12.+mod(uv.y*30.+iGlobalTime,1.))/13.;

    fragColor = vec4(video,1.0);
}

Answer 1

我已经main()在答案的底部编写并包含了 ShaderToys 变量的 Sprite 等效变量。

设置

要将着色器应用于您的节点，您需要告诉 SpriteKit 将着色器附加到.fsh文件中的 SKSpriteNode 。

1. 创建.fsh以着色器代码结尾的空文本文件。

调酒

着色器1.fsh

void main() {

vec4 val = texture2D(_texture, v_tex_coord);
vec4 grad = texture2D(u_gradient, v_tex_coord);

if (val.a < 0.1 && grad.r < 1.0 && grad.a > 0.8) {
vec2 uv = gl_FragCoord.xy / u_sprite_size.xy;
uv = screenDistort(uv);
vec3 video = getVideo(uv);
float vigAmt = 3.+.3*sin(u_time + 5.*cos(u_time*5.));
float vignette = (1.-vigAmt*(uv.y-5)*(uv.y-5.))*(1.-vigAmt*(uv.x-.5)*(uv.x-.5));

video += stripes(uv);
video += noise(uv*2.)/2.;
video *= vignette;
video *= (12.+mod(uv.y*30.+u_time,1.))/13.;

gl_FragColor = vec4(video,1.0);

} else {
 gl_FragColor = val;
}

} // end of main()

2. 接下来，在 SpriteKit 中附加着色器。

shader1.swift

let sprite = self.childNodeWithName("targetSprite") as! SKSpriteNode
let shader = SKShader(fileNamed: "shader1.fsh")
sprite.shader = shader

解释

• 着色器将每个像素变成效果的颜色 (screenDistort(uv))。
• main() 是入口点。
• gl_FragColor 是回报。
• 对于图像的每个像素，都会执行此代码。
• 当代码执行时，它告诉每个像素颜色应该是效果的颜色。vec4() 调用具有 ar,g,b,a 值。

ShaderToys 变量名 -> SpriteKit 变量名

iGlobalTime -> u_time

iResolution -> u_sprite_size

fragCoord.xy -> gl_FragCoord.xy

iChannelX -> SKUniform with name of “iChannelX” containing SKTexture

fragColor -> gl_FragColor

由于您拥有 Sprite 等效变量，您现在可以轻松地转换上面的这些剩余方法main()。

float noise {}

float onOff {}

float ramp {}

float stripes {}

vec3 getVideo {}

vec2 screenDistort {}

理论

问：为什么main()包含texture2D和u_gradient, v_tex_coord？

A. SpriteKit 使用纹理和 uv 坐标。

紫外线映射

UV 映射是将 2D 图像投影到 3D 模型表面以进行纹理映射的 3D 建模过程。

紫外线坐标

纹理网格时，您需要一种方法来告诉 OpenGL 图像的哪个部分必须用于每个三角形。这是通过 UV 坐标完成的。每个顶点可以在其位置之上有几个浮点数，U 和 V。这些坐标用于访问和扭曲纹理。

SKShader 类参考

适用于 iOS 的 OpenGL ES

着色器的最佳实践

WWDC Session 606 - SpriteKit 的新功能 - 着色器、打火机、阴影