Webgl 原语的Regl颜色和alpha混合

我正试图弄明白如何使用

我知道Regl命令有一个，我已经尝试复制以下webgl设置来实现此目的：

gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

在Regl中使用以下

blend

设置：

blend: {
  enable: true,
  func: { src: 'src alpha', dst:'one minus src alpha' }
},

但是混合似乎只在背景色方面起作用，而不是在点之间。（请参见下面的示例。）

示例：

const canvas1=document.querySelector（'c1'）；
const canvas2=document.querySelector（'c2'）；
//////////////////////////////////////////////
//纯WEBGL
//////////////////////////////////////////////
const gl=canvas1.getContext（'webgl'）；
总账启用（总账混合）；
gl.blendFunc（gl.SRC_ALPHA，gl.1减去gl.SRC_ALPHA）；
常量vertexShaderSource=`
属性向量2位置；
属性向量4颜色；
可变的vec4 v_颜色；
void main（）{
gl_PointSize=50.0；
gl_位置=vec4（位置，0，1）；
v_color=颜色；
}
`;
常量fragmentShaderSource=`
精密中泵浮子；
可变的vec4 v_颜色；
void main（）{
gl_FragColor=v_颜色；
}
`;
const vertexShader=createShader（gl，gl.VERTEX_着色器，vertexShaderSource）；
const fragmentShader=createShader（gl，gl.FRAGMENT\u着色器，fragmentShaderSource）；
const program=createProgram（gl、vertexShader、fragmentShader）；
gl.useProgram（程序）；
const positionAttributeLocation=gl.getAttributeLocation（程序“位置”）；
const colorAttributeLocation=gl.getAttributeLocation（程序“颜色”）；
const positionBuffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，positionBuffer）；
gl.EnableVertexAttributeArray（位置属性位置）；
gl.VertexAttributePointer（位置属性位置，2，gl.FLOAT，false，0，0）；
const colorBuffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，colorBuffer）；
gl.EnableVertexAttributeArray（colorAttributeLocation）；
gl.VertexAttribute指针（colorAttributeLocation，4，gl.FLOAT，false，0，0）；
gl.bindBuffer（gl.ARRAY\u BUFFER，positionBuffer）；
gl.bufferData（gl.ARRAY\u BUFFER，新Float32Array([
-0.05, -0.05, -0.05, 0.05, 0.05, 0.05, 0.05, -0.05,
])、总图、静态图）；
gl.bindBuffer（gl.ARRAY\u BUFFER，colorBuffer）；
常数红=[1,0,0,0.5]；
常数蓝=[0,0,1,0.5]；
gl.bufferData（gl.ARRAY\u BUFFER，新Float32Array([
…红色，…红色，
蓝色，蓝色，
])、总图、静态图）；
总图绘制阵列（总图点，0,4）；
函数createShader（gl、类型、shaderSource）{
常量着色器=gl.createShader（类型）；
gl.shaderSource（着色器，shaderSource）；
gl.compileShader（着色器）；
const success=gl.getShaderParameter（着色器，gl.COMPILE_状态）；
如果（！成功）{
console.warn（gl.getShaderInfoLog（着色器））；
gl.deleteShader（着色器）；
}
返回着色器；
}
函数createProgram（gl、vertexShader、fragmentShader）{
const program=gl.createProgram（）；
gl.attachShader（程序，顶点着色器）；
gl.attachShader（程序、碎片着色器）；
总账链接程序（程序）；
const success=gl.getProgramParameter（程序，gl.LINK\u状态）；
如果（！成功）{
console.log（gl.getProgramInfoLog（程序））；
总账删除程序（程序）；
}
返回程序；
}
//////////////////////////////////////////////
//REGL
//////////////////////////////////////////////
const regl=createREGL（canvas2）；
regl.clear（{color:[0,0,0,0]，depth:1}）；
regl({
frag：`
精密中泵浮子；
可变vec4色；
空干管（）{
gl_FragColor=FragColor；
}`,
垂直：`
精密中泵浮子；
属性向量2位置；
属性向量4颜色；
可变vec4色；
均匀浮动点宽度；
空干管（）{
fragColor=颜色；
gl_PointSize=点宽度；
gl_位置=vec4（位置，0，1）；
}`,
属性：{
职位：[
[-0.05, -0.05],
[-0.05, 0.05],
[0.05, -0.05],
[0.05, 0.05],
],
颜色：[
[1, 0, 0, 0.5],
[1, 0, 0, 0.5],
[0, 0, 1, 0.5],
[0, 0, 1, 0.5]
],
},
制服：{
点宽度：50，
},
混合：{
启用：对，
func:{src:'src alpha'，dst:'1减去src alpha'}
},
计数：4，
基元：'点'，
})();
#bg{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
颜色：#808080；
背景：黑色；
}
#c1，#c2{
宽度：240px；
高度：240px；
边框：1px纯白；
}
em{
显示：块；
}

左边是纯WebGL。右边是Regl。
多亏了我的发现：

简而言之，混合功能需要调整，深度测试需要禁用。（但我仍然不知道为什么在vanilla WebGL示例中工作的blend函数在Regl中不工作）

使用以下混合模式

blend: {
  enable: true,
  func: {
    srcRGB: 'src alpha',
    srcAlpha: 'src alpha',
    dstRGB: 'one minus src alpha',
    dstAlpha: 'one minus src alpha',
  },
},


禁用深度测试

depth: { enable: false },


下面是我问题中的固定示例：
帮助我理解了为什么需要禁用深度测试