Sub-pixel animation using WebGL + Google Chrome?

Question

When I slowly translate a triangle it is moved pixel by pixel. Is there any way how to force the Google Chrome to smooth the movement out using antialiasing?

For the example check out:

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

PS: I wonder if this answer applies also for webgl and if the answer is still valid?:

Sub-pixel rendering in Chrome Canvas

Answer 1

I'm not sure what you're asking for exactly.

Anti-aliasing can be requested when creating your WebGL context with

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

But it's up to the browser whether or not it actually turns on anti-aliasing or not and to what level. Some browsers for example disallow anti-aliasing on certain GPUs because of driver bugs.

Otherwise you could set the canvas to a larger size and use css to display it a smaller size. The browser will most likely use GPU bilinear filtering to display the result giving you a kind fo anti-aliasing. To do that set the size of the canvas to double the size you want to display and the css to the size you want to display. Example:

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 });

That will make your canvas's drawingBuffer double the size it is displayed in the page and will likely make it look anti-aliased.