Drawing a Spine GameObject to RenderTexture/DynamicTexture draws it to the wrong location; can cause WebGL Invalid Operation warnings if anything else is drawn to the RT/DT at the same time

[Stever1388]

Version

• Phaser Version: 3.86.0 and Spine 3.8/4.1

• Operating system: Windows 11

• Browser: Chrome, Edge, Firefox

Description

Drawing a Spine GameObject to a RenderTexture/DynamicTexture results in the Spine not showing up at the correct location within the RT/DT. If you happen to draw something else to the RT/DT at the same time (such as an Image), you get WebGL Invalid Operation: bufferSubData: no buffer warnings, and some/all of the things you tried to draw to the RT/DT will not show up in the RT/DT.

Example Test Code

The following code will demonstrate the issue:

// in your scene preload function
preload()
{
    // load your spine objects
    this.load.spine("spinekey", "spine.json", "spine.atlas", true);
}

create()
{
    // add an image
    this.add.image(0,0, "key", "frame");
    
    // add a spine object - I tested using Spine 3.8 and Spine 4.1 versions
    this.add.spine(400, 500, "spinekey", "animation", true);

    const dt = this.textures.addDynamicTexture("dt", this.scale.width, this.scale.height);
    dt.draw(this.children);

    // add the DT to the screen to view it
    this.add.image(0,0,"dt").setOrigin(0)
}

Additional Information

If you comment out add the "image" in the above code, you won't get the INVALID_OPERATION warning, but the Spine won't be drawn to the same spot it is on the screen.

You can get a "correct" version of the screen/DT by using a snapshot instead:

// in create
this.renderer.snapshot(snapshot => {
    this.textures.addImage("snapshot", snapshot);
    this.add.image(0,0,"snapshot").setOrigin(0);
})

I don't know how helpful it will be, but here is the stacktrace that the warning gives.

flush	@	phaser.js:178112
flush	@	phaser.js:175171
flush	@	phaser.js:181016
setBlendMode	@	phaser.js:181198
rebind	@	phaser.js:175877
SpineGameObjectWebGLRenderer	@	SpineWebGLPlugin.js:16238
batchGameObject	@	phaser.js:213566
batchGroup	@	phaser.js:213496
batchList	@	phaser.js:213454
batchDraw	@	phaser.js:213260
draw	@	phaser.js:212873