How to reduce draw call, seems 2 Spirit will call 2 drawElement

[linonetwo]

I'm drawing two tile using two TilingSprite.

    <Container>
      <TilingSprite
        width={tileWidthHeight[0]}
        height={tileWidthHeight[1]}
        anchor={centerAnchor}
        tilePosition={bgTilePosition}
        interactive
        x={props.x}
        y={props.y}
        cursor="pointer"
        texture={tileTexture}
      />
      <TilingSprite
        width={tileWidthHeight[0]}
        height={tileWidthHeight[1]}
        anchor={centerAnchor}
        tilePosition={fgTilePosition}
        interactive
        x={props.x}
        y={props.y}
        cursor="pointer"
        texture={tileTexture}
      />
    </Container>

By using inspector, I see there are two drawElement calls, and probably texture is passing to GPU 2 times. Can this be optimized? Or just I misunderstnd the output of Spector.js browser extension?

[michalochman]

@linonetwo are you sure this happens only when using react-pixi-fiber? Have you checked that the same is not happening when using PIXI without React? Also in development mode, React renders twice when using StrictMode.

[linonetwo]

Two draw call draws different tile, and I overlap foreground spirit with background spirit, so this is not due to StrictMode (I'm using ts so not using StrictMode).

Maybe it is from PIXI itself.
Someone from our game dev team said
"because they have a different uniform, shader need to process uniform, if they are the same, then vertex can be merged, the batch rendered".
But I'm not familiar with graphics, so not sure about what uniform is, I will check it out later.

[linonetwo]

I tried this in the playground https://www.pixiplayground.com/#/edit/5FqGAQvT0QGOBXix1R_um , seems Spirit will batch drawcall, and TilingSprite will not. This is a Pixi problem, sorry for bordering.