Bug 193895

Summary: image-rendering: pixelated does not work with WebGL (but does with Canvas2D)
Product: WebKit Reporter: Gregg Tavares <gman>
Component: CSSAssignee: Kimmo Kinnunen <kkinnunen>
Status: RESOLVED FIXED    
Severity: Normal CC: annulen, blaine, changseok, dino, eoconnor, esprehn+autocc, ews-watchlist, floooh, fred.wang, glenn, gyuyoung.kim, jbedard, jhuckaby, justin_fan, kkinnunen, kondapallykalyan, pdr, ryuan.choi, sabouhallawa, sergio, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 12   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=229753
https://bugs.webkit.org/show_bug.cgi?id=229754
Attachments:
Description Flags
Patch
none
Patch none

Gregg Tavares
Reported 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
Attachments
Patch (24.09 KB, patch)
2021-09-01 11:55 PDT, Kimmo Kinnunen 		no flags
DetailsFormatted DiffDiff
Patch (25.69 KB, patch)
2021-09-02 04:12 PDT, Kimmo Kinnunen 		no flags
DetailsFormatted DiffDiff
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2019-01-29 20:14:24 PST
Works in Chrome, doesn't work in Firefox.
Radar WebKit Bug Importer
Comment 2 2019-01-29 20:14:39 PST
<rdar://problem/47656086>
Joni Korpi
Comment 3 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.
Andre Weissflog
Comment 4 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.
Kimmo Kinnunen
Comment 5 2021-09-01 01:08:44 PDT
*** Bug 138291 has been marked as a duplicate of this bug. ***
Kimmo Kinnunen
Comment 6 2021-09-01 01:41:15 PDT
*** Bug 138293 has been marked as a duplicate of this bug. ***
Kimmo Kinnunen
Comment 7 2021-09-01 11:55:30 PDT
Created attachment 437049 [details] Patch
Simon Fraser (smfr)
Comment 8 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.
Kimmo Kinnunen
Comment 9 2021-09-02 04:12:58 PDT
Created attachment 437135 [details] Patch
EWS
Comment 10 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].
Kimmo Kinnunen
Comment 11 2024-01-17 01:54:10 PST
*** Bug 191827 has been marked as a duplicate of this bug. ***
Note You need to log in before you can comment on or make changes to this bug.