Look at this example. If I set canvas width to odd number and geometry width to even, in shaders I got negative uv.x value.
The same, if I set canvasW to even and geometryW to odd.
If them both set to even or odd, uv.x is between 0 and 1 as expected.
Why does it happen and how to avoid it?
Maybe it is caused by antialiasing, especially when the “border” of a geometry does not match the “border” of pixels. Try with antialiasing turned off:
const renderer = new WebGLRenderer({ canvas, antialias: false });
I can’t see that red line when I open your example. Tried both in Firefox and Chromium (Linux).
There’s only a few pixels in your screenshots, maybe it’s some rounding errors due to large screen / pixel ratio?
Next attempt, try with pixel ratio 1:
renderer.setPixelRatio(1);
Looks like we found a right direction. Checked in windows and there is no red line, but on mac it is. And both mac and PC connected to the same monitor. renderer.setPixelRatio(1) didn’t help, and it’s ok because I have devicePixelRatio === 1. Display resolution is 3440x1440