Glsl 看起来像抗锯齿故障的白色像素

我在Firefox中看到红色边框周围有一些白色像素：

这是

R

附近区域的缩放

我所期望的

我得到了什么

但是片段着色器代码基本上只是检查一些条件，如果为真，则写入一个红色像素，如果为假，则写入背景图像中的信息。没有实现抗锯齿。所以我想知道，这些文物是从哪里来的

twgl.setDefaults（{attribPrefix:“a"}）；
常数bdrSz=50；
const cntrl=new dat.GUI（）；
const glCtx=twgl.getContext（document.createElement（“canvas”）；
常数imgLc=
"https://upload.wikimedia.org/wikipedia/commons/8/85/BlackRock_wordmark.svg";
//常数imgLc=
//   "https://upload.wikimedia.org/wikipedia/commons/8/8e/Panasonic_logo_%28Blue%29.svg";
常数pmtrs={ir:0.3，or:0.4，rt:2，br:0.1，ri:10}；
常数宽度=1200；
让布弗；
让dmnsn；
设pgInf={
blr:twgl.createProgramInfo（glCtx，[“vs”，“fs_blur”]），
wrp:twgl.createProgramInfo（glCtx，[“vs”，“fs_warp”]）
};
设qBInf=twgl.primitives.createXYQuadBufferInfo（glCtx）；
让imgTx；
功能nrmlz（arr）{
让sum=arr.reduce（（v，w）=>v+w[0]*w[1]，0）；
返回arr.map（（v）=>v[0]/sum）；
}
函数rendr（fbi、pi、u）{
twgl.bindFramebufferInfo（glCtx，fbi）；
twgl.drawObjectList（glCtx[
{
节目信息：pi，
bufferInfo:qBInf，
制服：u
}
]);
}
函数prep（）{
设img=新图像（）；
img.crossOrigin=“匿名”；
img.src=imgLc；
img.onload=函数（）{
让ctx=document.createElement（“canvas”）.getContext（“2d”）；
ctx.canvas.width=glCtx.canvas.width=width；
ctx.canvas.height=glCtx.canvas.height=
（img.height*（width-2*bdrSz））/img.width+2*bdrSz；
buffer=twgl.createFramebufferInfo(
glCtx，
[
{
内部格式：glCtx.R32F
}
],
ctx.canvas.width，
ctx.canvas.height
);
document.body.append（glCtx.canvas）；
ctx.drawImage(
img，
bdrSz，
bdrSz，
ctx.canvas.width-2*bdrSz，
ctx.canvas.height-2*bdrSz
);
imgTx=twgl.createTexture（glCtx，{flipY:1，src:ctx.canvas}）；
compt（）；
};
}
函数compt（）{
设bra=Math.max（2，Math.floor（pmtrs.br*glCtx.canvas.height））；
设knl=twgl.createTexture（glCtx{
身高：胸罩，
内部格式：glCtx.R32F，
src:nrmlz(
阵列（胸罩）
.fill（）
.map（（u，i）=>
阵列（胸罩）
.fill（）
.map（（j）=>[
数学经验（-（i/bra）**2+（j/bra）**2）），
i==0&&j==0？1:i==j | | i==0 | | j==0？4:8
])
)
.flat（）
),
宽度：胸罩
});
rendr（buffer，pgInf.blr{
u_内核：knl，
u_半径：胸罩，
分辨率：[glCtx.canvas.width，glCtx.canvas.height]，
u_纹理：imgTx
});
芬什（）；
}
函数finsh（）{
rendr（空，pgInf.wrp{
u_模糊：buffer.attachments[0]，
原件：imgTx，
u_内半径：pmtrs.ir，
外层：pmtrs.or，
u_比率：pmtrs.rt，
u_refIndex:pmtrs.ri，
分辨率：[glCtx.canvas.width，glCtx.canvas.height]
});
}
cntrl.add（pmtrs，“ir”，0,1）.onChange（finsh）；
cntrl.add（pmtrs，“or”，0，1）.onChange（finsh）；
添加（pmtrs，“rt”，0,3）.onChange（finsh）；
添加（pmtrs，“br”，0，0.1）。一旦更改（compt）；
cntrl.add（pmtrs，“ri”，-10,10）.onChange（finsh）；
prep（）

#300版es
在vec4 a_位置；
在vec2 a_texcoord；
out vec2 v_texcoord；
void main（）{
v_texcoord=a_texcoord；
gl_位置=a_位置；
}
#300版es
高精度浮点；
在vec2 v_texcoord；
均匀采样2du_核；
统一的整数半径；
均匀vec2u_分辨率；
均匀的二维u_纹理；
输出vec4 f_颜色；
void main（）{
浮动总和=0.0；
对于（int i=-u_半径+1；i
所以问题是你不能在条件中使用纹理查找，否则它们会破坏你的变化

摘自附录A

6纹理访问
访问非均匀条件块体中的mip贴图纹理会产生未定义的纹理
价值非统一条件块是编译时无法确定其执行情况的块
时间

和第8.8节

某些纹理函数（非“Lod”和非“Grad”版本）可能需要隐式导数<强>隐式
导数在非均匀控制流和顶点纹理获取中未定义

换句话说，您需要在
fs\u warp
着色器中移动此行

float tf = texture(u_original, v_texcoord).a;

在
if
语句之外

不幸的是，它是否得到坏结果取决于GPU，所以如果你运气不好，你就不会遇到坏结果