iOS 8 Safari webgl 没有抗锯齿

Posted 2023-02-24

【中文标题】iOS 8 Safari webgl 没有抗锯齿

【英文标题】：No antialiasing for iOS 8 safari webgl

【发布时间】：2014-08-19 15:58:35

【问题描述】：

支持 webgl 的 ios 8 上的 Safari 肯定是一个好消息，但在我运行我的演示后，我发现没有抗锯齿。有什么解决办法吗？

【参考方案1】：

你拥有的角色？抗锯齿有很多方法。这是一个。首先检查您是否还没有抗锯齿

var gl = someCanvas.getContext("webgl");
var contextAttribs = gl.getContextAttributes();
if (!contextAttribs.antialias) 
  // do your own anti-aliasing

最简单的方法是让画布的后备存储空间大于其显示的大小。假设您有一个想要以特定尺寸显示的画布

canvas.width = desiredWidth * 2;
canvas.height = desiredHeight * 2;
canvas.style.width = desiredWidth + "px";
canvas.style.height = desiredHeight + "px";

现在您的画布在绘制时很可能会进行双线性过滤。在 iOS 的情况下，因为它们都是 HD-DPI，你可能需要做 4x

canvas.width  = desiredWidth  * 4;
canvas.height = desiredHeight * 4;
canvas.style.width  = desiredWidth  + "px";
canvas.style.height = desiredHeight + "px";

您可以通过查看window.devicePixelRatio 找到答案。事实上，如果你想要 1x1 像素，你会这样做

var devicePixelRatio = window.devicePixelRatio || 1;
var overdraw = 1; // or 2
var scale = devicePixelRatio * overdraw;
canvas.width  = desiredWidth  * scale;
canvas.height = desiredHeight * scale;
canvas.style.width  = desiredWidth  + "px";
canvas.style.height = desiredHeight + "px";

否则，另一种方法是渲染到附加到帧缓冲区的纹理，然后将纹理渲染到画布using a shader that does antialiasing。

【讨论】：

非常感谢。我稍后会尝试。

通过扩大画布解决问题。再次感谢！

嗨，gman。我知道您是 WebGL 方面的专家。我又遇到了一个问题：***.com/questions/26530799/…我在等你的回答。