melonjs 10.7.1 → 10.10.0

package/src/video/webgl/webgl_renderer.js

@@ -1,14 +1,13 @@
 import Color from "./../../math/color.js";
-import Vector2d from "./../../math/vector2.js";
 import Matrix2d from "./../../math/matrix2.js";
 import WebGLCompositor from "./webgl_compositor.js";
 import Renderer from "./../renderer.js";
-import TextureCache from "./../texture_cache.js";
-import { TextureAtlas, createAtlas } from "./../texture.js";
+import TextureCache from "./../texture/cache.js";
+import { TextureAtlas, createAtlas } from "./../texture/atlas.js";
 import { createCanvas, renderer } from "./../video.js";
 import * as event from "./../../system/event.js";
-import * as pool from "./../../system/pooling.js";
-import { isPowerOfTwo, nextPowerOfTwo, TAU } from "./../../math/math.js";
+import pool from "./../../system/pooling.js";
+import { isPowerOfTwo, nextPowerOfTwo } from "./../../math/math.js";
 
 
 /**
@@ -41,7 +40,7 @@ class WebGLRenderer extends Renderer {
         /**
          * The WebGL version used by this renderer (1 or 2)
          * @name WebGLVersion
-         * @memberof WebGLRenderer
+         * @memberof WebGLRenderer#
          * @type {number}
          * @default 1
          * @readonly
@@ -51,7 +50,7 @@ class WebGLRenderer extends Renderer {
         /**
          * The vendor string of the underlying graphics driver.
          * @name GPUVendor
-         * @memberof WebGLRenderer
+         * @memberof WebGLRenderer#
          * @type {string}
          * @default null
          * @readonly
@@ -61,7 +60,7 @@ class WebGLRenderer extends Renderer {
         /**
          * The renderer string of the underlying graphics driver.
          * @name GPURenderer
-         * @memberof WebGLRenderer
+         * @memberof WebGLRenderer#
          * @type {string}
          * @default null
          * @readonly
@@ -72,14 +71,14 @@ class WebGLRenderer extends Renderer {
          * The WebGL context
          * @name gl
          * @memberof WebGLRenderer
-         * type {WebGLRenderingContext}
+         * @type {WebGLRenderingContext}
          */
         this.context = this.gl = this.getContextGL(this.getScreenCanvas(), options.transparent);
 
         /**
          * Maximum number of texture unit supported under the current context
          * @name maxTextures
-         * @memberof WebGLRenderer
+         * @memberof WebGLRenderer#
          * @type {number}
          * @readonly
          */
@@ -105,16 +104,6 @@ class WebGLRenderer extends Renderer {
          */
         this._blendStack = [];
 
-        /**
-         * @ignore
-         */
-        this._glPoints = [
-            new Vector2d(),
-            new Vector2d(),
-            new Vector2d(),
-            new Vector2d()
-        ];
-
         /**
          * The current transformation matrix used for transformations on the overall scene
          * @name currentTransform
@@ -134,7 +123,7 @@ class WebGLRenderer extends Renderer {
         /**
          * The list of active compositors
          * @name compositors
-         * @type {Map}
+         * @type {Map<WebGLCompositor>}
          * @memberof WebGLRenderer#
          */
         this.compositors = new Map();
@@ -182,7 +171,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Reset context state
      * @name reset
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      */
     reset() {
@@ -209,7 +198,7 @@ class WebGLRenderer extends Renderer {
      * @name setCompositor
      * @function
      * @param {WebGLCompositor|string} compositor a compositor name or instance
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      */
     setCompositor(compositor = "default") {
@@ -235,7 +224,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Reset the gl transform to identity
      * @name resetTransform
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      */
     resetTransform() {
@@ -282,7 +271,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Create a pattern with the specified repetition
      * @name createPattern
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {Image} image Source image
      * @param {string} repeat Define how the pattern should be repeated
@@ -315,7 +304,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Flush the compositor to the frame buffer
      * @name flush
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      */
     flush() {
@@ -325,7 +314,7 @@ class WebGLRenderer extends Renderer {
     /**
      * set/change the current projection matrix (WebGL only)
      * @name setProjection
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {Matrix3d} matrix
      */
@@ -337,7 +326,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Clears the gl context with the given color.
      * @name clearColor
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {Color|string} [color="#000000"] CSS color.
      * @param {boolean} [opaque=false] Allow transparency [default] or clear the surface completely [true]
@@ -365,7 +354,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Erase the pixels in the given rectangular area by setting them to transparent black (rgba(0,0,0,0)).
      * @name clearRect
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {number} x x axis of the coordinate for the rectangle starting point.
      * @param {number} y y axis of the coordinate for the rectangle starting point.
@@ -415,7 +404,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Draw an image to the gl context
      * @name drawImage
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {Image} image An element to draw into the context. The specification permits any canvas image source (CanvasImageSource), specifically, a CSSImageValue, an HTMLImageElement, an SVGImageElement, an HTMLVideoElement, an HTMLCanvasElement, an ImageBitmap, or an OffscreenCanvas.
      * @param {number} sx The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
@@ -468,7 +457,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Draw a pattern within the given rectangle.
      * @name drawPattern
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {TextureAtlas} pattern Pattern object
      * @param {number} x
@@ -486,7 +475,7 @@ class WebGLRenderer extends Renderer {
     /**
      * return a reference to the screen canvas corresponding WebGL Context
      * @name getScreenContext
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @returns {WebGLRenderingContext}
      */
@@ -497,7 +486,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Returns the WebGL Context object of the given Canvas
      * @name getContextGL
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {HTMLCanvasElement} canvas
      * @param {boolean} [transparent=true] use false to disable transparency
@@ -555,7 +544,7 @@ class WebGLRenderer extends Renderer {
      * Returns the WebGLContext instance for the renderer
      * return a reference to the system 2d Context
      * @name getContext
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @returns {WebGLRenderingContext}
      */
@@ -576,7 +565,7 @@ class WebGLRenderer extends Renderer {
      * <img src="images/screen-blendmode.png" width="510"/> <br>
      * @name setBlendMode
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {string} [mode="normal"] blend mode : "normal", "multiply", "lighter", "additive", "screen"
      * @param {WebGLRenderingContext} [gl]
@@ -627,7 +616,7 @@ class WebGLRenderer extends Renderer {
     /**
      * restores the canvas context
      * @name restore
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      */
     restore() {
@@ -663,7 +652,7 @@ class WebGLRenderer extends Renderer {
     /**
      * saves the canvas context
      * @name save
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      */
     save() {
@@ -681,7 +670,7 @@ class WebGLRenderer extends Renderer {
     /**
      * rotates the uniform matrix
      * @name rotate
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {number} angle in radians
      */
@@ -692,7 +681,7 @@ class WebGLRenderer extends Renderer {
     /**
      * scales the uniform matrix
      * @name scale
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {number} x
      * @param {number} y
@@ -713,7 +702,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Set the global alpha
      * @name setGlobalAlpha
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {number} alpha 0.0 to 1.0 values accepted.
      */
@@ -721,11 +710,22 @@ class WebGLRenderer extends Renderer {
         this.currentColor.alpha = alpha;
     }
 
+    /**
+     * Return the global alpha
+     * @name getGlobalAlpha
+     * @memberof WebGLRenderer
+     * @function
+     * @returns {number} global alpha value
+     */
+    getGlobalAlpha() {
+        return this.currentColor.alpha;
+    }
+
     /**
      * Set the current fill & stroke style color.
      * By default, or upon reset, the value is set to #000000.
      * @name setColor
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {Color|string} color css color string.
      */
@@ -738,7 +738,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Set the line width
      * @name setLineWidth
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {number} width Line width
      */
@@ -749,7 +749,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Stroke an arc at the specified coordinates with given radius, start and end points
      * @name strokeArc
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {number} x arc center point x-axis
      * @param {number} y arc center point y-axis
@@ -759,41 +759,25 @@ class WebGLRenderer extends Renderer {
      * @param {boolean} [antiClockwise=false] draw arc anti-clockwise
      * @param {boolean} [fill=false]
      */
-    strokeArc(x, y, radius, start, end, antiClockwise = false, fill) {
-        if (fill === true ) {
-            this.fillArc(x, y, radius, start, end, antiClockwise);
+    strokeArc(x, y, radius, start, end, antiClockwise = false, fill = false) {
+        if (this.getGlobalAlpha() < 1 / 255) {
+            // Fast path: don't draw fully transparent
+            return;
+        }
+        this.path2D.beginPath();
+        this.path2D.arc(x, y, radius, start, end, antiClockwise);
+        if (fill === false) {
+            this.currentCompositor.drawVertices(this.gl.LINE_STRIP, this.path2D.points);
         } else {
-            // XXX to be optimzed using a specific shader
-            var points = this._glPoints;
-            var i, len = Math.floor(24 * Math.sqrt(radius * 2));
-            var theta = (end - start) / (len * 2);
-            var theta2 = theta * 2;
-            var cos_theta = Math.cos(theta);
-            var sin_theta = Math.sin(theta);
-
-            // Grow internal points buffer if necessary
-            for (i = points.length; i < len + 1; i++) {
-                points.push(new Vector2d());
-            }
-
-            // calculate and draw all segments
-            for (i = 0; i < len; i++) {
-                var angle = ((theta) + start + (theta2 * i));
-                var cos = Math.cos(angle);
-                var sin = -Math.sin(angle);
-
-                points[i].x = x + (((cos_theta * cos) + (sin_theta * sin)) * radius);
-                points[i].y = y + (((cos_theta * -sin) + (sin_theta * cos)) * radius);
-            }
-            // batch draw all lines
-            this.currentCompositor.drawVertices(this.gl.LINE_STRIP, points, len);
+            this.path2D.closePath();
+            this.currentCompositor.drawVertices(this.gl.TRIANGLES, this.path2D.triangulatePath());
         }
     }
 
     /**
      * Fill an arc at the specified coordinates with given radius, start and end points
      * @name fillArc
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {number} x arc center point x-axis
      * @param {number} y arc center point y-axis
@@ -802,41 +786,14 @@ class WebGLRenderer extends Renderer {
      * @param {number} end end angle in radians
      * @param {boolean} [antiClockwise=false] draw arc anti-clockwise
      */
-    fillArc(x, y, radius, start, end /*, antiClockwise = false*/) {
-        // XXX to be optimzed using a specific shader
-        var points = this._glPoints;
-        var i, index = 0;
-        var len = Math.floor(24 * Math.sqrt(radius * 2));
-        var theta = (end - start) / (len * 2);
-        var theta2 = theta * 2;
-        var cos_theta = Math.cos(theta);
-        var sin_theta = Math.sin(theta);
-
-        // Grow internal points buffer if necessary
-        for (i = points.length; i < len * 2; i++) {
-            points.push(new Vector2d());
-        }
-
-        // calculate and draw all segments
-        for (i = 0; i < len - 1; i++) {
-            var angle = ((theta) + start + (theta2 * i));
-            var cos = Math.cos(angle);
-            var sin = -Math.sin(angle);
-
-            points[index++].set(x, y);
-            points[index++].set(
-                x - (((cos_theta * cos) + (sin_theta * sin)) * radius),
-                y - (((cos_theta * -sin) + (sin_theta * cos)) * radius)
-            );
-        }
-        // batch draw all triangles
-        this.currentCompositor.drawVertices(this.gl.TRIANGLE_STRIP, points, index);
+    fillArc(x, y, radius, start, end, antiClockwise = false) {
+        this.strokeArc(x, y, radius, start, end, antiClockwise, true);
     }
 
     /**
      * Stroke an ellipse at the specified coordinates with given radius
      * @name strokeEllipse
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {number} x ellipse center point x-axis
      * @param {number} y ellipse center point y-axis
@@ -845,35 +802,24 @@ class WebGLRenderer extends Renderer {
      * @param {boolean} [fill=false] also fill the shape with the current color if true
      */
     strokeEllipse(x, y, w, h, fill = false) {
-        if (fill === true ) {
-            this.fillEllipse(x, y, w, h);
+        if (this.getGlobalAlpha() < 1 / 255) {
+            // Fast path: don't draw fully transparent
+            return;
+        }
+        this.path2D.beginPath();
+        this.path2D.ellipse(x, y, w, h, 0, 0, 360);
+        this.path2D.closePath();
+        if (fill === false) {
+            this.currentCompositor.drawVertices(this.gl.LINE_LOOP, this.path2D.points);
         } else {
-            // XXX to be optimzed using a specific shader
-            var len = Math.floor(24 * Math.sqrt(w)) ||
-                      Math.floor(12 * Math.sqrt(w + h));
-            var segment = (TAU) / len;
-            var points = this._glPoints,
-                i;
-
-            // Grow internal points buffer if necessary
-            for (i = points.length; i < len; i++) {
-                points.push(new Vector2d());
-            }
-
-            // calculate and draw all segments
-            for (i = 0; i < len; i++) {
-                points[i].x = x + (Math.sin(segment * -i) * w);
-                points[i].y = y + (Math.cos(segment * -i) * h);
-            }
-            // batch draw all lines
-            this.currentCompositor.drawVertices(this.gl.LINE_LOOP, points, len);
+            this.currentCompositor.drawVertices(this.gl.TRIANGLES, this.path2D.triangulatePath());
         }
     }
 
     /**
      * Fill an ellipse at the specified coordinates with given radius
      * @name fillEllipse
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {number} x ellipse center point x-axis
      * @param {number} y ellipse center point y-axis
@@ -881,34 +827,13 @@ class WebGLRenderer extends Renderer {
      * @param {number} h vertical radius of the ellipse
      */
     fillEllipse(x, y, w, h) {
-        // XXX to be optimzed using a specific shader
-        var len = Math.floor(24 * Math.sqrt(w)) ||
-                  Math.floor(12 * Math.sqrt(w + h));
-        var segment = (TAU) / len;
-        var points = this._glPoints;
-        var index = 0, i;
-
-        // Grow internal points buffer if necessary
-        for (i = points.length; i < (len + 1) * 2; i++) {
-            points.push(new Vector2d());
-        }
-
-        // draw all vertices vertex coordinates
-        for (i = 0; i < len + 1; i++) {
-            points[index++].set(x, y);
-            points[index++].set(
-                x + (Math.sin(segment * i) * w),
-                y + (Math.cos(segment * i) * h)
-            );
-        }
-        // batch draw all triangles
-        this.currentCompositor.drawVertices(this.gl.TRIANGLE_STRIP, points, index);
+        this.strokeEllipse(x, y, w, h, false);
     }
 
     /**
      * Stroke a line of the given two points
      * @name strokeLine
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {number} startX the start x coordinate
      * @param {number} startY the start y coordinate
@@ -916,19 +841,21 @@ class WebGLRenderer extends Renderer {
      * @param {number} endY the end y coordinate
      */
     strokeLine(startX, startY, endX, endY) {
-        var points = this._glPoints;
-        points[0].x = startX;
-        points[0].y = startY;
-        points[1].x = endX;
-        points[1].y = endY;
-        this.currentCompositor.drawVertices(this.gl.LINE_STRIP, points, 2);
+        if (this.getGlobalAlpha() < 1 / 255) {
+            // Fast path: don't draw fully transparent
+            return;
+        }
+        this.path2D.beginPath();
+        this.path2D.moveTo(startX, startY);
+        this.path2D.lineTo(endX, endY);
+        this.currentCompositor.drawVertices(this.gl.LINE_STRIP, this.path2D.points);
     }
 
 
     /**
      * Fill a line of the given two points
      * @name fillLine
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {number} startX the start x coordinate
      * @param {number} startY the start y coordinate
@@ -942,65 +869,50 @@ class WebGLRenderer extends Renderer {
     /**
      * Stroke a me.Polygon on the screen with a specified color
      * @name strokePolygon
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {Polygon} poly the shape to draw
      * @param {boolean} [fill=false] also fill the shape with the current color if true
      */
     strokePolygon(poly, fill = false) {
-        if (fill === true ) {
-            this.fillPolygon(poly);
+        if (this.getGlobalAlpha() < 1 / 255) {
+            // Fast path: don't draw fully transparent
+            return;
+        }
+        this.translate(poly.pos.x, poly.pos.y);
+        this.path2D.beginPath();
+        this.path2D.moveTo(poly.points[0].x, poly.points[0].y);
+        var point;
+        for (var i = 1; i < poly.points.length; i++) {
+            point = poly.points[i];
+            this.path2D.lineTo(point.x, point.y);
+        }
+        this.path2D.lineTo(poly.points[0].x, poly.points[0].y);
+        this.path2D.closePath();
+        if (fill === false) {
+            this.currentCompositor.drawVertices(this.gl.LINE_LOOP, this.path2D.points);
         } else {
-            var len = poly.points.length,
-                points = this._glPoints,
-                i;
-
-            // Grow internal points buffer if necessary
-            for (i = points.length; i < len; i++) {
-                points.push(new Vector2d());
-            }
-
-            // calculate and draw all segments
-            for (i = 0; i < len; i++) {
-                points[i].x = poly.pos.x + poly.points[i].x;
-                points[i].y = poly.pos.y + poly.points[i].y;
-            }
-            this.currentCompositor.drawVertices(this.gl.LINE_LOOP, points, len);
+            // draw all triangles
+            this.currentCompositor.drawVertices(this.gl.TRIANGLES, this.path2D.triangulatePath());
         }
+        this.translate(-poly.pos.x, -poly.pos.y);
     }
 
     /**
      * Fill a me.Polygon on the screen
      * @name fillPolygon
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {Polygon} poly the shape to draw
      */
     fillPolygon(poly) {
-        var points = poly.points;
-        var glPoints = this._glPoints;
-        var indices = poly.getIndices();
-        var x = poly.pos.x, y = poly.pos.y;
-        var i;
-
-        // Grow internal points buffer if necessary
-        for (i = glPoints.length; i < indices.length; i++) {
-            glPoints.push(new Vector2d());
-        }
-
-        // calculate all vertices
-        for (i = 0; i < indices.length; i++ ) {
-            glPoints[i].set(x + points[indices[i]].x, y + points[indices[i]].y);
-        }
-
-        // draw all triangle
-        this.currentCompositor.drawVertices(this.gl.TRIANGLES, glPoints, indices.length);
+        this.strokePolygon(poly, true);
     }
 
     /**
      * Draw a stroke rectangle at the specified coordinates
      * @name strokeRect
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {number} x
      * @param {number} y
@@ -1009,26 +921,23 @@ class WebGLRenderer extends Renderer {
      * @param {boolean} [fill=false] also fill the shape with the current color if true
      */
     strokeRect(x, y, width, height, fill = false) {
-        if (fill === true ) {
-            this.fillRect(x, y, width, height);
+        if (this.getGlobalAlpha() < 1 / 255) {
+            // Fast path: don't draw fully transparent
+            return;
+        }
+        this.path2D.beginPath();
+        this.path2D.rect(x, y, width, height);
+        if (fill === false) {
+            this.currentCompositor.drawVertices(this.gl.LINE_LOOP, this.path2D.points);
         } else {
-            var points = this._glPoints;
-            points[0].x = x;
-            points[0].y = y;
-            points[1].x = x + width;
-            points[1].y = y;
-            points[2].x = x + width;
-            points[2].y = y + height;
-            points[3].x = x;
-            points[3].y = y + height;
-            this.currentCompositor.drawVertices(this.gl.LINE_LOOP, points, 4);
+            this.currentCompositor.drawVertices(this.gl.TRIANGLES, this.path2D.triangulatePath());
         }
     }
 
     /**
      * Draw a filled rectangle at the specified coordinates
      * @name fillRect
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {number} x
      * @param {number} y
@@ -1036,23 +945,56 @@ class WebGLRenderer extends Renderer {
      * @param {number} height
      */
     fillRect(x, y, width, height) {
-        var glPoints = this._glPoints;
-        glPoints[0].x = x + width;
-        glPoints[0].y = y;
-        glPoints[1].x = x;
-        glPoints[1].y = y;
-        glPoints[2].x = x + width;
-        glPoints[2].y = y + height;
-        glPoints[3].x = x;
-        glPoints[3].y = y + height;
-        this.currentCompositor.drawVertices(this.gl.TRIANGLE_STRIP, glPoints, 4);
+        this.strokeRect(x, y, width, height, true);
+    }
+
+    /**
+     * Stroke a rounded rectangle at the specified coordinates
+     * @name strokeRoundRect
+     * @memberof WebGLRenderer
+     * @function
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
+     * @param {number} radius
+     * @param {boolean} [fill=false] also fill the shape with the current color if true
+     */
+    strokeRoundRect(x, y, width, height, radius, fill = false) {
+        if (this.getGlobalAlpha() < 1 / 255) {
+            // Fast path: don't draw fully transparent
+            return;
+        }
+        this.path2D.beginPath();
+        this.path2D.roundRect(x, y, width, height, radius);
+        if (fill === false) {
+            this.currentCompositor.drawVertices(this.gl.LINE_LOOP, this.path2D.points);
+        } else {
+            this.path2D.closePath();
+            this.currentCompositor.drawVertices(this.gl.TRIANGLES, this.path2D.triangulatePath());
+        }
+    }
+
+    /**
+     * Draw a rounded filled rectangle at the specified coordinates
+     * @name fillRoundRect
+     * @memberof WebGLRenderer
+     * @function
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
+     * @param {number} radius
+     */
+    fillRoundRect(x, y, width, height, radius) {
+        this.strokeRoundRect(x, y, width, height, radius, true);
     }
 
     /**
      * Reset (overrides) the renderer transformation matrix to the
      * identity one, and then apply the given transformation matrix.
      * @name setTransform
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {Matrix2d} mat2d Matrix to transform by
      */
@@ -1064,7 +1006,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Multiply given matrix into the renderer tranformation matrix
      * @name transform
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {Matrix2d} mat2d Matrix to transform by
      */
@@ -1082,7 +1024,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Translates the uniform matrix by the given coordinates
      * @name translate
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {number} x
      * @param {number} y
@@ -1105,7 +1047,7 @@ class WebGLRenderer extends Renderer {
      * and restore it (with the restore() method) any time in the future.
      * (<u>this is an experimental feature !</u>)
      * @name clipRect
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      * @param {number} x
      * @param {number} y
@@ -1153,31 +1095,46 @@ class WebGLRenderer extends Renderer {
      * So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible.
      * Mask are not preserved through renderer context save and restore.
      * @name setMask
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
-     * @param {Rect|Polygon|Line|Ellipse} [mask] the shape defining the mask to be applied
+     * @param {Rect|RoundRect|Polygon|Line|Ellipse} [mask] a shape defining the mask to be applied
+     * @param {boolean} [invert=false] either the given shape should define what is visible (default) or the opposite
      */
-    setMask(mask) {
+    setMask(mask, invert = false) {
         var gl = this.gl;
 
         // flush the compositor
         this.flush();
 
-        // Enable and setup GL state to write to stencil buffer
-        gl.enable(gl.STENCIL_TEST);
-        gl.clear(gl.STENCIL_BUFFER_BIT);
+        if (this.maskLevel === 0) {
+            // Enable and setup GL state to write to stencil buffer
+            gl.enable(gl.STENCIL_TEST);
+            gl.clear(gl.STENCIL_BUFFER_BIT);
+
+
+        }
+
+        this.maskLevel++;
+
         gl.colorMask(false, false, false, false);
-        gl.stencilFunc(gl.NOTEQUAL, 1, 1);
+        gl.stencilFunc(gl.EQUAL, this.maskLevel, 1);
         gl.stencilOp(gl.REPLACE, gl.REPLACE, gl.REPLACE);
 
+
+        // fill the given mask shape
         this.fill(mask);
 
         // flush the compositor
         this.flush();
 
-        // Use stencil buffer to affect next rendering object
         gl.colorMask(true, true, true, true);
-        gl.stencilFunc(gl.EQUAL, 1, 1);
+
+        // Use stencil buffer to affect next rendering object
+        if (invert === true) {
+            gl.stencilFunc(gl.EQUAL, this.maskLevel + 1, 1);
+        } else {
+            gl.stencilFunc(gl.NOTEQUAL, this.maskLevel + 1, 1);
+        }
         gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
     }
 
@@ -1185,13 +1142,16 @@ class WebGLRenderer extends Renderer {
      * disable (remove) the rendering mask set through setMask.
      * @name clearMask
      * @see WebGLRenderer#setMask
-     * @memberof WebGLRenderer.prototype
+     * @memberof WebGLRenderer
      * @function
      */
     clearMask() {
-        // flush the compositor
-        this.flush();
-        this.gl.disable(this.gl.STENCIL_TEST);
+        if (this.maskLevel > 0) {
+            // flush the compositor
+            this.flush();
+            this.maskLevel = 0;
+            this.gl.disable(this.gl.STENCIL_TEST);
+        }
     }
 };