I've been learning the Screen Position node by building a set of small experiments around it. The goal is to understand how it works while exploring the possibilities of what screen space effects can create.
I'm keeping the experiments in a single project and will be expanding it as new ideas show up. The project files are on Github for anyone interested.
https://github.com/RohitKotiveetil/UnrealEngine--ScreenPositionExperiments
The Screen Position node provides the current pixel's position on the screen as a normalized coordinate. It acts like a 2D grid that always matches the viewport, so the same material logic works consistently regardless of what's happening in the world.
A vignette is a value that gets stronger toward the edges and weaker toward the center. In screen space, we start from Screen Position, shift it so the center becomes zero, then measure distance outward.
To create this in a material, the Screen Position node is passed through a Mask R,G to isolate the viewport coordinates. We then subtract 0.5 from both components to recenter it so the middle of the screen becomes (0, 0).
Taking the length of that result gives a radial gradient where the values are small at the center and larger at the corners.
The gradient is then multiplied to adjust how far the vignette extends from the center, and fed through a smoothstep to control where the fade begins and how soft the transition is.
Since we're driving the vignette effect through a UMG image widget, the material domain is set to User Interface and the blend mode is set to TranslucentGreyTransmittance.
Finally, we assign this material to the image widget in our gameplay HUD to create our vignette effect.
Comments
Post a Comment