Search the Community

Showing results for tags 'webgl vs canvas'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 1 result

  1. 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( 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.