PIXI.WebGLGraphics.stencilBufferLimit is a new integer that allows you to define how many points exist in a Graphics object before Pixi swaps to using the Stencil Buffer to render it. The default is now 64 (originally 6). This fixes issues with things like Quadratic curves not rendering as masks in WebGL.

Author: photonstorm

README.md

@@ -336,6 +336,8 @@ Please note that Phaser uses a custom build of Pixi and always has done. The fol
 * TilingSprite would ignore the `renderable` property, and render it regardless. Now it skips render if `renderable` is false (thanks @Green92 #2214)
 * We have replaced the PolyK Triangulation calls within Pixi with EarCut 2.0.8. This allows for faster polygon triangulation, and also deals with more complex polygons that PolyK would crash on.
 * Graphics.arc has a new argument `segments` that allows you to control how many segments are created when the arc is drawn. The default is 40. Use a higher number for more fidelity, i.e. if you find that reversed arcs are not joining up fully (#2064)
+* PIXI.WebGLMaskManager.pushMask and popMask are now more robust in checking that they have been given valid mask data (#2152)
+* PIXI.WebGLGraphics.stencilBufferLimit is a new integer that allows you to define how many points exist in a Graphics object before Pixi swaps to using the Stencil Buffer to render it. The default is now 64 (originally 6). This fixes issues with things like Quadratic curves not rendering as masks in WebGL.
 
 For changes in previous releases please see the extensive [Version History](https://github.com/photonstorm/phaser/blob/master/CHANGELOG.md).
 

src/pixi/primitives/Graphics.js

@@ -1200,8 +1200,10 @@ Object.defineProperty(PIXI.Graphics.prototype, "cacheAsBitmap", {
         else
         {
             this.destroyCachedSprite();
-            this.dirty = true;
         }
 
+        this.dirty = true;
+        this.webGLDirty = true;
+
     }
 });

src/pixi/renderers/webgl/utils/WebGLGraphics.js

@@ -13,6 +13,13 @@ PIXI.WebGLGraphics = function()
 {
 };
 
+/**
+ * The number of points beyond which Pixi swaps to using the Stencil Buffer to render the Graphics.
+ *
+ * @type {number}
+ */
+PIXI.WebGLGraphics.stencilBufferLimit = 64;
+
 /**
  * Renders the graphics object
  *
@@ -147,9 +154,9 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics, gl)
             // MAKE SURE WE HAVE THE CORRECT TYPE..
             if(data.fill)
             {
-                if(data.points.length >= 6)
+                if(data.points.length >= PIXI.WebGLGraphics.stencilBufferLimit)
                 {
-                    if(data.points.length < 6 * 2)
+                    if(data.points.length < PIXI.WebGLGraphics.stencilBufferLimit * 2)
                     {
                         webGLData = PIXI.WebGLGraphics.switchMode(webGL, 0);
 
@@ -274,7 +281,7 @@ PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
         var verts = webGLData.points;
         var indices = webGLData.indices;
 
-        var vertPos = verts.length/6;
+        var vertPos = verts.length / 6;
 
         // start
         verts.push(x, y);
@@ -290,10 +297,10 @@ PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
         verts.push(r, g, b, alpha);
 
         // insert 2 dead triangles..
-        indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3);
+        indices.push(vertPos, vertPos, vertPos + 1, vertPos + 2, vertPos + 3, vertPos + 3);
     }
 
-    if(graphicsData.lineWidth)
+    if (graphicsData.lineWidth)
     {
         var tempPoints = graphicsData.points;
 
@@ -347,11 +354,12 @@ PIXI.WebGLGraphics.buildRoundedRectangle = function(graphicsData, webGLData)
         var verts = webGLData.points;
         var indices = webGLData.indices;
 
-        var vecPos = verts.length/6;
+        var vecPos = verts.length / 6;
 
         var triangles = PIXI.EarCut.Triangulate(recPoints, null, 2);
 
         var i = 0;
+
         for (i = 0; i < triangles.length; i+=3)
         {
             indices.push(triangles[i] + vecPos);
@@ -478,7 +486,7 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
         var verts = webGLData.points;
         var indices = webGLData.indices;
 
-        var vecPos = verts.length/6;
+        var vecPos = verts.length / 6;
 
         indices.push(vecPos);
 
@@ -739,7 +747,7 @@ PIXI.WebGLGraphics.buildComplexPoly = function(graphicsData, webGLData)
 {
     //TODO - no need to copy this as it gets turned into a FLoat32Array anyways..
     var points = graphicsData.points.slice();
-    if(points.length < 6)return;
+    if(points.length < PIXI.WebGLGraphics.stencilBufferLimit)return;
 
     // get first and last point.. figure out the middle!
     var indices = webGLData.indices;
@@ -801,7 +809,7 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
 {
     var points = graphicsData.points;
 
-    if(points.length < 6)return;
+    if(points.length < PIXI.WebGLGraphics.stencilBufferLimit)return;
     // get first and last point.. figure out the middle!
     var verts = webGLData.points;
     var indices = webGLData.indices;

src/pixi/renderers/webgl/utils/WebGLMaskManager.js

@@ -35,12 +35,15 @@ PIXI.WebGLMaskManager.prototype.pushMask = function(maskData, renderSession)
 {
     var gl = renderSession.gl;
 
-    if(maskData.dirty)
+    if (maskData.dirty)
     {
         PIXI.WebGLGraphics.updateGraphics(maskData, gl);
     }
 
-    if(!maskData._webGL[gl.id].data.length)return;
+    if (maskData._webGL[gl.id] === undefined || maskData._webGL[gl.id].data === undefined || maskData._webGL[gl.id].data.length === 0)
+    {
+        return;
+    }
 
     renderSession.stencilManager.pushStencil(maskData, maskData._webGL[gl.id].data[0], renderSession);
 };
@@ -55,7 +58,14 @@ PIXI.WebGLMaskManager.prototype.pushMask = function(maskData, renderSession)
 PIXI.WebGLMaskManager.prototype.popMask = function(maskData, renderSession)
 {
     var gl = this.gl;
+
+    if (maskData._webGL[gl.id] === undefined || maskData._webGL[gl.id].data === undefined || maskData._webGL[gl.id].data.length === 0)
+    {
+        return;
+    }
+
     renderSession.stencilManager.popStencil(maskData, maskData._webGL[gl.id].data[0], renderSession);
+
 };
 
 /**