Glsl 着色器中的矩形/方形渐变

我的第一个问题结束了。从那以后，我添加了一些代码并取得了一些进展。但是，生成的渐变是圆形的，我目前不知道如何将其转换为正方形

以下是我目前的结果：

目标结果（沿着这些路线）：

这是我的片段着色器：

高精度浮点；
可变向量2 vTextureCoord；
均匀浮动中心；
均匀浮动中心；
统一的vec4颜色[4]；
均匀浮动步骤[4]；
void main（）{
vec3-map=vec3（vtexturecord，1）；
vec2 uv=map.xy；
浮动距离=距离（vtexturecord，vec2（centerX，centerY））；
highp vec4 col=颜色[0]；
对于（int i=1；i<4；++i）{
col=混合（col，colors[i]，smoothstep（步骤[i-1]，步骤[i]，dist））；
}
浮动系数=最大值（abs（uv.x-centerX），abs（uv.y-centerY））；
浮动c=1.-最大值（abs（uv.x-中心x），abs（uv.y-中心y））；
vec4最终颜色=vec4（（列r-系数），（列g-系数），（列b-系数），1.）；
gl_FragColor=最终颜色；
}

通过计算两个轴的最大距离，可以获得方形梯度：

float dist=距离（vtexturecord，vec2（centerX，centerY））

vec2 distV=vtexturecord-vec2（centerX，centerY）；
浮动距离=最大值（abs（distV.x）、abs（distV.y））；


完整示例：


（函数loadscene（）{
变量画布，gl，vp_大小，prog，bufObj={}；
函数initScene（）{
canvas=document.getElementById（“ogl画布”）；
gl=canvas.getContext（“实验性webgl”）；
如果（！gl）
返回；
progDraw=gl.createProgram（）；
for（设i=0；i<2；++i）{
让source=document.getElementById（i==0？“绘制着色器vs”：“绘制着色器fs”）.text；
让shaderObj=gl.createShader（i==0？gl.VERTEX\u着色器：gl.FRAGMENT\u着色器）；
gl.shaderSource（shaderObj，source）；
总编编辑主任（shaderObj）；
let status=gl.getShaderParameter（shaderObj，gl.COMPILE_status）；
如果（！状态）警报（gl.getShaderInfoLog（shaderObj））；
总承包商attachShader（progDraw，shaderObj）；
总账链接程序（progDraw）；
}
status=gl.getProgramParameter（progDraw，gl.LINK\u status）；
如果（！状态）警报（总账getProgramInfoLog（progDraw））；
progDraw.inPos=gl.getAttribLocation（progDraw，“inPos”）；
progDraw.u_时间=总账获取统一位置（progDraw，“u_时间”）；
progDraw.u_分辨率=gl.getUniformLocation（progDraw，“u_分辨率”）；
总账使用程序（progDraw）；
var pos=[-1，-1,1，-1,1,1,1]；
var inx=[0,1,2,0,2,3]；
bufObj.pos=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，bufObj.pos）；
总账缓冲数据（总账数组缓冲区、新Float32Array（pos）、总账静态绘图）；
bufObj.inx=gl.createBuffer（）；
bufObj.inx.len=inx.length；
gl.bindBuffer（gl.ELEMENT\u ARRAY\u BUFFER，bufObj.inx）；
gl.bufferData（gl.ELEMENT\u ARRAY\u BUFFER、新UINT16阵列（inx）、gl.STATIC\u DRAW）；
gl.EnableVertexAttributeArray（progDraw.inPos）；
gl.VertexAttributePointer（progDraw.inPos，2，gl.FLOAT，false，0，0）；
总帐启用（总帐深度测试）；
gl.clearColor（0.0,0.0,0.0,1.0）；
window.onresize=调整大小；
调整大小（）；
请求动画帧（渲染）；
}
函数resize（）{
//vp_大小=[gl.drawingBufferWidth，gl.drawingBufferHeight]；
vp_size=[window.innerWidth，window.innerHeight]；
//vp_大小=[256，256]
canvas.width=vp_大小[0]；
canvas.height=vp_大小[1]；
}
函数渲染（deltaMS）{
总图视口（0，0，canvas.width，canvas.height）；
gl.clear（gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT）；
gl.uniform1f（progDraw.u_时间，deltaMS/1000.0）；
gl.uniform2f（progDraw.u_分辨率、canvas.width、canvas.height）；
总帐付款人（总帐三角形，bufObj.inx.len，总帐无符号_短，0）；
请求动画帧（渲染）；
}  
初始化场景（）；
})();

#版本100
属性向量2-inPos；
不同的vec2 NDCPO；
void main（）
{
ndcPos=inPos；
gl_位置=vec4（inPos.xy，0.0，1.0）；
}
精密中泵浮子；
不同的vec2 NDCPO；//在[-1.0,1.0]范围内的标准化设备坐标
均匀浮动u_时间；
均匀vec2u_分辨率；
#定义填充
void main（）
{
vec4颜色[4]；
颜色[0]=vec4（1.0,0.0,0.0,1.0）；
颜色[1]=vec4（0.0,1.0,0.0,1.0）；
颜色[2]=vec4（0.0,0.0,1.0,1.0）；
颜色[3]=vec4（1.0,1.0,1.0,1.0）；
浮动台阶[4]；
步数[0]=0.2；
步骤[1]=0.4；
步骤[2]=0.6；
步骤[3]=0.8；
vec2-uv=ndcPos.xy；
uv.x*=u_分辨率.x/u_分辨率.y；
vec2 vTextureCoord=紫外线；
浮动中心x=0.0；
浮动中心Y=0.0；
//浮动距离=距离（vtexturecord，vec2（centerX，centerY））；
vec2 distV=vtexturecord-vec2（centerX，centerY）；
浮动距离=最大值（abs（distV.x）、abs（distV.y））；
highp vec4 col=颜色[0]；
对于（int i=1；i<4；++i）{
col=混合（col，colors[i]，smoothstep（步骤[i-1]，步骤[i]，dist））；
}
浮动系数=最大值（abs（uv.x-centerX），abs（uv.y-centerY））；
浮动c=1.-最大值（abs（uv.x-中心x），abs（uv.y-中心y））；
vec4最终颜色=vec4（（列r-系数），（列g-系数），（列b-系数），1.）；
gl_FragColor=最终颜色；
}
通过计算两个轴的最大距离，可以获得方形梯度：

float dist=距离（vtexturecord，vec2（centerX，centerY））

vec2 distV=vtexturecord-vec2（centerX，centerY）；
浮动距离=最大值（abs（distV.x）、abs（distV.y））；


完整示例：


（函数loadscene（）{
变量画布，gl，vp_大小，prog，bufObj={}；
函数initScene（）{
canvas=document.getElementById（“ogl画布”）；
gl=canvas.getContext（“实验性webgl”）；
如果（！gl）
返回；
progDraw=gl.createProgram（）；
对于（设i=0；i<2；