Elliptical texture coordinates?

Development Rendering
1

Hi,

I’d like to use elliptical texture coordinates for a HUD effect without using textures so that the aspect ratio of the ellipse / circle can adjust dynamically with the screen aspect ratio.

What I need are two elliptical gradients (U tex coord and V tex coord) like in the two attached animations below.

The white border represents the scale of the texture / size of the screen. As you can see in the two animations, the thickness of the ellipse dynamically adjusts as the aspect ratio changes to prevent the ellipse from squashing / stretching. I thought about using two elliptical textures but they will be squashed / stretched when the aspect ratio changes and so I’d like to solve the problem with some shader magic.

Is this possible and how would you do this? Seems like a non trivial problem and I’m thankful vor any tip :slight_smile:

Best regards,
Daniel

2

an ellipse is a bit complicated because you would have to shift the fulcrum of 2 circles make a connection portion that automatically adjusts as well.

You can try this. Make the texture in R/G channels with a 1px line for outer/inner

Multiply R by scalar1, multiply G by scalar1, - re-multiply the 2 by different scalars to control. Subtract R from G (or foreground from background).
Now if you change scalar1 it should automatically expand/contract the circle.

Now you just have to figure out how much stretch on the texture and increment or decrease the multiplier in the same ratio to maintain the same width.

Not the best solution, but it should work.