Problem with shaders on iPad

[IcemarkUK]

I'm still waiting for confirmation of model of iPad, all I know right now is that it's Pad IOS 16.7.10

I've seen this before and I think it had something to do with premultiplied alphas. You can also see the problem on the tower which is using another shader, but the outline is struggling with its aliasing.

Here is the shader for the characters - it's performing a tint, fade, alpha

#version 310 es
precision highp float;
precision highp int;

layout(location = COLOR0) in vec4 v_color;
layout(location = TEXCOORD0) in vec2 v_texCoord;

layout(location = SV_Target0) out vec4 FragColor;

layout(binding = 0) uniform sampler2D u_tex0;

layout(std140) uniform fs_ub {
    vec4 p_colour;
    float p_alpha;
    float p_fade;
};

#ifndef saturate
#define saturate(v) clamp(v, 0.0, 1.0)
#endif

void main()
{
    vec4 c = texture(u_tex0, v_texCoord).rgba;
    vec4 n;
    vec4 b = vec4( 0.0, 0.0, 0.0, 0.0 ) ;
    
    vec3 fragRGB = c.rgb; // current color

    // convert to non-PMA
    fragRGB = saturate(fragRGB / c.a);
    
    if(c.a!=0.0)
    {
        b.a = 1.0 - (c.a*p_fade) ;
        b.r = (p_colour.r * b.a) ;
        b.g = (p_colour.g * b.a) ;
        b.b = (p_colour.b * b.a) ;
        
        n.r = b.r + (fragRGB.r*(c.a*p_fade)) ;
        n.g = b.g + (fragRGB.g*(c.a*p_fade)) ;
        n.b = b.b + (fragRGB.b*(c.a*p_fade)) ;
    }
    
    n.a = c.a * p_alpha;

    fragRGB = n.rgb * n.a; // Premultiply alpha
    
    FragColor = vec4(fragRGB.rgb, n.a);
}

This was my pre-axmol shader which the user didn't report the problem with.

uniform vec4 p_colour;
uniform float p_alpha  ;
uniform float p_fade  ;

#ifndef saturate
#define saturate(v) clamp(v, 0.0, 1.0)
#endif

void main()
{
    vec4 c = texture2D(u_texture, cc_FragTexCoord1).rgba;
    vec4 n;
    vec4 b = vec4( 0.0, 0.0, 0.0, 0.0 ) ;
    
    vec3 fragRGB = c.rgb; // current color

    // convert to non-PMA
    fragRGB = saturate(fragRGB / c.a);
    
    if(c.a!=0.0)
    {
        b.a = 1.0 - (c.a*p_fade) ;
        b.r = (p_colour.r * b.a) ;
        b.g = (p_colour.g * b.a) ;
        b.b = (p_colour.b * b.a) ;
        
        n.r = b.r + (fragRGB.r*(c.a*p_fade)) ;
        n.g = b.g + (fragRGB.g*(c.a*p_fade)) ;
        n.b = b.b + (fragRGB.b*(c.a*p_fade)) ;
    }
    
    n.a = c.a * p_alpha;

    fragRGB = n.rgb * n.a; // Premultiply alpha
    
    gl_FragColor = vec4(fragRGB.rgb, n.a);

}

[IcemarkUK]

Including the PNG of one of the characters for reference.

[rh101]

Are you able to show a screenshot of what the scene should look like?

[IcemarkUK]

As usual thanks. I'm downloading 16.4 as that's the nearest I can get... will test tomorrow now.

Also made the suggested change and at it doesn't break the working devices I have, so will get the user to sign up for TestFlight so I can test on their device.

[IcemarkUK]

Simulator didn't show the issue.
Have uploaded new version to TestFlight and am waiting for confirmation of fix for user.

[rh101]

Did you find out the model of the iPad?

[IcemarkUK]

OS: 16.7.10 (20H350)
iPad (5th generation) (Model A1822)

[IcemarkUK]

Issue resolved - thanks again for your help!

[rh101]

I'm not sure if this would have anything to do with the issue, but it looks like there may be a divide by zero, which leads to undefined behaviour:

    // convert to non-PMA
    fragRGB = saturate(fragRGB / c.a);
    
    if(c.a!=0.0)
    {
...

Moving that saturate call would fix it, but I'm not sure if it changes the behaviour of the shader, and if it does, then you would need to refactor the shader to get the correct output:

#version 310 es
precision highp float;
precision highp int;

layout(location = COLOR0) in vec4 v_color;
layout(location = TEXCOORD0) in vec2 v_texCoord;

layout(location = SV_Target0) out vec4 FragColor;

layout(binding = 0) uniform sampler2D u_tex0;

layout(std140) uniform fs_ub {
    vec4 p_colour;
    float p_alpha;
    float p_fade;
};

#ifndef saturate
#define saturate(v) clamp(v, 0.0, 1.0)
#endif

void main()
{
    vec4 c = texture(u_tex0, v_texCoord).rgba;
    vec4 n;
    vec4 b = vec4( 0.0, 0.0, 0.0, 0.0 ) ;
    
    vec3 fragRGB = c.rgb; // current color
    
    if(c.a!=0.0)
    {
        // convert to non-PMA
        fragRGB = saturate(fragRGB / c.a);

        b.a = 1.0 - (c.a*p_fade) ;
        b.r = (p_colour.r * b.a) ;
        b.g = (p_colour.g * b.a) ;
        b.b = (p_colour.b * b.a) ;
        
        n.r = b.r + (fragRGB.r*(c.a*p_fade)) ;
        n.g = b.g + (fragRGB.g*(c.a*p_fade)) ;
        n.b = b.b + (fragRGB.b*(c.a*p_fade)) ;
    }
    
    n.a = c.a * p_alpha;

    fragRGB = n.rgb * n.a; // Premultiply alpha
    
    FragColor = vec4(fragRGB.rgb, n.a);
}

[IcemarkUK]

So maybe old device gets the error and newer ones don't ??

Let me try the change here, and if it doesn't change the result I will see if I can get the user to download a test version.

[rh101]

So maybe old device gets the error and newer ones don't ??

Yes, with undefined behaviour, that does happen; it can appear to work correctly on certain devices and not others.