How Can I Add A Uniform Width Outline To Webgl Shader Drawn Circles/ellipses (drawn Using Edge/distance Antialiasing)

I am drawing circles/ellipses in WebGL using a single Quad and a fragment shader, in order to draw them in a resolution independent manner (Edge distance anti-aliasing) Here is my

Solution 1:

The problem is, your fragment shader (FS) is kind of blackbox now (becausethe the code is lack of information).

Your FS is written to work within square space. So it always render circle in space where x and y are same size ( -1.0; 1.0 interval).

While quad is transformed outside (in VS or anywhere else) and there is no way how to reflect that transformation in FS yet.

To solve the problem, I suggest to push an additional information into FS about the scaling. Something like Shadertoy provides in shader inputs:

uniform vec3 iResolution; // viewport resolution (in pixels)

except this wont be the resolution of the screen size, but the information about quad transformation, so something like:

varying vec2 trans;
// where value (1.0, 1.0) mean no transformation

Then you can use this value to calculate different stroke. Instead of inverting the transformation for the current stroke, I would rather calculate unique dx and dy values for it.

There are more ways to achieve the working solution and it depends on how do you want to use it later (what kinds of transformations should be possible etc.). So I present only the basic but the easiest solution.