unity3d - 自定义着色器不适用于 Android

Question

我从 Shadertoy 移植了一个等 ionic 球着色器到 Unity 作为附加到相机的图像效果。它在编辑器和 Windows 独立构建上运行良好。它不适用于 Android 设备。 它在 Android 上闪烁蓝色和黑色图像。

这是它在 Unity Editor 和 Windows Build 中的样子:

这是它在 Android 上的样子:

移植的Shader代码:

Shader "Hidden/Plasma Space Ball Image Effect"
{
    Properties
    {
        iChannel0("iChannel0", 2D) = "white" {}
    //[MaterialToggle] _isToggled("isToggle", Float) = 0
    }
        SubShader
    {
        // No culling or depth
        Cull Off ZWrite Off ZTest Always

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            v2f vert(appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            sampler2D iChannel0;

            //Ported from https://www.shadertoy.com/view/MstXzf

            float3 hb(float2 pos, float t, float time, float2 rot, float size, sampler2D tex0)
            {
                float2 newUv = 0.2*(pos / (1.2 - t) + 0.5*time*rot);
                //float texSample = texture(tex0, newUv).b;
                float texSample = tex2D(tex0, newUv).b;
                float uOff = 0.2*(texSample + 0.3*time);     //lsf3RH
                float2 starUV = newUv + float2(uOff, 0.0);
                //return float3(0.3, 0.3, 1.0) + 1.3*texture(tex0, starUV).b;
                return float3(0.3, 0.3, 1.0) + 1.3*tex2D(tex0, starUV).b;
            }

            float4 blob(float2 uv, float size, float time, sampler2D tex0)
            {
                float2 center = float2(0., 0.);

                float2 pos = center - uv;
                float t = length(pos);
                float st = size - t;

                float2 rot = 0.005*float2(sin(time / 16.), sin(time / 12.)); //MslGWN

                float alpha = smoothstep(0.0, 0.2*size, st);

                float3 col = hb(pos, t, time, rot, size, tex0);
                float a1 = smoothstep(-1.4, -1.0, -col.b);
                col = lerp(col, hb(pos, t, -time, -rot, size, tex0), a1);

                col += 0.8*exp(-12.*abs(t - 0.8*size) / size);
                float a2 = smoothstep(-1.4, -1.0, -col.b);

                alpha -= a2;

                //float crosshair = float((abs(pos.x) < 0.005 && abs(pos.y) < 0.15) || (abs(pos.y) < 0.005&&abs(pos.x) < 0.15));
                //return float4(col, alpha) + crosshair;

                return float4(col, alpha);
            }

            float4 main_(float2 uv, float size)
            {
                return blob(uv, size, _Time.y, iChannel0);
            }


            fixed4 frag(v2f i) : SV_Target
            {
                float4 fragColor = 0;
                float2 fragCoord = i.vertex.xy;

                ///---------------------------------------------------

                float2 uv = fragCoord.xy / _ScreenParams.xy;
                float2 cr = uv*2. - 1.;
                cr.x *= _ScreenParams.x / _ScreenParams.y;

                //late addition to elaborate background motion, could be reused later on
                float2 rot = 0.5*float2(sin(_Time.y / 16.), sin(_Time.y / 12.));

                float4 ball = clamp(main_(cr, sin(_Time.y)*0.05 + 0.5 + 0.5), 0., 1.);
                //float3 bg = float3(0.7, 0.7, 1.0)*texture(iChannel0, uv + rot + 0.1*ball.rb).b;
                float3 bg = float3(0.7, 0.7, 1.0)*tex2D(iChannel0, uv + rot + 0.1*ball.rb).b;

                //simulated gl blend
                fragColor = float4(lerp(bg, ball.rgb, ball.a), 1.0);
                //fragColor = lerp(fragColor,tex2D(iChannel0, i.uv).rgba,.5);
                return fragColor;
            }
            ENDCG
        }
    }
}

---

您可以找到用于iChannel0 输入槽的图像here在上面的着色器中。

我尝试过的事情:

• 将着色器添加到图形设置，以便 Unity 包含它在构建过程中。
• 禁用 Auto Graphics API 并尝试 OpenGLES2 和 OpenGLES3。
• 使用 Android Studio 检查日志。完全没有错误/警告。

这些都没有解决问题，我没有什么可以尝试的了。

软件和设备信息(如果有帮助):

• 统一 5.6.0f3
• 安卓4.4.2

这用于学习和教育目的，因为我正在学习 GLSL、HLSL、CG/shaderlab 着色器语言。我只想知道为什么移植的着色器无法在 Android 设备上按预期工作。

为什么在 Android 上闪烁蓝色和黑色图像？

Answer 1

您需要为 OpenGLES2 的片段着色器中的位置使用 VPOS 语义。
来自 Unity docs :

A fragment shader can receive position of the pixel being rendered as a special VPOS semantic. This feature only exists starting with shader model 3.0, so the shader needs to have the #pragma target 3.0 compilation directive.

所以要获得屏幕空间位置:

// note: no SV_POSITION in this struct
struct v2f {
    float2 uv : TEXCOORD0;
};

v2f vert (
    float4 vertex : POSITION, // vertex position input
    float2 uv : TEXCOORD0, // texture coordinate input
    out float4 outpos : SV_POSITION // clip space position output
    )
{
    v2f o;
    o.uv = uv;
    outpos = UnityObjectToClipPos(vertex);
    return o;
}

fixed4 frag (v2f i, UNITY_VPOS_TYPE screenPos : VPOS) : SV_Target
{
    // screenPos.xy will contain pixel integer coordinates.
    float4 fragColor = 0;
    float2 fragCoord = screenPos;

但是您已经传入了 uv，所以也许您可以使用它们？

float2 uv = i.uv;

---

事实证明我错了。你在 OpenGLES2 的片段着色器中没有得到剪辑空间位置你得到.. 0。(也许有人可以解释这个？)

我做了一个小测试着色器:

CGPROGRAM
#pragma vertex vert
#pragma fragment frag

float4 vert (float4 vertex : POSITION) : SV_Position
{                   
    return UnityObjectToClipPos(vertex);                
}

fixed4 frag (float4 screenPos : SV_Position) : SV_Target
{   
    float uvx = screenPos.x/_ScreenParams.x;
    return float4(uvx, 0., 0., 1.);
}
ENDCG

float uvx = screenPos.x/_ScreenParams.x; 行被编译为
tmpvar_2.x = (0.0/_ScreenParams.x);//OpenGLES2
u_xlat0 = gl_FragCoord.x/_ScreenParams.x;//OpenGLES3

但是如果你使用VPOS语义
fixed4 frag (float4 screenPos : VPOS) : SV_Target 同一行被编译为
tmpvar_2.x = (gl_FragCoord.x/_ScreenParams.x);//OpenGLES2
u_xlat0 = gl_FragCoord.x/_ScreenParams.x;//OpenGLES3

因此，对于 OpenGLES2，您似乎需要使用 VPOS 语义来获取片段着色器中屏幕空间中的位置。