From 8ea2bffb9c8a321b979a018e432697e53e96e434 Mon Sep 17 00:00:00 2001 From: Richard Davey Date: Wed, 7 Nov 2018 16:01:21 +0000 Subject: [PATCH] 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 --- CHANGELOG.md | 2 ++ .../rendertexture/RenderTexture.js | 21 +++++++++---------- src/renderer/webgl/WebGLRenderer.js | 21 ++++++++++++++++++- 3 files changed, 32 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fa86d50ce..3f946f94d 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/gameobjects/rendertexture/RenderTexture.js b/src/gameobjects/rendertexture/RenderTexture.js index ff521956d..e1249dff7 100644 --- a/src/gameobjects/rendertexture/RenderTexture.js +++ b/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,7 +404,7 @@ var RenderTexture = new Class({ if (this.gl) { - this.renderer.setFramebuffer(this.framebuffer); + this.renderer.setFramebuffer(this.framebuffer, true); var gl = this.gl; @@ -413,7 +412,7 @@ var RenderTexture = new Class({ gl.clear(gl.COLOR_BUFFER_BIT); - this.renderer.setFramebuffer(null); + this.renderer.setFramebuffer(null, true); } else { @@ -438,7 +437,7 @@ var RenderTexture = new Class({ { if (this.gl) { - this.renderer.setFramebuffer(this.framebuffer); + this.renderer.setFramebuffer(this.framebuffer, true); var gl = this.gl; @@ -446,7 +445,7 @@ var RenderTexture = new Class({ 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); } diff --git a/src/renderer/webgl/WebGLRenderer.js b/src/renderer/webgl/WebGLRenderer.js index cc6354be7..d39033a89 100644 --- a/src/renderer/webgl/WebGLRenderer.js +++ b/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; }