Jump to content

Invert Y Axis in shader


Recommended Posts

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 !

Link to comment
Share on other sites

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 by Louis-T
Fix typo
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...