Bug: Custom fragment shader filter vTextureCoord does not behave as expected

[zstiggz]

Current Behavior

I'm using pixi with @pixi/react. I'm trying to create a simple fragment shader filter that's applied to a Graphics object. It works as expected, until I place the Graphics object inside a Container with a scale. At that point, adjusting the scale of the Container seems to shift the vTextureCoord in my glsl code. The strangest part is, at various scale levels, the filter appears to reset, and the filter behaves as expected once again.

Expected Behavior

I would expect the vTextureCoord range to correctly map from 0 - 1 on my Graphics object's bounds, regardless of the parent container's scale.

Steps to Reproduce

Here's a CodeSandbox link to the problem. https://codesandbox.io/s/pensive-cache-8zkitk?file=/src/App.tsx

The code is as follows.

const fragmentShader = `

varying vec2 vTextureCoord;

void main() {
  
  vec2 uv = vTextureCoord;
  gl_FragColor = vec4(uv.x, 0, uv.y, 1.);
}
`;

export function useTestShader() {
  return useMemo(() => {
    const f = new PIXI.Filter(undefined, fragmentShader);
    f.autoFit = false;
    return [f];
  }, []);
}

export default function App() {
  const [zoom, setZoom] = useState(1);

  const draw = useCallback((g: PIXI.Graphics) => {
    g.clear();
    g.beginFill("red");
    g.drawRect(0, 0, 256, 256);
    g.endFill();
  }, []);

  const filter = useTestShader();

  return (
    <>
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Container scale={zoom}>
          <Graphics draw={draw} width={256} height={256} filters={filter} />
        </Container>
      </Stage>
      <div className="buttons">
        <button onClick={() => setZoom((z) => z + 0.1)}>+</button>
        <button onClick={() => setZoom((z) => z - 0.1)}>-</button>
      </div>
    </>
  );
}

Environment

• @pixi/react version: 7.0.3
• pixi.js version: 7.2.3
• React version: 18.2.0
• ReactDOM version: 18.2.0
• Browser & Version: Chrome 113.0.5672.126
• OS & Version: macOS 13.3.1
• Running Example: https://codesandbox.io/s/pensive-cache-8zkitk?file=/src/App.tsx:177-1177

Possible Solution

No response

Additional Information

I also posted this issue on the main pixi.js repo here: https://github.com/pixijs/pixijs/issues/9447