Bug 193895 - image-rendering: pixelated does not work with WebGL (but does with Canvas2D)
Summary: image-rendering: pixelated does not work with WebGL (but does with Canvas2D)
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 12
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Kimmo Kinnunen
URL:
Keywords: BrowserCompat, InRadar
: 138291 138293 (view as bug list)
Depends on:
Blocks:
 
Reported: 2019-01-27 21:43 PST by Gregg Tavares
Modified: 2021-09-13 10:21 PDT (History)
21 users (show)

See Also:

Attachments
Patch (24.09 KB, patch)
2021-09-01 11:55 PDT, Kimmo Kinnunen 		no flags Details | Formatted Diff | Diff
Patch (25.69 KB, patch)
2021-09-02 04:12 PDT, Kimmo Kinnunen 		no flags Details | Formatted Diff | Diff
Show Obsolete (1) View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Gregg Tavares 2019-01-27 21:43:32 PST 
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
Comment 1 Simon Fraser (smfr) 2019-01-29 20:14:24 PST 
Works in Chrome, doesn't work in Firefox.
Comment 2 Radar WebKit Bug Importer 2019-01-29 20:14:39 PST 
<rdar://problem/47656086>
Comment 3 Joni Korpi 2021-08-22 05:48:30 PDT 
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.
Comment 4 Andre Weissflog 2021-08-30 03:25:26 PDT 
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.
Comment 5 Kimmo Kinnunen 2021-09-01 01:08:44 PDT 
*** Bug 138291 has been marked as a duplicate of this bug. ***
Comment 6 Kimmo Kinnunen 2021-09-01 01:41:15 PDT 
*** Bug 138293 has been marked as a duplicate of this bug. ***
Comment 7 Kimmo Kinnunen 2021-09-01 11:55:30 PDT 
Created attachment 437049 [details]
Patch
Comment 8 Simon Fraser (smfr) 2021-09-01 12:08:14 PDT 
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.
Comment 9 Kimmo Kinnunen 2021-09-02 04:12:58 PDT 
Created attachment 437135 [details]
Patch
Comment 10 EWS 2021-09-13 10:21:06 PDT 
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].