-
-
Notifications
You must be signed in to change notification settings - Fork 654
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fractional display scaling leads to blurry rendering on browsers #2958
Comments
Why did you remove the platform list...? Did this happen only on Windows browsers? |
Also, could we have more minimized test case? |
About where this happens:
About minimal example:
E.g. (but this is not very helpful to debug / understand the behavior): package main
import "github.com/hajimehoshi/ebiten/v2"
import "github.com/hajimehoshi/ebiten/v2/text/v2"
import "github.com/hajimehoshi/bitmapfont/v3"
type Game struct {
fontFace text.Face
}
func (self *Game) LayoutF(logicWinWidth, logicWinHeight float64) (float64, float64) {
scale := ebiten.DeviceScaleFactor()
return logicWinWidth*scale, logicWinHeight*scale
}
func (_ *Game) Layout(_, _ int) (int, int) {
panic("ebitengine version must support LayoutF()")
}
func (self *Game) Update() error { return nil }
func (self *Game) Draw(screen *ebiten.Image) {
var opts text.DrawOptions
opts.DrawImageOptions.GeoM.Scale(2, 2)
opts.DrawImageOptions.GeoM.Translate(8, 8)
text.Draw(screen, "Minimal example", self.fontFace, &opts)
}
func main() {
ebiten.SetWindowResizingMode(ebiten.WindowResizingModeEnabled)
err := ebiten.RunGame(&Game{ fontFace: text.NewGoXFace(bitmapfont.Face) })
if err != nil { panic(err) }
} |
I'll try
Is there a reason? I'm just curious |
I didn't really know what to put, because Windows is technically not a problem as a desktop platform, but I don't know if the browser problems happen only on Windows or not (I assume not). And I hadn't tested other desktops to see if they were also affected. So I didn't know if it was a combination of platforms, or what. In fact, I don't think the browsers are doing anything "wrong" per se either; the bug might be on Ebitengine's handling of floating returns on layout. I honestly don't know what's the platform, so I just explained it with words. In theory, it's a "with certain display scale factors and floating point arguments in layout, the result will not look sharp", in general, not platform-specific. It just happens that on Windows, the decimal window sizes given don't end up being problematic. In fact, maybe LayoutF should document a bit more what happens with decimal returned values, the whole situation is unclear to me. |
In this case please leave the list as it is next time, thanks I think checking Windows and Browsers would be fine for this case. |
Quick note, but I've observed that when logicalSize*scale ends in .75, blurriness is higher than with .25 and .5. Ebitengine is internally using the ceil function. Maybe we could try the floor function instead? Maybe browsers are truncating directly? This might also explain why no matter what I try to do on |
I was testing a bit more today, trying to clamp instead of ceiling and so on, and had no success, but noticed this warning on firefox:
I don't know how to get the gl context that ebitengine is using to gets its dimensions right now, but might be worth checking out (unless this warning is issued at the start of the rendering during setup or something). I also tried to ceil the ui context screenWidth and screenHeight on layoutGame, but that didn't help the situation either. We should definitely debug the actual gl context size next to see whether there's a mismatch there (but neither floor nor ceil are solving the issue even when tweaked directly on the ebitengine internals, so I'm a bit at a loss here). I also tested on Chrome to make sure the behavior is the same across browsers, and it is; the only difference seems to be that Chrome isn't giving any warning. |
Minor note: while it was filed later, #2978 should be addressed before this, as it might help or change something. I will test again when that's resolved. |
Ebitengine Version
v2.7.0
Go Version (
go version
)go1.21.1
What steps will reproduce the problem?
Running the following program will always result in non-blurry results on desktop, but it's inconsistent on browsers (except if the application is fullscreen) whenever fractional display scaling is being used. Some window sizes will lead to fractional values on the returned layout dimensions.
For context, the program uses
LayoutF
and displays the relevant parameters related to high-resolution rendering (example visual output after the code):Despite the given program, notice that every Ebitengine application/game can suffer this problem. The given program is simply useful to illustrate the problem while helping debug the critical related variables. In different programs the blurriness will be more or less obvious.
What is the expected result?
Consistently sharp rendering on the browser, in the same way that already happens on desktop.
As of now, it's not possible to guarantee high quality rendering on the browser.
What happens instead?
Blurry rendering on the browser.
Anything else you feel useful to add?
Tested on Windows 11, with different fractional scalings (1.25, 1.5, 1.75), on Firefox and Chrome. More testing might be necessary on Linux/Mac desktops too.
Given the attached program:
DrawFinalScreen()
GeoM
at runtime. No combination of these help get rid of the blurriness.F
.The text was updated successfully, but these errors were encountered: