Sorting out the scissor stack

Author: photonstorm

src/renderer/webgl/WebGLRenderer.js

@@ -302,7 +302,8 @@ var WebGLRenderer = new Class({
          * @type {Uint32Array}
          * @since 3.0.0
          */
-        this.currentScissor = new Uint32Array([ 0, 0, this.width, this.height ]);
+        // this.currentScissor = new Uint32Array([ 0, 0, this.width, this.height ]);
+        this.currentScissor = null;
 
         /**
          * Index to the scissor stack top
@@ -312,7 +313,7 @@ var WebGLRenderer = new Class({
          * @default 0
          * @since 3.0.0
          */
-        this.currentScissorIdx = 0;
+        // this.currentScissorIdx = 0;
 
         /**
          * Stack of scissor data
@@ -321,7 +322,8 @@ var WebGLRenderer = new Class({
          * @type {Uint32Array}
          * @since 3.0.0
          */
-        this.scissorStack = new Uint32Array(4 * 1000);
+        // this.scissorStack = new Uint32Array(4 * 1000);
+        this.scissorStack = [];
 
         // Setup context lost and restore event listeners
 
@@ -447,7 +449,7 @@ var WebGLRenderer = new Class({
         {
             this.contextLost = true;
 
-            throw new Error('This browser does not support WebGL. Try using the Canvas pipeline.');
+            throw new Error('WebGL unsupported');
         }
 
         this.gl = gl;
@@ -515,6 +517,9 @@ var WebGLRenderer = new Class({
         this.addPipeline('Light2D', new ForwardDiffuseLightPipeline({ game: this.game, renderer: this }));
 
         this.setBlendMode(CONST.BlendModes.NORMAL);
+
+        // this.pushScissor(0, 0, this.width, this.height);
+
         this.resize(this.width, this.height);
 
         this.game.events.once('ready', this.boot, this);
@@ -580,7 +585,10 @@ var WebGLRenderer = new Class({
             pipelines[pipelineName].resize(width, height, resolution);
         }
 
-        this.currentScissor.set([ 0, 0, this.width, this.height ]);
+        // if (this.currentScissor)
+        // {
+        //     this.currentScissor = [ 0, 0, this.width, this.height ];
+        // }
 
         this.drawingBufferHeight = gl.drawingBufferHeight;
 
@@ -757,49 +765,29 @@ var WebGLRenderer = new Class({
      *
      * @method Phaser.Renderer.WebGL.WebGLRenderer#setScissor
      * @since 3.0.0
-     *
-     * @param {integer} x - [description]
-     * @param {integer} y - [description]
-     * @param {integer} w - [description]
-     * @param {integer} h - [description]
-     *
-     * @return {Phaser.Renderer.WebGL.WebGLRenderer} [description]
      */
-    setScissor: function (x, y, w, h)
+    setScissor: function ()
     {
         var gl = this.gl;
-        var currentScissor = this.currentScissor;
-        var enabled = (x === 0 && y === 0 && w === this.width && h === this.height && w >= 0 && h >= 0);
-
-        //  TODO: If new scissor is same as old scissor, skip setting it again
-        //  TODO: If scissor is viewport size, skip setting altogether
 
-        if (currentScissor[0] !== x ||
-            currentScissor[1] !== y ||
-            currentScissor[2] !== w ||
-            currentScissor[3] !== h)
-        {
-            this.flush();
-        }
+        var current = this.currentScissor;
 
-        currentScissor[0] = x;
-        currentScissor[1] = y;
-        currentScissor[2] = w;
-        currentScissor[3] = h;
+        var x = current[0];
+        var y = current[1];
+        var w = current[2];
+        var h = current[3];
 
-        this.currentScissorEnabled = enabled;
+        // https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/scissor
+        var box = gl.getParameter(gl.SCISSOR_BOX);
 
-        if (enabled)
+        if (box && (box[0] !== x || box[1] !== y || box[2] !== w || box[3] !== h))
         {
-            gl.disable(gl.SCISSOR_TEST);
-
-            return this;
-        }
+            this.flush();
 
-        gl.enable(gl.SCISSOR_TEST);
-        gl.scissor(x, (this.drawingBufferHeight - y - h), w, h);
+            gl.enable(gl.SCISSOR_TEST);
 
-        return this;
+            gl.scissor(x, (this.drawingBufferHeight - y - h), w, h);
+        }
     },
 
     /**
@@ -818,42 +806,32 @@ var WebGLRenderer = new Class({
     pushScissor: function (x, y, w, h)
     {
         var scissorStack = this.scissorStack;
-        var stackIndex = this.currentScissorIdx;
-        var currentScissor = this.currentScissor;
+        var stackLength = scissorStack.length;
 
-        scissorStack[stackIndex + 0] = currentScissor[0];
-        scissorStack[stackIndex + 1] = currentScissor[1];
-        scissorStack[stackIndex + 2] = currentScissor[2];
-        scissorStack[stackIndex + 3] = currentScissor[3];
+        var scissor = [ x, y, w, h ];
+        
+        scissorStack.push(scissor);
 
-        this.currentScissorIdx += 4;
-        this.setScissor(x, y, w, h);
+        this.currentScissor = scissor;
 
-        return this;
+        this.setScissor();
+
+        return scissor;
     },
 
     /**
      * Pops the last scissor state and sets it.
      *
      * @method Phaser.Renderer.WebGL.WebGLRenderer#popScissor
      * @since 3.0.0
-     *
-     * @return {Phaser.Renderer.WebGL.WebGLRenderer} [description]
      */
     popScissor: function ()
     {
         var scissorStack = this.scissorStack;
-        var stackIndex = this.currentScissorIdx - 4;
 
-        var x = scissorStack[stackIndex + 0];
-        var y = scissorStack[stackIndex + 1];
-        var w = scissorStack[stackIndex + 2];
-        var h = scissorStack[stackIndex + 3];
+        this.currentScissor = scissorStack.pop();
 
-        this.currentScissorIdx = stackIndex;
-        this.setScissor(x, y, w, h);
-
-        return this;
+        this.setScissor();
     },
 
     /**
@@ -1562,6 +1540,9 @@ var WebGLRenderer = new Class({
             pipelines[key].onPreRender();
         }
 
+        this.scissorStack = [];
+        this.currentScissor = null;
+
         this.setPipeline(this.pipelines.TextureTintPipeline);
     },