Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

WebGL mode flickering, is unsmoothed. Canvas crisp&clear.


s4m_ur4i
 Share

Recommended Posts

Sorry for the long post, but I have to be sure that you got all the informations:
Was testing a lot to be sure that there is no mistake on my side.

So I took some time and tried different cases WebGL / Canvas
including all that smoothing = false stuff and also different approaches:

game.stage.smoothed = false;
PIXI.scaleModes.DEFAULT = PIXI.scaleModes.NEAREST;
Phaser.Canvas.setImageRenderingCrisp(game.canvas);
game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;  
game.scale.setUserScale(1,1);
game.renderer.renderSession.roundPixels = true;  
Phaser.Canvas.setImageRenderingCrisp(this.game.canvas)  

The CSS image-rendering works for Canvas, even for 4k dispalys and stuff. But webGL is really blurry (it gets better with some configuration but not even close to canvas quality).
So I tested a bit more. You can reproduce it any time, just by setting up a blank game and animate one spritesheet which is: standing still and waving just one part (a hand or s.t.).

Just make a Person who shakes a hand and does not move anything else.
In Canvas: the sprite stands perfectly still and shaking the hand
in WebGL: the sprite flickers - in fact the graphic itself isn't able to do that since it is pixel perfect aligned. But WebGL mode seems like to render it that way.
I attached two files: Notice the flickering of the dwarf graphic in webGL (webGLbug.gif - that one with the purple minions in it)?

First gif attached is canvas,
second is webGL (with purple minions in it)


I do not know if this is only related to 2.7.x or even before. I am familiar with browser support of image-rendering and stuff. But it is already there.
I am testing on a Mac OSX 10.11, Win 10, via Chrome: Chromium 51, V8; NwJS 15.03, NwJS 13.0;

tested with phaser 2.7.x, but also appearing in older versions, oldest I tested; 2.4.8

So the thing is, you can optimize the webGL output with some code from above (some not working; tested it one after another).
But WebGL does not even get close to the sharpness of Canvas. This applies for 1920x1080 resolution, 2100 x 1280, 2560x1440 and 1024x 768 on mac / pc, m3 / i7, blank game, one animated spritesheet - reproducable.

It's nothing that you see on first sight, it's more like... - something is wrong, isn't it? - and when you take a closer look, you see this.

canvasclear.gif

webGLbug.gif

Link to comment
Share on other sites

  • 2 months later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...