Visual Artifact on Odd Height

Expected Behavior

Grid of sprites rendered the same way regardless of canvas dimensions

Current Behavior

Some sprites appear off by one pixel if the canvas has an odd height.

Even height (correct):

const app = new PIXI.Application({width: 640, height: 480, backgroundColor: 0xff0000, resolution: window.devicePixelRatio || 1,});

Odd height (incorrect):

const app = new PIXI.Application({width: 640, height: 481, backgroundColor: 0xff0000, resolution: window.devicePixelRatio || 1,});

Here you can see the red background is leaking through the grid of sprites because some of the sprites seem to be clipped by a pixel. My gut feeling is that this is some kind of coordinate system floating point rounding error?

Possible Solution

Currently my workaround is to just make sure the initial height is always an even number. The problem though is that this canvas normally has resizeTo set, and if the parent container has an odd height, this problem occurs. What’s interesting is that this problem occurs even after resizing to an even height, so long as the initial container was an odd height. If the initial container was an even height, I never see any problems, even when resizing to an odd height.

Steps to Reproduce

I will post a comment once I can get a jsfiddle working

Environment

• pixi.js version: 5.3.3 and 5.3.7
• Browser & Version: latest Chrome, Edge
• OS & Version: Windows 10

[ivanpopelyshev]

or use linea filter filtering (scaleMode). As i said, Welcome To OpenGL.

[RPGillespie6]

Understood. It’s just counterintuitive to me that a texture created from a base texture using integer dimensions:

let tex = new PIXI.Texture(base_texture, new PIXI.Rectangle(0, 0, 16, 16));

Can change or clip into adjacent pixels in the base texture later if app.stage.position x or y becomes non-integral.

If it’s not pixi.js’s fault, we can go ahead and close this issue. But it’s still a counterintuitive graphical quirk so I feel like it needs to be addressed somewhere in the stack, if not WebGL, then a note in the docs or something?