没有针对iOS 8 Safari WebGL的抗锯齿 [英] No antialiasing for iOS 8 safari webgl

问题描述

在支持webgl的iOS 8上的Safari无疑是个好消息，但是在运行演示后，我发现没有抗锯齿.有解决方案吗?

Safari on iOS 8 supporting webgl is surely a good news but after I run my demo I find that there is no antialiasing. Any solutions?

推荐答案

您拥有的角色?有很多方法可以消除锯齿.这是一个首先检查您是否尚未消除锯齿

role you own? There's lots of ways to anti-alias. Here's one. First check that you're not already anti-aliased

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

最简单的方法是使画布的后备存储大于显示的大小.假设您有一个要显示一定尺寸的画布

The simplest way would be to make your canvas's backing store larger than it's displayed. Assuming you have a canvas that you want to be displayed a certain size

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

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

Now your canvas will most likely be bi-linear filtered when drawn. In iOS's case since they are all HD-DPI you probably will need to do 4x

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

您可以通过查看window.devicePixelRatio来查找.实际上，如果您想要1x1像素，您可以这样做

You can find out by looking at window.devicePixelRatio. In fact if you want 1x1 pixels you'd do this

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";

否则，另一种方法是渲染到附着到帧缓冲区的纹理，然后将纹理渲染到画布中.使用可以抗锯齿的着色器.

Otherwise, another way is to render to a texture attached to a framebuffer then render the texture into the canvas using a shader that does antialiasing.

这篇关于没有针对iOS 8 Safari WebGL的抗锯齿的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！