Search code examples
google-chromewebglantialiasingsubpixel

Sub-pixel animation using WebGL + Google Chrome?


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


Solution

  • 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.