iOS 8 Safari webgl 没有抗锯齿

Question

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

Answer 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。