WebGL: RenderTexture frames do not render correctly

Version

• Phaser Version: 3.55, 3.6-beta4
• Operating system: Windows (but also probably OSX)
• Browser: Chrome, FF, etc

Description

Adding and referencing frames on a RenderTexture produces visual errors, depending on how that RT frame is rendered. This only occurs in WebGL mode.

The following demonstrates the expected behavior, using Canvas mode. Each quadrant/square is a separate frame on the original render texture.

The following demonstrates the exact same code, but in WebGL mode:

With some fiddling, it’s apparent that there is some issue with Y-flipping; If I adjust the Y-coords of the frames*, I’m able to get some frames to render - albeit incorrectly flipped: * ex: rt.texture.add('my-frame', 0, x, y, frameWidth, textureHeight - frameHeight); - Note the textureHeight - adjustment

I believe there are two issues at hand here (based on my current understanding of the Phaser codebase):

• Frames registered on RenderTextures need to be Y-Flipped
• Certain rendering objects need to account for Y-flipped textures

Example Test Code

This codepen reproduces this issue - note the USE_WEBGL flag up top to easily change the current rendering mode.

https://codepen.io/andymikulski/pen/oNoyBGy

The gist, in psuedocode, is really:

const rt = this.add.renderTexture(...);
drawStuffToRT(rt);
rt.saveTexture('my-texture');
rt.texture.add('my-frame', frameX, frameY, frameWidth, frameHeight);

this.add.image(x, y, 'my-texture', 'my-frame'); // Renders upside down - or not at all

Additional Information

I have dug around the code and noticed that checking if a texture is a glTexture and y-flipping accordingly seems to work, but this requires touching MultiPipeline, Blitter, etc., and I wonder if there is a more ‘central’ fix available.

I’m happy to work on these solutions, but I wanted to get some sort of input before putting in the effort! Thank you!

[photonstorm]

Spent some more time on this today - and getting close to a fix. Just trying to make it universal, which isn’t easy.

[photonstorm]

Ok, a fix for this is now in the master branch. Use it as follows:

        const origin = this.add.renderTexture(0, 0, 256, 256).setIsSpriteTexture(true);

        origin.draw('mario', 0, 0);

        origin.saveTexture('test-texture');