如何修复WebGL中2D纹理边缘的锯齿与暗边问题？

我已尝试将WebGL上下文的antialias属性设置为true，但并未解决锯齿问题。

当前WebGL渲染效果 #

目标Canvas渲染效果（通过drawImage实现） #

除了以下三个修改的配置外，我使用的是WebGL默认设置：

gl.enable(gl.BLEND); // 启用混合
gl.depthFunc(gl.LEQUAL); // 近处物体遮挡远处物体
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

以下是我的精灵加载代码（sprite为Image对象）：

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, sprite);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

内容的提问来源于stack exchange，提问作者Infinite-3D