1

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

Community
  • 1
  • 1
Oldrich Svec
  • 4,191
  • 2
  • 28
  • 54
  • Ahoj! :) You can not draw a half of pixel with one color and another half with another color. There should be some antialiasing. WebGL does not say anything about it, so it is up to browser and implementation. I see your rectangles move with antialiasing (horizontal edges are switching between blurry and not blurry), I think it is correct behavior. – Ivan Kuckir Sep 24 '12 at 18:46

1 Answers1

3

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.

gman
  • 100,619
  • 31
  • 269
  • 393
  • You are probably correct. I have now tested the same on my work station and it moves smoothly. I tested it on Intel Atom before where I had to force the use of hardware acceleration. I guess that Chrome just disabled antialias in that case. When I get home, I will test the "hack" you suggest. – Oldrich Svec Sep 25 '12 at 04:42
  • @gman how did testing with the "hack" go? Did you see any improvements? – jorgenfb Mar 13 '13 at 10:04