Filters in retina display have wrong UV

I’m using pixi 5.1.1

Writting a simple vignette shader I can see that the build in varyings representing the UV’s are wrong on the .y component.

If my display is non retina or if it is retina but I initialise the Application with resolution = 1 The shader is as expected. if I’m on a retina display then the .y needs to be divided by 2

const noRetina = true; // manually change the resolution on a retina display (on/off)
const opts = {
    width: 1920,
    height: 1080,
    resolution: noRetina ? 1 : global.devicePixelRatio,
    autoDensity: !noRetina,
    backgroundColor: 0x000000,
    antialias: false,
    view,
};

const app = new Application(opts);

Fragment shader

precision mediump float;

varying vec2 vTextureCoord;
uniform sampler2D uSampler;

uniform float size;
uniform float amount;

void main() {
    vec3 color = texture2D(uSampler, vTextureCoord).rgb;
                
    float dist = distance(vTextureCoord, vec2(0.5, 0.5));
    color *= smoothstep(0.8, size * 0.799, dist * (1.0 * amount + size));

    gl_FragColor = vec4(color, 1.0);
                
}

[ivanpopelyshev]

Wait, I remember one more cool thing!

If you need something a vignette , that just “masks” container inside , you can just draw a mesh on top, without filters . Mesh is easier to make and it wont require extra framebuffer: https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js

[andrevenancio]

Hi @ivanpopelyshev thanks for your reply.

Let’s do this by parts, I don’t want to extend this issue longer than it needs be.

The screenshots above were taken with the exact same screen with the exact same width and height, only the resolution and autoDensity properties changed.

Assuming I was creating a 1920px x 1080px canvas with resolution=1 and autoDensity=false everything seems to be “on scale”. The vignette gets “distorted” as its mapping the corners of the screen. So far, so good.

If I then changed resolution=2 and autoDensity=true I would have a canvas with 3840px x 2160px that was scaled down via css to 1920px x 1080px. Shouldn’t I have the same looking vignette? What I have now is a perfect circle, not a distorted one. So its either the autoDensity or the resolution enabling such difference no?

Another thing is - do you really need filter?

I think I do, the effect above is just so I can illustrate that the UV coordinates I’m getting aren’t the ones I’m expecting. The effect I want to achieve is a mix of what’s on the stage, and some post processing going on top. So I do need an input texture of what’s on the screen (uniform sampler2D uSampler;). I just covered it red so I’m not sharing clients confidential work 😃

For example, applying a filter to the stage, if the content gets drawn into a framebuffer and then used as a texture via uniform sampler2D uSampler; shouldn’t I be able to properly see the UV’s mapping the corners of the canvas element by doing something like: gl_FragColor = vec4(vTextureCoord, 1.0, 1.0); ?

I do appreciate you took the time to explain a little bit about conversion functions, but reading that article Its not quite clear (for me) what varying to use and when to “convert them”. I would be expecting something like what we can do in ShaderToy vec2 uv = fragCoord / iResolution.xy; to map with the corners of my canvas element and It seems like vTextureCoord only does this if autoDensity=false and resolution=1 (first screenshot).

I’m happy to accept that I’m missing something, and all the information in in that article, but maybe just use this thread as a constructive criticism that the article might not be as clear as it could be.