Different output compared to the Shadertoy website

[nkaretnikov]

The output of this code is different between the website and extension:

vec4 Circle(vec2 uv, vec2 pos, float radius, float blur) {
    vec4 col = vec4(.9, .65, .1, 1.);

    float dist = length(uv - pos);
    col.a = smoothstep(radius, radius - blur, dist);

    return col;
}

void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
    // Move (0, 0) to the center of the screen.
    vec2 uv = fragCoord.xy / iResolution.xy;
    uv -= .5;
    uv.x *= iResolution.x / iResolution.y;  

    // Draw the image.
    vec4 col = vec4(0.);
    
    vec4 circleTop = Circle(uv, vec2(0.,  .1), .2, .01);
    vec4 circleBot = Circle(uv, vec2(0., -.1), .2, .01);

    col = mix(col, circleTop, circleTop.a);
    col = mix(col, circleBot, circleBot.a);

    // Return the color of this pixel.
    fragColor = col;
}

Website:

Extension:

[Malacath-92]

We blend the shader output into the webview that's opened, so the output alpha matters. What's happening here is that the alpha on the border between the two cirlces ends up being smaller than 1.0 thus the output will be blended. You have to fix this on your end, for example by adjusting your code like this

// Initialize to a background color
vec4 col = vec4(0,0,0,1);
// ...
// Mix only the color components, leave alpha untouched
col.rgb = mix(col.rgb, circleTop.rgb, circleTop.a);
col.rgb = mix(col.rgb, circleBot.rgb, circleBot.a);

[Malacath-92]

Closing this since this is not an issue with the extension.