使用WebGL + Google Chrome的亚像素动画？

Question

[当我慢慢平移三角形时，它逐像素移动。有什么方法可以迫使Google Chrome使用抗锯齿来平滑移动吗？

有关示例，请参见：

https://dl.dropbox.com/u/4571/musicope2/index.html

PS：我想知道这个答案是否也适用于webgl，并且答案是否仍然有效？：

Sub-pixel rendering in Chrome Canvas

Answer 1

我不确定您要的是什么。

使用以下命令创建WebGL上下文时可以请求抗锯齿

gl = canvas.getContext("webgl", { antialias: true });

但是，浏览器是否真正开启抗锯齿取决于您的水平。例如，某些浏览器由于驱动程序错误而不允许在某些GPU上使用抗锯齿功能。

否则，您可以将画布设置为较大的尺寸，并使用css将其显示为较小的尺寸。浏览器很可能会使用GPU双线性过滤来显示结果，从而为您提供一种抗锯齿的功能。为此，将画布的大小设置为要显示的大小的两倍，将css设置为要显示的大小。示例：

desiredWidth = 640;
desiredHeight = 480;
canvas.width = desiredWidth * 2;
canvas.height = desiredHeight * 2;
canvas.style.width = desiredWidth + "px";
canvas.style.height = dsiredHeight + "px";
gl = canvas.getContext("webgl", { antialias: false });

这将使您画布的drawingBuffer大小是页面中显示的大小的两倍，并可能使其看起来是抗锯齿的。