oooh bilinear does improve it but not all the way. Thank you for making a repro!
You will probably need a 1 to 1 mapping between screen pixel and canvas pixels.
So I guess you need to setHardwareScalingLevel to 1 / window.devicePixelRatio
Also, you probably need to position things with rounded values like here:
spriteMap.position = new BABYLON.Vector3(Math.floor(widthInTiles * tileWidth / 2), Math.floor(heightInTiles * tileHeight / 2), 0);
and finally your canvas might need to use css to fully align the canvas and screen pixels: Pixel-perfect rendering with devicePixelContentBox
1 Like
Great tips! I’ll mess with these when I get seams on the sprite map fixed.
Could you please please take a look? Thanks
I don’t have time right now, sorry.
Yeah you’re never going to take a look I know.
1 Like
This might actually fix it 
Hardware scaling made the seams smaller.
Trying the others.
spriteMap.position is 0,0,0
Those seems to be related to the sampling precision
Try this shader changes as well https://playground.babylonjs.com/#IUVPK5#31
1 Like
FIXED OH MY GOD THANK YOU!!!
YES YES YES YES yes
oh there’s still a tiny tiny tiny tiny seam I can sometimes see while moving
The best way to get rid of all artifacts would be to rebuilt your spritemap and add a 1px border in each sprite as a dupplicate of the color so no matter how much error you introduce with precision or whatever, it would be all good
2 Likes
Thank you @sebavan, I have my three kids at home for the summer so it’s been rather hard to sit down and code other than my two jobs. I appreciate you helping on this.
Also yeah you are probably going to have to do some diffuse on the sprites themselves, or we will have to change the sampling mode to repeat that last pixel on the edge. Just diffusing the sprites would probably be easier.
Still having a bit of trouble with tiny randomly spreading seams.
This shows the tiles in Tiled.
Examples
The full sprite sheet.
The colors being rendered don’t seem to be an edge.
Any ideas?
I’ll make a playground soon.
So it looks like there is a different issue. I added a 1px border to all tiles and at first I did this with a transparent border. The lines still showed up. So I switched to a 1px extrusion of the border of the tile. This made the lines go away but now the whole map is making this wave through the pixels while the camera moves.
It sounds like sampling error. I really which there was more time in my days so I could dive in with you.
Wasn’t there an IQ article you posted that covered how to fix stuff like this? Looking back on this thread must have missed it or it was on a different post.