melonjs 10.9.0 → 10.12.0

package/src/video/webgl/webgl_renderer.js

@@ -2,14 +2,13 @@ import Color from "./../../math/color.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 pool from "./../../system/pooling.js";
 import { isPowerOfTwo, nextPowerOfTwo } from "./../../math/math.js";
 
-
 /**
  * @classdesc
  * a WebGL renderer object
@@ -70,8 +69,8 @@ class WebGLRenderer extends Renderer {
         /**
          * The WebGL context
          * @name gl
-         * @memberof WebGLRenderer#
-         * type {WebGLRenderingContext}
+         * @memberof WebGLRenderer
+         * @type {WebGLRenderingContext}
          */
         this.context = this.gl = this.getContextGL(this.getScreenCanvas(), options.transparent);
 
@@ -171,8 +170,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Reset context state
      * @name reset
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      */
     reset() {
         super.reset();
@@ -196,10 +194,8 @@ class WebGLRenderer extends Renderer {
     /**
      * set the active compositor for this renderer
      * @name setCompositor
-     * @function
      * @param {WebGLCompositor|string} compositor a compositor name or instance
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      */
     setCompositor(compositor = "default") {
 
@@ -224,8 +220,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Reset the gl transform to identity
      * @name resetTransform
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      */
     resetTransform() {
         this.currentTransform.identity();
@@ -271,8 +266,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Create a pattern with the specified repetition
      * @name createPattern
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {Image} image Source image
      * @param {string} repeat Define how the pattern should be repeated
      * @returns {TextureAtlas}
@@ -304,8 +298,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Flush the compositor to the frame buffer
      * @name flush
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      */
     flush() {
         this.currentCompositor.flush();
@@ -314,8 +307,7 @@ class WebGLRenderer extends Renderer {
     /**
      * set/change the current projection matrix (WebGL only)
      * @name setProjection
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {Matrix3d} matrix
      */
     setProjection(matrix) {
@@ -326,8 +318,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Clears the gl context with the given color.
      * @name clearColor
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {Color|string} [color="#000000"] CSS color.
      * @param {boolean} [opaque=false] Allow transparency [default] or clear the surface completely [true]
      */
@@ -354,8 +345,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
-     * @function
+     * @memberof WebGLRenderer
      * @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.
      * @param {number} width The rectangle's width.
@@ -404,8 +394,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Draw an image to the gl context
      * @name drawImage
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @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.
      * @param {number} sy The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
@@ -457,8 +446,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Draw a pattern within the given rectangle.
      * @name drawPattern
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {TextureAtlas} pattern Pattern object
      * @param {number} x
      * @param {number} y
@@ -475,8 +463,7 @@ class WebGLRenderer extends Renderer {
     /**
      * return a reference to the screen canvas corresponding WebGL Context
      * @name getScreenContext
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @returns {WebGLRenderingContext}
      */
     getScreenContext() {
@@ -486,8 +473,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Returns the WebGL Context object of the given Canvas
      * @name getContextGL
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {HTMLCanvasElement} canvas
      * @param {boolean} [transparent=true] use false to disable transparency
      * @returns {WebGLRenderingContext}
@@ -544,8 +530,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
-     * @function
+     * @memberof WebGLRenderer
      * @returns {WebGLRenderingContext}
      */
     getContext() {
@@ -565,8 +550,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
-     * @function
+     * @memberof WebGLRenderer
      * @param {string} [mode="normal"] blend mode : "normal", "multiply", "lighter", "additive", "screen"
      * @param {WebGLRenderingContext} [gl]
      */
@@ -616,8 +600,7 @@ class WebGLRenderer extends Renderer {
     /**
      * restores the canvas context
      * @name restore
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      */
     restore() {
         // do nothing if there is no saved states
@@ -652,8 +635,7 @@ class WebGLRenderer extends Renderer {
     /**
      * saves the canvas context
      * @name save
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      */
     save() {
         this._colorStack.push(this.currentColor.clone());
@@ -670,8 +652,7 @@ class WebGLRenderer extends Renderer {
     /**
      * rotates the uniform matrix
      * @name rotate
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {number} angle in radians
      */
     rotate(angle) {
@@ -681,8 +662,7 @@ class WebGLRenderer extends Renderer {
     /**
      * scales the uniform matrix
      * @name scale
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {number} x
      * @param {number} y
      */
@@ -702,8 +682,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Set the global alpha
      * @name setGlobalAlpha
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {number} alpha 0.0 to 1.0 values accepted.
      */
     setGlobalAlpha(alpha) {
@@ -713,8 +692,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Return the global alpha
      * @name getGlobalAlpha
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @returns {number} global alpha value
      */
     getGlobalAlpha() {
@@ -725,8 +703,7 @@ class WebGLRenderer extends Renderer {
      * Set the current fill & stroke style color.
      * By default, or upon reset, the value is set to #000000.
      * @name setColor
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {Color|string} color css color string.
      */
     setColor(color) {
@@ -738,8 +715,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Set the line width
      * @name setLineWidth
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {number} width Line width
      */
     setLineWidth(width) {
@@ -749,8 +725,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Stroke an arc at the specified coordinates with given radius, start and end points
      * @name strokeArc
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {number} x arc center point x-axis
      * @param {number} y arc center point y-axis
      * @param {number} radius
@@ -777,8 +752,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Fill an arc at the specified coordinates with given radius, start and end points
      * @name fillArc
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {number} x arc center point x-axis
      * @param {number} y arc center point y-axis
      * @param {number} radius
@@ -793,8 +767,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Stroke an ellipse at the specified coordinates with given radius
      * @name strokeEllipse
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {number} x ellipse center point x-axis
      * @param {number} y ellipse center point y-axis
      * @param {number} w horizontal radius of the ellipse
@@ -819,8 +792,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Fill an ellipse at the specified coordinates with given radius
      * @name fillEllipse
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {number} x ellipse center point x-axis
      * @param {number} y ellipse center point y-axis
      * @param {number} w horizontal radius of the ellipse
@@ -833,8 +805,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Stroke a line of the given two points
      * @name strokeLine
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {number} startX the start x coordinate
      * @param {number} startY the start y coordinate
      * @param {number} endX the end x coordinate
@@ -855,8 +826,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Fill a line of the given two points
      * @name fillLine
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {number} startX the start x coordinate
      * @param {number} startY the start y coordinate
      * @param {number} endX the end x coordinate
@@ -869,8 +839,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Stroke a me.Polygon on the screen with a specified color
      * @name strokePolygon
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {Polygon} poly the shape to draw
      * @param {boolean} [fill=false] also fill the shape with the current color if true
      */
@@ -901,8 +870,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Fill a me.Polygon on the screen
      * @name fillPolygon
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {Polygon} poly the shape to draw
      */
     fillPolygon(poly) {
@@ -912,8 +880,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Draw a stroke rectangle at the specified coordinates
      * @name strokeRect
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {number} x
      * @param {number} y
      * @param {number} width
@@ -937,8 +904,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Draw a filled rectangle at the specified coordinates
      * @name fillRect
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {number} x
      * @param {number} y
      * @param {number} width
@@ -951,8 +917,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Stroke a rounded rectangle at the specified coordinates
      * @name strokeRoundRect
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {number} x
      * @param {number} y
      * @param {number} width
@@ -978,8 +943,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Draw a rounded filled rectangle at the specified coordinates
      * @name fillRoundRect
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {number} x
      * @param {number} y
      * @param {number} width
@@ -994,8 +958,7 @@ class WebGLRenderer extends Renderer {
      * Reset (overrides) the renderer transformation matrix to the
      * identity one, and then apply the given transformation matrix.
      * @name setTransform
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {Matrix2d} mat2d Matrix to transform by
      */
     setTransform(mat2d) {
@@ -1006,8 +969,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Multiply given matrix into the renderer tranformation matrix
      * @name transform
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {Matrix2d} mat2d Matrix to transform by
      */
     transform(mat2d) {
@@ -1024,8 +986,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Translates the uniform matrix by the given coordinates
      * @name translate
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      * @param {number} x
      * @param {number} y
      */
@@ -1047,8 +1008,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
-     * @function
+     * @memberof WebGLRenderer
      * @param {number} x
      * @param {number} y
      * @param {number} width
@@ -1095,31 +1055,45 @@ 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
-     * @function
-     * @param {Rect|RoundRect|Polygon|Line|Ellipse} [mask] the shape defining the mask to be applied
+     * @memberof WebGLRenderer
+     * @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);
     }
 
@@ -1127,13 +1101,15 @@ class WebGLRenderer extends Renderer {
      * disable (remove) the rendering mask set through setMask.
      * @name clearMask
      * @see WebGLRenderer#setMask
-     * @memberof WebGLRenderer.prototype
-     * @function
+     * @memberof WebGLRenderer
      */
     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);
+        }
     }
 };