WebGL alpha depending on distance from origin

Question

I have the following setup:

The plane grid consists of lines, with brighter dots where lines intersect. I would like to introduce an alpha gradient on the entire scene, with the current alpha (0.2) at the very centre, linearly fading to 0.0 at the edges. The only examples I can find online end up doing nothing but changing the background to a random colour depending on the near/far values.

I'm looking for something like this: https://i.sstatic.net/92LEU.png

How can I achieve this? Here are the grid shaders:

vertex:

precision mediump float;

attribute vec4 position;
attribute vec2 uv;
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;
varying vec2 vUv;

int scale = 1;

void main()
{
        vUv = uv;
        gl_Position = projection * view * model * position * vec4(scale, scale, scale, 1);
}

fragment:

precision mediump float;

vec2 spacing = vec2(32, 32);
varying vec2 vUv;

int scale = 1;

void main()
{
        float scaleFactor = 32.0 * 8.0 * float(scale);
        float offX = scaleFactor * vUv.x;
        float offY = scaleFactor * vUv.y;

        int remX = int(mod(offX, spacing[0]));
        int remY = int(mod(offY, spacing[1]));

        if (remX == 0 || remY == 0)
        {
                if (remX == remY)
                {
                        gl_FragColor = vec4(1.0, 1.0, 1.0, 0.2);
                }
                else
                {
                        gl_FragColor = vec4(1.0, 1.0, 1.0, 0.05);
                }
        }
        else
        {
                gl_FragColor = vec4(1.0, 1.0, 1.0, 0.0);
        }
}

The cubes use a different, basic shader - I will also want these affected by the fog. Will I just have to copy the fog logic to that shader and manipulate gl_FragColor's alpha in the same way?

Many thanks

Answer 1

Set the alpha channel depending on the distance from the center. The vUv cooridante of the center is (0.5, 0.5). Compute the Euclidean distance using the length function and set the alpha channel as a function of this distance:

void main()
{
    // [...]    


    if (remX == 0 || remY == 0)
    {
        float dist = length(vUv - vec2(0.5));     
        float alpha = (1.0 - 2.0*dist) * 0.2;
        gl_FragColor = vec4(1.0, 1.0, 1.0, alpha);
    }
    else
    {
        // [...]
    }
}