Pixels are blurry depending on their position

[ntrrgc]

I noticed text was somewhat (sometimes very noticeably) blurry in Cocos2D, even though I was careful enough not to scale it up or down and used a design resolution matching exactly the display resolution, so I made a few tests:

I created an array of Test labels, each of them placed in an integer pixel.

In canvas mode everything looks fine:

In WebGL mode almost everything looks wrong:

I played with offsets a bit... and I found that text can indeed look mostly fine, but only if it's inside lucky coords (this image is generated identically to the previous one with x' = x + 0.9 px and y' = y + 0.5 px):

This issue affects not only text, but everything that has a position and is eventually rendered, like this very simple bitmap crosshair sprite:

Test code for text:

cc.director.setClearColor(cc.color(255, 255, 255))

var positions = [];
for (var i = 0; i < 10; i++) {
  for (var j = 0; j < 10; j++) {
    positions.push(cc.p(40 * (i+1), 40 * (j+1)))
  }
}

positions.forEach(function (pos) {
  this.lblTest = new cc.LabelTTF("Test", "Courier New", 12);
  this.lblTest.setFontFillColor(cc.color(0,0,0));
  this.lblTest.setHorizontalAlignment(cc.TEXT_ALIGNMENT_LEFT)
  this.lblTest.setVerticalAlignment(cc.VERTICAL_TEXT_ALIGNMENT_BOTTOM)
  this.addChild(this.lblTest);
  this.lblTest.setPosition(pos);
}.bind(this));

Test code for crosshairs:

cc.director.setClearColor(cc.color(255, 255, 255))

var positions = [];
for (var i = 0; i < 25; i++) {
  for (var j = 0; j < 25; j++) {
    positions.push(cc.p(20 * (i+1), 20 * (j+1)))
  }
}

positions.forEach(function (pos) {
  this.crosshair = new cc.Sprite(cc.spriteFrameCache.getSpriteFrame("crosshair"))
  this.crosshair.setPosition(pos)
  this.addChild(this.crosshair)
}.bind(this));

[ntrrgc]

I've found this is caused by the 3D perspective projection used in Cocos2D.

The camera distance (ZEye) is far enough so that the view fits in the frustum, but its value is not precise enough. In consequence the projected image is very slightly zoomed in... enough to cause the artifacts shown above.

After a series of experiments I've found a more precise value for this constant (see PR). With the new constant sprites positioned precisely are displayed accurately.

Unfortunately this is not the end of the blurry text issue. Now the blur is not dependent on position, but still present for some reason.