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

iOS 8 safari webgl没有抗锯齿功能

1 个答案: