WebGL/Three.js 小尺寸/旋转矩形抗锯齿异常问题求助

2D矩形渲染抗锯齿异常问题 #

我正在构建带阴影、内部透明的矩形，当矩形宽高较大时没有抗锯齿问题，但当尺寸较小（我测试的阈值是小于30px）或进行任意角度2D旋转时，几何图形显示效果明显变差，出现严重的抗锯齿瑕疵。
效果演示：

• 150x150正常尺寸矩形显示效果：
• 同尺寸矩形添加小幅旋转后的显示效果：
• 尺寸缩小至20x20后几何渲染质量大幅下降，效果如下：

已做的优化尝试 #

参考相关技术文章后，我为了提升渲染精度、开启多重抗锯齿，已经添加导数扩展以支持fwidth函数，同时自定义了linearstep(edge0, edge1, x)函数。
Three.js环境不需要手动启用导数扩展，但我在自己开发的GLSL应用中已经通过以下代码启用了对应扩展：

this.gl.getExtension('OES_standard_derivatives');

但完成以上操作后，依旧无法实现无抗锯齿瑕疵的理想矩形渲染效果，希望能获得可行的解决方案，或者相关实用技术文章的推荐。

我的完整测试代码：Demo链接

内容的提问来源于stack exchange，提问作者Andrew Hordynsky