How to get rid of these gaps?

[wayfinder]

Hi there! 

 

I modified the code from pixi's rope object to allow mapping an arbitrary convex quadrilateral UV area to an arbitrary convex quadrilateral screen area, by splitting all of it into triangles and using affine transformations on them. This works well, except for miniscule gaps between quads which I cannot seem to get rid of:

 

 

These gaps do not seem to appear between the triangles that make up the quads, only between quads. I've tried drawing with a large overdraw value but it doesn't help. If I expand just the screen triangles and not the UV coordinates, the stuff ends up in the wrong place, and if I expand the UV coords along with the screeen coords, it looks exactly as if I never changed anything

 

Does anybody have an idea on what to do? 

 

 

 

 

[powerfear]

Would it be possible to perhaps have a minimal example reproducing this on codepen or jsfiddle?

[wayfinder]

I am not sure I can make a minimal version but I'll try!

[wayfinder]

Ok, here's a jsfiddle: http://jsfiddle.net/knducLvd/

 

You can see the gap between the quads. In the code you'll see that the coordinates of the adjacent vertices at the top there are identical ({x: 300.243572452, y: 100}). Setting the x value to an integer seems to leave no gap.

[wayfinder]

hahaaaaaa! i think i solved it I needed the overdraw, but I was clipping the triangles BEFORE i was applying it - further testing pending, after moving the clip() it seems to work! wootles.

 

 

edit: further testing reveals my joy was premature. still getting gaps.

[powerfear]

Setting the scalemode to nearest instead of linear seem to make it dissapear:

 

Add this line before any other code:

PIXI.scaleModes.DEFAULT = 1;

There's probably a solution that also work with linear scaling thought.

[wayfinder]

This particular example only, apparently. My larger test case still has gaps with nearest neighbour scaling :/

[powerfear]

Making antialias false also seem to make it disapear in the example not sure if it would also work in your larger test case

var game = new Phaser.Game(640, 480, Phaser.AUTO, 'test', null, false, false);

[wayfinder]

I *think* that's the same setting though, isn't it?

[powerfear]

It's not it's extra option pixi passes when getting the webgl context, but I just realized it only work for chrome so it's not a good solution. Pretty interesting also is that firefox has gaps between the triangle while chrome only has a gap between the quads.

[agamemnus]

Generally, Firefox has different rounding methods throughout its Canvas rendering engine. It does a lot more rounding, making things faster sometimes, but less smooth.

 

... Anyway, this might be a bug in pixi.js, because Firefox can do anti-aliasing in canvas elements just like Chrome, but the naming is different. Not sure if that anti-alias stuff applies to webgl, though...