javascript - WebGL alpha 取决于与原点的距离

Question

我有以下设置:

平面网格由线条组成，线条相交的地方有更亮的点。我想在整个场景中引入一个 alpha 渐变，当前 alpha (0.2) 位于最中心，在边缘线性渐变为 0.0。我可以在网上找到的唯一示例最终什么都不做，只是根据近/远值将背景更改为随机颜色。
我正在寻找这样的东西:/image/92LEU.png
我怎样才能做到这一点？以下是网格着色器:
顶点:

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);
}

分段:

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);
        }
}

立方体使用不同的基本着色器 - 我也希望它们受到雾的影响。我是否只需要将雾逻辑复制到该着色器并以相同的方式操作 gl_FragColor 的 alpha ？
非常感谢

Answer 1

根据与中心的距离设置 alpha channel 。 vUv中心坐标为 (0.5, 0.5)。计算 Euclidean distance使用 length 函数并将 alpha channel 设置为该距离的函数:

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
    {
        // [...]
    }
}