Dear Stack Overflow community,
I'm encountering an issue with a fragment shader I'm using in WebGL (via PIXI.js). I'm trying to render a standard isometric grid game map composed of rhomboid cells, each of which is textured and drawn tightly next to each other.
The problem arises when I attempt to render a texture on the desired tile using a fragment shader. Strange artifacts appear along the edges of the cell. Where the global red background should transition to the red background of the texture, a black pixelated edge appears. Conversely, where the texture has a black background at the edge, red pixels appear.
I've been struggling for 2 days to understand why this is happening and have not been able to find any combination of options that prevent it.
Here's a minimal and concise code snippet that reproduces this problem: https://codesandbox.io/p/sandbox/pixi-shader-problem-hsltth?file=%2Fsrc%2Findex.mjs%3A13%2C1
Attached is a screenshot illustrating the issue.
Any help or insights into resolving this issue would be greatly appreciated.
UPD1: This bug is reproduced only on Macbook M1/M2. So it seems like it is GPU-specific (holy s...)
