Render Textures created larger than the size of the default canvas would be automatically clipped when drawn to in WebGL. They now reset the gl scissor and drawing height property in order to draw to their full size, regardless of the canvas size. Fix phaserjs#4139

Author: photonstorm

CHANGELOG.md

@@ -25,6 +25,7 @@
 * `WebGLRenderer.setBlendMode` has a new optional argument `force`, which will force the given blend mode to be set, regardless of the current settings.
 * The method `DisplayList.sortGameObjects` has been removed. It has thrown a runtime error since v3.3.0! which no-one even spotted, a good indication of how little the method is used. The display list is automatically sorted anyway, so if you need to sort a small section of it, just use the standard JavaScript Array sort method (thanks ornyth)
 * The method `DisplayList.getTopGameObject` has been removed. It has thrown a runtime error since v3.3.0! which no-one even spotted, a good indication of how little the method is used (thanks ornyth)
+* `WebGLRenderer.setFramebuffer` has a new optional boolean argument `updateScissor`, which will reset the scissor to match the framebuffer size, or clear it.
 
 ### Bug Fixes
 
@@ -40,6 +41,7 @@
 * `Array.Matrix.ReverseColumns` was actually reversing the rows, but now reverses the columns.
 * UnityAtlas now sets the correct file type key if using a config file object.
 * Starting with version 3.13 in the Canvas Renderer, it was possible for long-running scripts to start to get bogged-down in `fillRect` calls if the game had a background color set. The context is now saved properly to avoid this. Fix #4056 (thanks @Aveyder)
+* Render Textures created larger than the size of the default canvas would be automatically clipped when drawn to in WebGL. They now reset the gl scissor and drawing height property in order to draw to their full size, regardless of the canvas size. Fix #4139 (thanks @chaoyang805 @iamchristopher)
 
 ### Examples and TypeScript
 

src/gameobjects/rendertexture/RenderTexture.js

@@ -122,8 +122,7 @@ var RenderTexture = new Class({
         this.globalAlpha = 1;
 
         /**
-         * The HTML Canvas Element that the Render Texture is drawing to.
-         * This is only populated if Phaser is running with the Canvas Renderer.
+         * The HTML Canvas Element that the Render Texture is drawing to when using the Canvas Renderer.
          *
          * @name Phaser.GameObjects.RenderTexture#canvas
          * @type {HTMLCanvasElement}
@@ -405,15 +404,15 @@ var RenderTexture = new Class({
 
         if (this.gl)
         {
-            this.renderer.setFramebuffer(this.framebuffer);
+            this.renderer.setFramebuffer(this.framebuffer, true);
 
             var gl = this.gl;
 
             gl.clearColor(ur / 255.0, ug / 255.0, ub / 255.0, alpha);
 
             gl.clear(gl.COLOR_BUFFER_BIT);
 
-            this.renderer.setFramebuffer(null);
+            this.renderer.setFramebuffer(null, true);
         }
         else
         {
@@ -438,15 +437,15 @@ var RenderTexture = new Class({
         {
             if (this.gl)
             {
-                this.renderer.setFramebuffer(this.framebuffer);
+                this.renderer.setFramebuffer(this.framebuffer, true);
 
                 var gl = this.gl;
 
                 gl.clearColor(0, 0, 0, 0);
 
                 gl.clear(gl.COLOR_BUFFER_BIT);
 
-                this.renderer.setFramebuffer(null);
+                this.renderer.setFramebuffer(null, true);
             }
             else
             {
@@ -540,7 +539,7 @@ var RenderTexture = new Class({
 
         if (gl)
         {
-            this.renderer.setFramebuffer(this.framebuffer);
+            this.renderer.setFramebuffer(this.framebuffer, true);
 
             var pipeline = this.pipeline;
 
@@ -550,7 +549,7 @@ var RenderTexture = new Class({
 
             pipeline.flush();
 
-            this.renderer.setFramebuffer(null);
+            this.renderer.setFramebuffer(null, true);
 
             pipeline.projOrtho(0, pipeline.width, pipeline.height, 0, -1000.0, 1000.0);
         }
@@ -622,8 +621,8 @@ var RenderTexture = new Class({
 
             if (gl)
             {
-                this.renderer.setFramebuffer(this.framebuffer);
-    
+                this.renderer.setFramebuffer(this.framebuffer, true);
+
                 var pipeline = this.pipeline;
 
                 pipeline.projOrtho(0, this.width, 0, this.height, -1000.0, 1000.0);
@@ -632,7 +631,7 @@ var RenderTexture = new Class({
 
                 pipeline.flush();
 
-                this.renderer.setFramebuffer(null);
+                this.renderer.setFramebuffer(null, true);
 
                 pipeline.projOrtho(0, pipeline.width, pipeline.height, 0, -1000.0, 1000.0);
             }

src/renderer/webgl/WebGLRenderer.js

@@ -1162,11 +1162,14 @@ var WebGLRenderer = new Class({
      * @since 3.0.0
      *
      * @param {WebGLFramebuffer} framebuffer - The framebuffer that needs to be bound.
+     * @param {boolean} [updateScissor=false] - If a framebuffer is given, set the gl scissor to match the frame buffer size? Or, if `null` given, pop the scissor from the stack.
      *
      * @return {this} This WebGLRenderer instance.
      */
-    setFramebuffer: function (framebuffer)
+    setFramebuffer: function (framebuffer, updateScissor)
     {
+        if (updateScissor === undefined) { updateScissor = false; }
+
         var gl = this.gl;
 
         var width = this.width;
@@ -1188,6 +1191,22 @@ var WebGLRenderer = new Class({
 
             gl.viewport(0, 0, width, height);
 
+            if (updateScissor)
+            {
+                if (framebuffer)
+                {
+                    this.drawingBufferHeight = height;
+
+                    this.pushScissor(0, 0, width, height);
+                }
+                else
+                {
+                    this.drawingBufferHeight = this.height;
+
+                    this.popScissor();
+                }
+            }
+
             this.currentFramebuffer = framebuffer;
         }