Invert Y Axis in shader

[Louis-T]

Hi !

I've been playing with shaders and I wanted to know if there was a simple and efficient way to invert the y-axis (to make it similar to what I'm used to), it would greatly simplify the way I interact with the shader (via uniforms).

I've previously been using Filter and the conversion function below was doing it.

vTextureCoord * inputSize.xy + outputFrame.xy // screen pixel(css) coord

 

Maybe there is a way to replicate this in a Mesh + Shader ?

Here you will find a simple example of this with the mouse (which become inverted) : https://www.pixiplayground.com/#/edit/Xpz6WneKhHV4mozWaKv_n

 

Thanks a lot !

[ivan.popelyshev]

If you create rectangle mesh, you can specify UV's that are reversed by Y and use those UV's in fragment shader instead of gl_FragCoord.xy

[Louis-T]

Alright thanks a lot !
I managed to get it ?

Do you think it's better to invert the yAxis in the vertex (via addAttribute + varying vec2), or in the fragment (tweaking gl_FragCoord directly) ?

In the vertex : https://www.pixiplayground.com/#/edit/CeI2GcGYA5otDG4rppQi0
(It's worth noting that I didn't manage to invert the Y axis just by inverting the aUvs attribute array, I still had to invert in the vertex).

In the fragment : https://www.pixiplayground.com/#/edit/dzWAdLwl9wL7Gq26T72dS

 

Modifying it in the fragment seem more straightforward but maybe there is something I'm missing ?

 

Thanks again for your time

 

Edited June 15, 2020 by Louis-T
Fix typo