Add camera flash and fade effects.

src/cameras/2d/effects/Fade.js

@@ -301,30 +301,11 @@ var Fade = new Class({
      * @method Phaser.Cameras.Scene2D.Effects.Fade#postRenderWebGL
      * @since 3.5.0
      *
-     * @param {Phaser.Renderer.WebGL.Pipelines.MultiPipeline} pipeline - The WebGL Pipeline to render to. Must provide the `drawFillRect` method.
-     * @param {function} getTintFunction - A function that will return the gl safe tint colors.
-     *
-     * @return {boolean} `true` if the effect drew to the renderer, otherwise `false`.
+     * @return {boolean} `true` if the effect should draw to the renderer, otherwise `false`.
      */
-    postRenderWebGL: function (pipeline, getTintFunction)
+    postRenderWebGL: function ()
     {
-        if (!this.isRunning && !this.isComplete)
-        {
-            return false;
-        }
-
-        var camera = this.camera;
-        var red = this.red / 255;
-        var green = this.green / 255;
-        var blue = this.blue / 255;
-
-        pipeline.drawFillRect(
-            camera.x, camera.y, camera.width, camera.height,
-            getTintFunction(blue, green, red, 1),
-            this.alpha
-        );
-
-        return true;
+        return this.isRunning || this.isComplete;
     },
 
     /**

src/cameras/2d/effects/Flash.js

@@ -279,30 +279,11 @@ var Flash = new Class({
      * @method Phaser.Cameras.Scene2D.Effects.Flash#postRenderWebGL
      * @since 3.5.0
      *
-     * @param {Phaser.Renderer.WebGL.Pipelines.MultiPipeline} pipeline - The WebGL Pipeline to render to. Must provide the `drawFillRect` method.
-     * @param {function} getTintFunction - A function that will return the gl safe tint colors.
-     *
-     * @return {boolean} `true` if the effect drew to the renderer, otherwise `false`.
+     * @return {boolean} `true` if the effect should draw to the renderer, otherwise `false`.
      */
-    postRenderWebGL: function (pipeline, getTintFunction)
+    postRenderWebGL: function ()
     {
-        if (!this.isRunning)
-        {
-            return false;
-        }
-
-        var camera = this.camera;
-        var red = this.red / 255;
-        var green = this.green / 255;
-        var blue = this.blue / 255;
-
-        pipeline.drawFillRect(
-            camera.x, camera.y, camera.width, camera.height,
-            getTintFunction(blue, green, red, 1),
-            this.alpha
-        );
-
-        return true;
+        return this.isRunning;
     },
 
     /**

src/renderer/webgl/renderNodes/Camera.js

@@ -5,7 +5,7 @@
  */
 
 var CameraEvents = require('../../../cameras/2d/events');
-const GetColor32 = require('../../../display/color/GetColor32');
+var GetColor32 = require('../../../display/color/GetColor32');
 var Class = require('../../../utils/Class');
 var RenderNode = require('./RenderNode');
 
@@ -58,12 +58,14 @@ var Camera = new Class({
             currentContext.use();
         }
 
-        // Draw camera fill.
+        var FillCamera = this.manager.nodes.FillCamera;
+
+        // Draw camera background.
         if (camera.backgroundColor.alphaGL > 0)
         {
             var bg = camera.backgroundColor;
             var col = GetColor32(bg.red, bg.green, bg.blue, bg.alpha);
-            this.manager.nodes.FillRect.run(currentContext, camera, parentTransformMatrix, cx, cy, cw, ch, col, col, col, col, 2);
+            FillCamera.run(currentContext, camera, col);
         }
 
         // Draw children.
@@ -72,11 +74,17 @@ var Camera = new Class({
         // Draw camera post effects.
 
         var flashEffect = camera.flashEffect;
-        var fadeEffect = camera.fadeEffect;
-
-        if (flashEffect.isRunning)
+        if (flashEffect.postRenderWebGL())
         {
-            // TODO
+            col = GetColor32(flashEffect.red, flashEffect.green, flashEffect.blue, flashEffect.alpha * 255);
+            FillCamera.run(currentContext, camera, col);
+        }
+        
+        var fadeEffect = camera.fadeEffect;
+        if (fadeEffect.postRenderWebGL())
+        {
+            col = GetColor32(fadeEffect.red, fadeEffect.green, fadeEffect.blue, fadeEffect.alpha * 255);
+            FillCamera.run(currentContext, camera, col);
         }
 
         // Finish rendering.

src/renderer/webgl/renderNodes/FillCamera.js

@@ -0,0 +1,51 @@
+/**
+ * @author       Benjamin D. Richards <benjamindrichards@gmail.com>
+ * @copyright    2013-2024 Phaser Studio Inc.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+var Class = require('../../../utils/Class');
+var RenderNode = require('./RenderNode');
+
+/**
+ * @classdesc
+ * A RenderNode which fills a camera with a color.
+ *
+ * @class FillCamera
+ * @memberof Phaser.Renderer.WebGL.RenderNodes
+ * @constructor
+ * @since 3.90.0
+ * @extends Phaser.Renderer.WebGL.RenderNodes.RenderNode
+ * @param {Phaser.Renderer.WebGL.RenderNodes.RenderNodeManager} manager - The manager that owns this RenderNode.
+ * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - The renderer that owns this RenderNode.
+ */
+var FillCamera = new Class({
+    Extends: RenderNode,
+
+    initialize: function FillCamera (manager, renderer)
+    {
+        RenderNode.call(this, 'FillCamera', manager, renderer);
+    },
+
+    /**
+     * Fills the camera with a color.
+     * This uses `FillRect`, so it is batched with other quads.
+     *
+     * @method Phaser.Renderer.WebGL.RenderNodes.FillCamera#run
+     * @since 3.90.0
+     * @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The context currently in use.
+     * @param {Phaser.Cameras.Scene2D.Camera} camera - The camera to fill.
+     * @param {number} color - The color to fill the camera with.
+     */
+    run: function (drawingContext, camera, color)
+    {
+        var cx = camera.x;
+        var cy = camera.y;
+        var cw = camera.width;
+        var ch = camera.height;
+
+        this.manager.nodes.FillRect.run(drawingContext, camera, null, cx, cy, cw, ch, color, color, color, color, 2);
+    }
+});
+
+module.exports = FillCamera;

src/renderer/webgl/renderNodes/RenderNodeManager.js

@@ -7,6 +7,7 @@
 var Class = require('../../../utils/Class');
 var BatchTexturedTintedRawQuads = require('./BatchTexturedTintedRawQuads');
 var Camera = require('./Camera');
+var FillCamera = require('./FillCamera');
 var FillRect = require('./FillRect');
 var GetSBRQuadMatrices = require('./GetSBRQuadMatrices');
 var ImageQuadrangulateBatch = require('./ImageQuadrangulateBatch');
@@ -50,6 +51,7 @@ var RenderNodeManager = new Class({
         this.nodes = {
             BatchTexturedTintedRawQuads: new BatchTexturedTintedRawQuads(this, renderer),
             Camera: new Camera(this, renderer),
+            FillCamera: new FillCamera(this, renderer),
             FillRect: new FillRect(this, renderer),
             GetSBRQuadMatrices: new GetSBRQuadMatrices(this, renderer),
             ImageQuadrangulateBatch: new ImageQuadrangulateBatch(this, renderer),