Cyanilux

Game Dev Blog & Tutorials

Polar Coordinates

Shader Graph

When using UVs you are usually using the Cartesian coordinate system, or something similar to it at least. Pixels along the X or U axis start at 0 and increase to 1 horizontally, and the same goes for the Y or V axis but vertically. We can then offset (Add or Subtract) and scale (Multiply or Divide) these UVs to manipulate how a texture is sampled.

We can use the Polar Coordinates node to convert these Cartesian coordinates into a Polar coordinate system.

In the Polar Coordinates system each point is defined by a distance from a reference point, and an angle from a reference direction. In Shader Graph this reference point is the Center input on the node, and the reference direction is always downwards, which can been seen on the preview of the node where the green gradient stops.

If you are interested in the maths used to convert between these spaces, this is the generated code for the node:

1
2
3
4
5
6
7
void Unity_PolarCoordinates_float(float2 UV, float2 Center, 
		float RadialScale, float LengthScale, out float2 Out) {
    float2 delta = UV - Center;
    float radius = length(delta) * 2 * RadialScale;
    float angle = atan2(delta.x, delta.y) * 1.0/6.28 * LengthScale;
    Out = float2(radius, angle);
}

If we put the output of the Polar Coordinates node into a Split node, the R output will give us the distance from the Center.

The G output will give us the angle from the downwards direction.

Example

One thing that we can do with these new coordinates is use them as new UVs to sample textures. Here I’m using a Sample Texture 2D node to sample a noise texture. Rather than it being flat (like in the other node) it’s become warped around the center point. Note that the texture used here is seamless so it repeats without any noticeable seams. (Note, if you are using a seamless texture but are getting flickering seams – turn off Mip Maps for the texture, or use the Sample Texture 2D LOD node set to 0).

This is great for a portal/wormhole or whirlpool effect. And we can also animate it by using a Time node and offsetting the values using Add or Subtract nodes! If you are trying to learn Shader Graph, this might be a good exercise to attempt.

You can learn more about Polar Coordinates in the following breakdowns :



Thanks for reading! If you have any comments, questions or suggestions you can drop me a tweet or join my discord. If this post helped, consider sharing a link with others!

~ Cyan


License / Usage Cookies & Privacy