Search the Community
Showing results for tags 'webgl vs canvas'.
Found 1 result
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.