[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: [Public WebGL] How to unambiguously set canvas pixel size to be pixel-perfect?



Good points Florian. I agree with these:

   - I care about rendering pixel-perfect only if page has not been zoomed, i.e. if user had zoomed to 150%, I don't have a need to get a larger GL framebuffer size that'd natively match that resized area. If window.devicePixelRatio changes according to zoom level, that sounds bad, exactly due to the max framebuffer size restrictions.
   - Also, if a page has been scrolled to sub-pixel offsets, that could produce cases where precise match doesn't occur. Regarding scrolling, I would only care that there is a programmatic way to set the scroll position of a page to a value where pixels are guaranteed to align up, and/or that scroll = 0 would always guarantee pixels to align up.



2014-06-11 7:53 GMT+03:00 Florian Bösch <pyalot@gmail.com>:
Your issue description mentions trying to do a pixel perfect canvas under conditions of zoom by the user. I think this can be understood to mean either that:
  • You want to display the same resolution pixel perfectly disregarding user zoom level, which would be impossible, because unless you adjust the resolution, you cannot get pixel perfection.
  • You want to resize the resolution to be pixel perfect given the soom level, which would also be impossible, because if the user say, zooms in 10x, then your canvas size would bloat to 10x its size, say it was 1600x1600 at 1:1 zoom, at 10:1 zoom it would now be 16kx16k, which is larger than the framebuffer supported by any existing hardware.
It would seem to me that the argument for pixel perfection in respect to device pixel ratio can only apply when there is no user-zoom.

Additionally, pixel perfection will be marred if a scroll is applied by a user, that's 1 pixel in the pixel device ratio, but would be 0.5 pixels in the "pretend" resolution. In this case the underlying texels to be blit would meet in the middle of "pretend" pixels. I too think, this case cannot be handled, because the only way to handle it would be to "pretend" pixel clamp the canvas position, which would lead to an undesirable stepping effect on scroll.

As far as I can see, the remaining beef lies with how to make sure that a canvas of given pretend pixel size, uses an underlying renderbuffer of device pixel size. Traditionally the ratio would have been 1 or 2, but the fractional ratios certainly complicate things. But isn't it the case that if you floor the size, that you should be fine, because you can discount the impossible cases discussed above?


On Wed, Jun 11, 2014 at 3:46 AM, Jukka Jylänki <jujjyl@gmail.com> wrote:
Hi there,

I raised a discussion about the need for explicit API or spec-guaranteed mechanism for resizing a WebGL canvas size to be pixel-perfect in the WebGL issue tracker. In the interest of not retyping everything, here's a link to the details: 


The quick summary: When trying to come up the proper device pixel size for a WebGL canvas so that it properly matches the actual size displayed by the browser, fractional window.devicePixelRatio values in the wild (1.5 and 2.25 have been seen) pose problems, and to get the right result, one has to either floor, round or ceil the result depending on the devicePixelRatio and device resolution in question.

We need to spec down a method that is guaranteed to work so that off-by-one-pixel errors cannot possibly occur. What should such a mechanism look like that can take into account arbitrarily fractional devicePixelRatios out there?

Jukka