Blending broken using RenderTextures & WebGL

[sjb933]

Version

• Phaser Version: 3.55.2
• Operating system: Windows 10
• Browser: Chrome

Description

Additive blending is not working when rendering to a RenderTextures when using WebGL.

Example Test Code

Minimal sample with 2 circles that should be blended: https://codepen.io/sjb933/pen/wvPgpWq?editors=1010

You can fix the blending by either:

1. Changing USE_WEBGL to false will activate canvas rendering which blends as expected.
2. Use a version of Phaser <3.50. You can uncomment the second script line in the HTML file to import older Phaser@3.24.1

I'm including the same sample code below

// With webgl disabled (canvas mode), blending works regardless of Phaser version
// With webgl enabled, blending works in Phaser < 3.50, and doesn't work in latest
const USE_WEBGL = true;

let config = {
  type: USE_WEBGL ? Phaser.WEBGL : Phaser.CANVAS,
  width: 600,
  height: 400,
  scene: {
    create: create,
  }
};

let game = new Phaser.Game(config);

function create() {
  rt = this.add.renderTexture(0, 0, 600, 400);
  
  layer1 = createLayer(this, 200, 200, 0xff0000);
  layer2 = createLayer(this, 400, 200, 0x0000ff);
  
  // draw the layers with additive blending
  layer1.setBlendMode(Phaser.BlendModes.ADD);
  layer2.setBlendMode(Phaser.BlendModes.ADD);
  rt.draw(layer1);
  rt.draw(layer2);
}

function createLayer(self, x, y, color) {
  let graphics = self.make.graphics();
  graphics.fillStyle(color);
  graphics.fillCircle(x, y, 150);
  return graphics;
}

[photonstorm]

Thanks for opening this issue, and for submitting a PR to fix it. We have merged your PR into the master branch and attributed the work to you in the Change Log. If you need to tweak the code for whatever reason please submit a new PR.