pixels from render to texture don't match render to stage

Expected Behavior

Render Output from Type 0 looks exactly the same as Type 1

Current Behavior

They are slightly different - very hard to see if you look one at a time, so the example code flips back and forth between them.

Possible Solution

No ideas… need help finding a fix or workaround.

Steps to Reproduce

Here’s a PIXI Playground that shows the issue: https://www.pixiplayground.com/#/edit/A59BNNukCQl8K1Q5DsK6C

Environment

• pixi.js version: 6.3.2
• Browser & Version: Chrome, Version 101.0.4951.64 (Official Build) (arm64)
• OS & Version: macOS Monterey Version 12.0
• Running Example: https://www.pixiplayground.com/#/edit/A59BNNukCQl8K1Q5DsK6C

key is to watch the wiggling examples: right edge moves in/out the text “Shutterstock” wiggles around / squishes vertically

here’s the code from the Playground (which can get edited, so just in case…)

// Create our application instance
var app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0x2c3e50
});
document.body.appendChild(app.view);

const W = 800;
const H = 600;
const URL = 'https://media.snry.io/protected/us-west-2:f19449c4-cfaf-4c0d-9c6b-00b0250ccbe0/ucpeniw6e7/jpg/maxsize_640x640.jpg';

function makeContainer()
{
    const container = new PIXI.Container();

    const graphics = new PIXI.Graphics();
    graphics.beginFill(0x00FF00);
    graphics.drawRect(0, 0, W, H);
    graphics.endFill();
    container.addChild(graphics);

    const sprite = PIXI.Sprite.from(URL);
    sprite.x = Math.ceil((W - sprite.width)/2);
    container.addChild(sprite);

    return container;
}

function type0()
{
    // get the container we are drawing
    const container = makeContainer();

    // just use it directly
    return container;
}

function type1()
{
    // get the container we are drawing
    const container = makeContainer();

    // render to texture
    const renderTexture = PIXI.RenderTexture.create({width: W, height: H});
    app.renderer.render(container, {renderTexture: renderTexture});

    // read the rendered pixels
    const pixels = new Uint8ClampedArray(W * H * 4);
    const gl = app.renderer.gl;
    gl.readPixels(0, 0, W, H, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

    // IN THE REAL USE CASE THE PIXELS ARE PROCESSED HERE BY OTHER CODE
    
    // create texture from the pixels
    const pixiTexture = PIXI.Texture.fromBuffer(pixels, W, H, {format: PIXI.FORMATS.RGBA});

    // create a sprite with the texture
    const sprite = new PIXI.Sprite(pixiTexture);
    return sprite;
}

// result is very sensitive to the scale
// if scale if 1.0, it works as desired
// different scales have different amounts of horizontal and/or vertical "wiggle"
// this scale is a good example of bad wiggle
const SCALE = 0.98765;
let type = 0;
function tick()
{
    app.stage.removeChildren(0);

    let o;
    switch (type) {
        case 0: o = type0(); break;
        case 1: o = type1(); break;
    }

    const container = new PIXI.Container();
    container.scale = {x: SCALE, y: SCALE};
    container.addChild(o)
    app.stage.addChild(container);
    container.addChild(new PIXI.Text('Type ' + type));

    type = (type+1)%2;
    setTimeout(tick, 250);
}
tick();

[dev7355608]

fromBuffer creates a texture with NEAREST scale mode. This seems to be undocumented though.

const defaultBufferOptions = {
    scaleMode: SCALE_MODES.NEAREST,
    format: FORMATS.RGBA,
    alphaMode: ALPHA_MODES.NPM,
};

No difference if you pass LINEAR: https://www.pixiplayground.com/#/edit/H61NPNv3oQPriahzMvnUm

PIXI.Texture.fromBuffer(pixels, W, H, {format: PIXI.FORMATS.RGBA, scaleMode: PIXI.SCALE_MODES.LINEAR})`

[bradedelman]

Thanks. I understand better what is happening.