Bug 193895 – image-rendering: pixelated does not work with WebGL (but does with Canvas2D)

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

[Gregg Tavares]

Simple example:

http://jsfiddle.net/greggman/mn9ebgkL/

This is not about scaling with a transform and given that a canvas with a 2D context works where as a canvas with WebGL fails it seems like a different bug than

https://bugs.webkit.org/show_bug.cgi?id=162592

[Simon Fraser (smfr)]

Works in Chrome, doesn't work in Firefox.

[Radar WebKit Bug Importer]

<rdar://problem/47656086>

[Joni Korpi]

Just chiming in to say this issue still exists, and explain why it’d be nice to get it fixed.

Rendering WebGL at a lower-than-native resolution is a great way to save performance. The problem is by default you end up with a blurry mess. However, with `pixelated` (supported by Chrome) or `crisp-edges` (supported by Firefox) the result is a nice, retro-ish look, familiar to anyone who might have played PC games such as Devil Daggers or Return of the Obra Dinn.

Safari being the only major browser to not support either is a blocker for using this method.

We can mostly get around this by rendering to a lower resolution framebuffer, and rendering that to a native resolution canvas. But the overhead from that can negate much (or even all) of the performance savings made in the first place.

[Andre Weissflog]

I'm also affected by this bug. Compare this demo in Safari vs Chrome (or Firefox):

https://floooh.github.io/sokol-html5/imgui-sapp.html

The reason why the text is blurry on Safari is because the WebGL canvas is non-Retina-resolution and upscaled by the composer, which involved linear filtering, which is the reason for the blurriness.

In the native version of the same demo I'm using kCAFilterNearest on the Cocoa view to force nearest filtering.

[Kimmo Kinnunen]

*** Bug 138291 has been marked as a duplicate of this bug. ***

[Kimmo Kinnunen]

*** Bug 138293 has been marked as a duplicate of this bug. ***

[Kimmo Kinnunen]

Created attachment 437049 [details]
Patch

[Simon Fraser (smfr)]

Comment on attachment 437049 [details]
Patch

This looks OK but I don't think the plumbing is quite right. I think it should go via GraphicsLayerCA, just like setBackfaceVisibility() for example.

[Kimmo Kinnunen]

Created attachment 437135 [details]
Patch

[EWS]

Committed r282335 (241602@main): <https://commits.webkit.org/241602@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 437135 [details].

[Kimmo Kinnunen]

*** Bug 191827 has been marked as a duplicate of this bug. ***