WebGLPipeline.resizeUniform is a new property that is defined in the WebGLPipelineConfig. This is a string that defines a uResolution property, or similar, within the pipeline shader. If the WebGL Renderer resizes, this uniform will now be updated automatically as part of the pipeline resize method. It has been added to both the Multi and Mobile pipelines as default. This fixes issues where the pipelines were rendering with old resolution values, causing graphical glitches in mostly pixel-art games. Fix #6674

src/renderer/webgl/WebGLPipeline.js

@@ -447,6 +447,17 @@ var WebGLPipeline = new Class({
          * @since 3.60.0
          */
         this.activeTextures = [];
+
+        /**
+         * If the WebGL Renderer changes size, this uniform will be set with the new width and height values
+         * as part of the pipeline resize method. Various built-in pipelines, such as the MultiPipeline, set
+         * this property automatically to `uResolution`.
+         *
+         * @name Phaser.Renderer.WebGL.WebGLPipeline#resizeUniform
+         * @type {string}
+         * @since 3.80.0
+         */
+        this.resizeUniform = GetFastValue(config, 'resizeUniform', '');
     },
 
     /**
@@ -985,6 +996,11 @@ var WebGLPipeline = new Class({
 
         this.setProjectionMatrix(width, height);
 
+        if (this.resizeUniform)
+        {
+            this.set2f(this.resizeUniform, width, height);
+        }
+
         this.emit(Events.RESIZE, width, height, this);
 
         this.onResize(width, height);
@@ -1199,7 +1215,7 @@ var WebGLPipeline = new Class({
      * This method is called if the WebGL context is lost and restored.
      * It ensures that uniforms are synced back to the GPU
      * for all shaders in this pipeline.
-     * 
+     *
      * @method Phaser.Renderer.WebGL.WebGLPipeline#restoreContext
      * @since 3.80.0
      */
@@ -2616,7 +2632,7 @@ var WebGLPipeline = new Class({
         }
 
         var renderer = this.renderer;
-        
+
         renderer.deleteBuffer(this.vertexBuffer);
 
         renderer.off(RendererEvents.RESIZE, this.resize, this);

src/renderer/webgl/pipelines/MobilePipeline.js

@@ -89,6 +89,7 @@ var MobilePipeline = new Class({
             }
         ]);
         config.forceZero = true;
+        config.resizeUniform = 'uResolution';
 
         MultiPipeline.call(this, config);
     },

src/renderer/webgl/pipelines/MultiPipeline.js

@@ -148,6 +148,7 @@ var MultiPipeline = new Class({
                 normalized: true
             }
         ]);
+        config.resizeUniform = 'uResolution';
 
         WebGLPipeline.call(this, config);
 

src/renderer/webgl/typedefs/WebGLPipelineConfig.js

@@ -14,4 +14,5 @@
  * @property {Phaser.Types.Renderer.WebGL.WebGLPipelineShaderConfig[]} [shaders] - An array of shaders, all of which are created for this one pipeline. Uses the `vertShader`, `fragShader`, `attributes` and `uniforms` properties of this object as defaults.
  * @property {boolean} [forceZero=false] - Force the shader to use just a single sampler2d? Set for anything that extends the Single Pipeline.
  * @property {(boolean|number|Phaser.Types.Renderer.WebGL.RenderTargetConfig[])} [renderTarget] - Create Render Targets for this pipeline. Can be a number, which determines the quantity, a boolean (sets quantity to 1), or an array of Render Target configuration objects.
+ * @property {string} [resizeUniform=''] - If the WebGL renderer resizes, this uniform will be set with the new width and height values as part of the pipeline resize call.
  */