Don'；t在webgl中混合与自身相交的多段线

我正在webgl中使用启用的混合绘制两条多段线（示例中的线）

gl.uniform4f(colorUniformLocation, 0, 0, 0, 0.3);

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

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.2, -1, 0.2, 1,]), gl.STATIC_DRAW);
gl.drawArrays(gl.LINE_STRIP, 0, 2);

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, -1, 0, 1,0, -1, 0, 1]), gl.STATIC_DRAW);
gl.drawArrays(gl.LINE_STRIP, 0, 4);

这是代码笔示例

左边的线和它自己交叉，看起来像是和它自己混合在一起，所以它变得更暗

---

我希望混合在这些多段线之间工作，但不希望多段线与自身混合。有办法吗？

一种方法是使用模具测试。您可以设置webgl，以便在绘制像素时模具存储某个值，还可以设置模具测试，以便在看到该值时模具测试失败

首先是一个示例，它绘制了两组2个重叠三角形，并启用了“混合”。这对线重叠的地方会变暗

函数main（）{
常数m4=twgl.m4；
常量gl=文件
.querySelector（“画布”）
.getContext（“webgl”）；
常数vs=`
属性向量4位置；
一致mat4矩阵；
void main（）{
gl_位置=矩阵*位置；
}
`;
常数fs=`
精密中泵浮子；
vec4颜色均匀；
void main（）{
gl_FragColor=颜色；
}
`;
//编译着色器、链接程序、查找位置
const programInfo=twgl.createProgramInfo（gl[vs，fs]）；
总账使用程序（programInfo.program）；
//创建一个缓冲区并将数据放入其中
const bufferInfo=twgl.createBufferInfoFromArrays（gl{
职位：{
NUM组件：2，
数据：[
-0.5, -0.2,
0.5, -0.2,
0.5,  0.2,
-0.2, -0.5,
-0.2,  0.5,
0.2,  0.5,
],
},
});
总账启用（总账混合）；
gl.blendFunc（gl.ONE，gl.ONE减去SRCα）；
//调用gl.bindBuffer、gl.enableVertexAttributeArray、gl.VertexAttributePointer
twgl.setBuffersAndAttributes（总帐、程序信息、缓冲信息）；
//呼叫总队制服？？
twgl.设置制服（程序信息{
颜色：[0.5,0,0,0.5]，
矩阵：m4.identity（），
});
//调用gl.DrawArray或gl.drawElements
twgl.drawBufferInfo（总账，bufferInfo）；
twgl.设置制服（程序信息{
颜色：[0,0,0.5,0.5]，
矩阵：m4.5(
m4.翻译（[-0.1,0.2,0]），
数学PI*1.2），
});
twgl.drawBufferInfo（总账，bufferInfo）；
}
main（）
非常感谢您给出了这个清晰而全面的答案！这种模版方式对我来说非常好。