Circular vignette: How to get screen position normalized by screen width in Shader Graph?

Hey,
I am trying to do a fullscreen shader which uses a vignette as a mask on the alpha channel. I would like the vignette to be circular and not elliptic.
a

To achieve this in Shader Graph, I am trying to get the screen position in pixel and divide it by the screen width. According to the Screen Position doc, I would expect this to give a normalized vector with (0, 0) at lower left corner and (1, h/w) at top right corner (where h is the height in pixels and w the width). Graph + result below:


In this graph, it seems to me that everything works as expected in the preview nodes (see Shader Graph tab). But once in game view, everything is white (see Game view tab).

As a matter of comparison, below is a similar graph but using the already normalized (and centered) position, which - as expected - gives an elliptic vignette (since normalization si done wrt height in vertical axis and not width).

Why is the output of the 1st graph completely white?
Is there something I’m missing somewhere?

Also, maybe this is a hint: as said earlier, my expectations for the 1st graph would be (0, 0) value at lower left corner and in the preview node one can see that it is actually in the upper left corner, which seems to contradict the doc?

Thanks for your help!

Hi,

The Screen Node provides the screen’s width and height.
From there you can build a ratio and do the required math.

Hope this helps.

1 Like

Hi, thanks for your answer!

I use the screen node’s width (which unit is in pixels, right?) to divide the screen position in pixel mode (see 1st graph).

In the preview nodes, it seems to correctly normalize everything. But once in game view, the result changes and everything is white. Any thought?

I managed to make it work by not relying on the Screen Position node in pixel mode but rather in center mode. See graph below:

This solution scales the normalized height by multiplying it by the screen height (in pixel units) and then re-normalize it by dividing by the width (in pixels as well).

If I understood well, by doing this first scaling (before dividing by the width), I re-created the output of the Screen Position node in pixel mode. So this is an additional step. But since it does not work in the 1st solution I presented I guess there is something I got wrong.

Anyways this works. If you have any insights about why the 1st solution does not work I’m still interested though.

1 Like