melonjs 10.2.0 → 10.3.0

package/src/video/webgl/webgl_renderer.js

@@ -15,22 +15,21 @@ import { isPowerOfTwo, nextPowerOfTwo, TAU } from "./../../math/math.js";
  * @classdesc
  * a WebGL renderer object
  * @class WebGLRenderer
- * @extends me.Renderer
- * @memberOf me
- * @constructor
- * @param {Object} options The renderer parameters
- * @param {Number} options.width The width of the canvas without scaling
- * @param {Number} options.height The height of the canvas without scaling
+ * @augments me.Renderer
+ * @memberof me
+ * @param {object} options The renderer parameters
+ * @param {number} options.width The width of the canvas without scaling
+ * @param {number} options.height The height of the canvas without scaling
  * @param {HTMLCanvasElement} [options.canvas] The html canvas to draw to on screen
- * @param {Boolean} [options.doubleBuffering=false] Whether to enable double buffering
- * @param {Boolean} [options.antiAlias=false] Whether to enable anti-aliasing
- * @param {Boolean} [options.failIfMajorPerformanceCaveat=true] If true, the renderer will switch to CANVAS mode if the performances of a WebGL context would be dramatically lower than that of a native application making equivalent OpenGL calls.
- * @param {Boolean} [options.transparent=false] Whether to enable transparency on the canvas (performance hit when enabled)
- * @param {Boolean} [options.subPixel=false] Whether to enable subpixel renderering (performance hit when enabled)
- * @param {Boolean} [options.preferWebGL1=false] if true the renderer will only use WebGL 1
- * @param {String} [options.powerPreference="default"] a hint to the user agent indicating what configuration of GPU is suitable for the WebGL context ("default", "high-performance", "low-power"). To be noted that Safari and Chrome (since version 80) both default to "low-power" to save battery life and improve the user experience on these dual-GPU machines.
- * @param {Number} [options.zoomX=width] The actual width of the canvas with scaling applied
- * @param {Number} [options.zoomY=height] The actual height of the canvas with scaling applied
+ * @param {boolean} [options.doubleBuffering=false] Whether to enable double buffering
+ * @param {boolean} [options.antiAlias=false] Whether to enable anti-aliasing
+ * @param {boolean} [options.failIfMajorPerformanceCaveat=true] If true, the renderer will switch to CANVAS mode if the performances of a WebGL context would be dramatically lower than that of a native application making equivalent OpenGL calls.
+ * @param {boolean} [options.transparent=false] Whether to enable transparency on the canvas (performance hit when enabled)
+ * @param {boolean} [options.subPixel=false] Whether to enable subpixel renderering (performance hit when enabled)
+ * @param {boolean} [options.preferWebGL1=false] if true the renderer will only use WebGL 1
+ * @param {string} [options.powerPreference="default"] a hint to the user agent indicating what configuration of GPU is suitable for the WebGL context ("default", "high-performance", "low-power"). To be noted that Safari and Chrome (since version 80) both default to "low-power" to save battery life and improve the user experience on these dual-GPU machines.
+ * @param {number} [options.zoomX=width] The actual width of the canvas with scaling applied
+ * @param {number} [options.zoomY=height] The actual height of the canvas with scaling applied
  * @param {me.WebGLCompositor} [options.compositor] A class that implements the compositor API
  */
 class WebGLRenderer extends Renderer {
@@ -43,8 +42,8 @@ class WebGLRenderer extends Renderer {
         /**
          * The WebGL version used by this renderer (1 or 2)
          * @name WebGLVersion
-         * @memberOf me.WebGLRenderer
-         * @type {Number}
+         * @memberof me.WebGLRenderer
+         * @type {number}
          * @default 1
          * @readonly
          */
@@ -53,8 +52,8 @@ class WebGLRenderer extends Renderer {
         /**
          * The vendor string of the underlying graphics driver.
          * @name GPUVendor
-         * @memberOf me.WebGLRenderer
-         * @type {String}
+         * @memberof me.WebGLRenderer
+         * @type {string}
          * @default null
          * @readonly
          */
@@ -63,8 +62,8 @@ class WebGLRenderer extends Renderer {
         /**
          * The renderer string of the underlying graphics driver.
          * @name GPURenderer
-         * @memberOf me.WebGLRenderer
-         * @type {String}
+         * @memberof me.WebGLRenderer
+         * @type {string}
          * @default null
          * @readonly
          */
@@ -73,7 +72,7 @@ class WebGLRenderer extends Renderer {
         /**
          * The WebGL context
          * @name gl
-         * @memberOf me.WebGLRenderer
+         * @memberof me.WebGLRenderer
          * type {WebGLRenderingContext}
          */
         this.context = this.gl = this.getContextGL(this.getScreenCanvas(), options.transparent);
@@ -81,8 +80,8 @@ class WebGLRenderer extends Renderer {
         /**
          * Maximum number of texture unit supported under the current context
          * @name maxTextures
-         * @memberOf me.WebGLRenderer
-         * @type {Number}
+         * @memberof me.WebGLRenderer
+         * @type {number}
          * @readonly
          */
         this.maxTextures = this.gl.getParameter(this.gl.MAX_TEXTURE_IMAGE_UNITS);
@@ -115,22 +114,31 @@ class WebGLRenderer extends Renderer {
         /**
          * The current transformation matrix used for transformations on the overall scene
          * @name currentTransform
-         * @type me.Matrix2d
-         * @memberOf me.WebGLRenderer#
+         * @type {me.Matrix2d}
+         * @memberof me.WebGLRenderer#
          */
         this.currentTransform = new Matrix2d();
 
         /**
          * The current compositor used by the renderer
          * @name currentCompositor
-         * @type me.WebGLCompositor
-         * @memberOf me.WebGLRenderer#
+         * @type {me.WebGLCompositor}
+         * @memberof me.WebGLRenderer#
          */
         this.currentCompositor = null;
 
-        // Create a compositor
-        var Compositor = this.settings.compositor || WebGLCompositor;
-        this.setCompositor(new Compositor(this));
+        /**
+         * The list of active compositors
+         * @name compositors
+         * @type {Map}
+         * @memberof me.WebGLRenderer#
+         */
+        this.compositors = new Map();
+
+        // Create a default compositor
+        var compositor = new (this.settings.compositor || WebGLCompositor)(this);
+        this.compositors.set("default", compositor);
+        this.setCompositor(compositor);
 
 
         // default WebGL state(s)
@@ -172,17 +180,21 @@ class WebGLRenderer extends Renderer {
     /**
      * Reset context state
      * @name reset
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
      */
     reset() {
         super.reset();
-        if (this.isContextValid === false) {
-            // on context lost/restore
-            this.currentCompositor.init(this);
-        } else {
-            this.currentCompositor.reset();
-        }
+
+        this.compositors.forEach((compositor) => {
+            if (this.isContextValid === false) {
+                // on context lost/restore
+                compositor.init(this);
+            } else {
+                compositor.reset();
+            }
+        });
+
         this.gl.disable(this.gl.SCISSOR_TEST);
         if (typeof this.fontContext2D !== "undefined" ) {
             this.createFontTexture(this.cache);
@@ -191,25 +203,37 @@ class WebGLRenderer extends Renderer {
     }
 
     /**
-     * assign a compositor to this renderer
+     * set the active compositor for this renderer
      * @name setCompositor
      * @function
-     * @param {WebGLCompositor} compositor a compositor instance
-     * @memberOf me.WebGLRenderer.prototype
+     * @param {me.WebGLCompositor|string} compositor a compositor name or instance
+     * @memberof me.WebGLRenderer.prototype
      * @function
      */
-    setCompositor(compositor) {
-        if (this.currentCompositor !== null && this.currentCompositor !== compositor) {
-            // flush the current compositor
-            this.currentCompositor.flush();
+    setCompositor(compositor = "default") {
+
+        if (typeof compositor === "string") {
+            compositor = this.compositors.get(compositor);
+        }
+
+        if (typeof compositor === "undefined") {
+            throw new Error("Invalid WebGL Compositor");
+        }
+
+        if (this.currentCompositor !== compositor) {
+            if (this.currentCompositor !== null) {
+                // flush the current compositor
+                this.currentCompositor.flush();
+            }
+            // set given one as current
+            this.currentCompositor = compositor;
         }
-        this.currentCompositor = compositor;
     }
 
     /**
      * Reset the gl transform to identity
      * @name resetTransform
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
      */
     resetTransform() {
@@ -256,11 +280,11 @@ class WebGLRenderer extends Renderer {
     /**
      * Create a pattern with the specified repetition
      * @name createPattern
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
-     * @param {image} image Source image
-     * @param {String} repeat Define how the pattern should be repeated
-     * @return {me.Renderer.Texture}
+     * @param {Image} image Source image
+     * @param {string} repeat Define how the pattern should be repeated
+     * @returns {me.Renderer.Texture}
      * @see me.ImageLayer#repeat
      * @example
      * var tileable   = renderer.createPattern(image, "repeat");
@@ -289,7 +313,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Flush the compositor to the frame buffer
      * @name flush
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
      */
     flush() {
@@ -299,23 +323,22 @@ class WebGLRenderer extends Renderer {
     /**
      * Clears the gl context with the given color.
      * @name clearColor
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
-     * @param {me.Color|String} [color] CSS color.
-     * @param {Boolean} [opaque=false] Allow transparency [default] or clear the surface completely [true]
+     * @param {me.Color|string} [color="#000000"] CSS color.
+     * @param {boolean} [opaque=false] Allow transparency [default] or clear the surface completely [true]
      */
-    clearColor(col, opaque) {
+    clearColor(color = "#000000", opaque = false) {
         var glArray;
 
-        this.save();
-
-        if (col instanceof Color) {
-            glArray = col.toArray();
+        if (color instanceof Color) {
+            glArray = color.toArray();
         } else {
+            var _color = pool.pull("me.Color");
             // reuse temporary the renderer default color object
-            glArray = this.getColor().parseCSS(col).toArray();
+            glArray = _color.parseCSS(color).toArray();
+            pool.push(_color);
         }
-
         // clear gl context with the specified color
         this.currentCompositor.clearColor(glArray[0], glArray[1], glArray[2], (opaque === true) ? 1.0 : glArray[3]);
         this.currentCompositor.clear();
@@ -323,25 +346,23 @@ class WebGLRenderer extends Renderer {
         // restore default clear Color black
         this.currentCompositor.clearColor(0.0, 0.0, 0.0, 0.0);
 
-        this.restore();
     }
 
     /**
      * Erase the pixels in the given rectangular area by setting them to transparent black (rgba(0,0,0,0)).
      * @name clearRect
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @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.
-     * @param {Number} width The rectangle's width.
-     * @param {Number} height The rectangle's height.
+     * @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.
+     * @param {number} height The rectangle's height.
      */
     clearRect(x, y, width, height) {
-        var color = this.currentColor.clone();
-        this.currentColor.copy("#000000");
-        this.fillRect(x, y, width, height);
-        this.currentColor.copy(color);
-        pool.push(color);
+        this.save();
+        this.clipRect(x, y, width, height);
+        this.clearColor();
+        this.restore();
     }
 
     /**
@@ -380,17 +401,17 @@ class WebGLRenderer extends Renderer {
     /**
      * Draw an image to the gl context
      * @name drawImage
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @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.
-     * @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.
-     * @param {Number} sw The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used.
-     * @param {Number} sh The height of the sub-rectangle of the source image to draw into the destination context.
-     * @param {Number} dx The X coordinate in the destination canvas at which to place the top-left corner of the source image.
-     * @param {Number} dy The Y coordinate in the destination canvas at which to place the top-left corner of the source image.
-     * @param {Number} dWidth The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.
-     * @param {Number} dHeight The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.
+     * @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.
+     * @param {number} sw The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used.
+     * @param {number} sh The height of the sub-rectangle of the source image to draw into the destination context.
+     * @param {number} dx The X coordinate in the destination canvas at which to place the top-left corner of the source image.
+     * @param {number} dy The Y coordinate in the destination canvas at which to place the top-left corner of the source image.
+     * @param {number} dw The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.
+     * @param {number} dh The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.
      * @example
      * // Position the image on the canvas:
      * renderer.drawImage(image, dx, dy);
@@ -433,13 +454,13 @@ class WebGLRenderer extends Renderer {
     /**
      * Draw a pattern within the given rectangle.
      * @name drawPattern
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
      * @param {me.Renderer.Texture} pattern Pattern object
-     * @param {Number} x
-     * @param {Number} y
-     * @param {Number} width
-     * @param {Number} height
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
      * @see me.WebGLRenderer#createPattern
      */
     drawPattern(pattern, x, y, width, height) {
@@ -451,9 +472,9 @@ class WebGLRenderer extends Renderer {
     /**
      * return a reference to the screen canvas corresponding WebGL Context
      * @name getScreenContext
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
-     * @return {WebGLRenderingContext}
+     * @returns {WebGLRenderingContext}
      */
     getScreenContext() {
         return this.gl;
@@ -462,11 +483,11 @@ class WebGLRenderer extends Renderer {
     /**
      * Returns the WebGL Context object of the given Canvas
      * @name getContextGL
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
-     * @param {Canvas} canvas
-     * @param {Boolean} [transparent=true] use false to disable transparency
-     * @return {WebGLRenderingContext}
+     * @param {HTMLCanvasElement} canvas
+     * @param {boolean} [transparent=true] use false to disable transparency
+     * @returns {WebGLRenderingContext}
      */
     getContextGL(canvas, transparent) {
         if (typeof canvas === "undefined" || canvas === null) {
@@ -520,9 +541,9 @@ class WebGLRenderer extends Renderer {
      * Returns the WebGLContext instance for the renderer
      * return a reference to the system 2d Context
      * @name getContext
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
-     * @return {WebGLRenderingContext}
+     * @returns {WebGLRenderingContext}
      */
     getContext() {
         return this.gl;
@@ -531,9 +552,9 @@ class WebGLRenderer extends Renderer {
     /**
      * set a blend mode for the given context
      * @name setBlendMode
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
-     * @param {String} [mode="normal"] blend mode : "normal", "multiply"
+     * @param {string} [mode="normal"] blend mode : "normal", "multiply"
      * @param {WebGLRenderingContext} [gl]
      */
     setBlendMode(mode, gl) {
@@ -571,7 +592,7 @@ class WebGLRenderer extends Renderer {
     /**
      * restores the canvas context
      * @name restore
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
      */
     restore() {
@@ -605,7 +626,7 @@ class WebGLRenderer extends Renderer {
     /**
      * saves the canvas context
      * @name save
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
      */
     save() {
@@ -621,9 +642,9 @@ class WebGLRenderer extends Renderer {
     /**
      * rotates the uniform matrix
      * @name rotate
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
-     * @param {Number} angle in radians
+     * @param {number} angle in radians
      */
     rotate(angle) {
         this.currentTransform.rotate(angle);
@@ -632,10 +653,10 @@ class WebGLRenderer extends Renderer {
     /**
      * scales the uniform matrix
      * @name scale
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
-     * @param {Number} x
-     * @param {Number} y
+     * @param {number} x
+     * @param {number} y
      */
     scale(x, y) {
         this.currentTransform.scale(x, y);
@@ -653,21 +674,21 @@ class WebGLRenderer extends Renderer {
     /**
      * Set the global alpha
      * @name setGlobalAlpha
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
-     * @param {Number} alpha 0.0 to 1.0 values accepted.
+     * @param {number} alpha 0.0 to 1.0 values accepted.
      */
-    setGlobalAlpha(a) {
-        this.currentColor.alpha = a;
+    setGlobalAlpha(alpha) {
+        this.currentColor.alpha = alpha;
     }
 
     /**
      * Set the current fill & stroke style color.
      * By default, or upon reset, the value is set to #000000.
      * @name setColor
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
-     * @param {me.Color|String} color css color string.
+     * @param {me.Color|string} color css color string.
      */
     setColor(color) {
         var alpha = this.currentColor.alpha;
@@ -678,9 +699,9 @@ class WebGLRenderer extends Renderer {
     /**
      * Set the line width
      * @name setLineWidth
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
-     * @param {Number} width Line width
+     * @param {number} width Line width
      */
     setLineWidth(width) {
         this.getScreenContext().lineWidth(width);
@@ -689,15 +710,15 @@ class WebGLRenderer extends Renderer {
     /**
      * Stroke an arc at the specified coordinates with given radius, start and end points
      * @name strokeArc
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
-     * @param {Number} x arc center point x-axis
-     * @param {Number} y arc center point y-axis
-     * @param {Number} radius
-     * @param {Number} start start angle in radians
-     * @param {Number} end end angle in radians
-     * @param {Boolean} [antiClockwise=false] draw arc anti-clockwise
-     * @param {Boolean} [fill=false]
+     * @param {number} x arc center point x-axis
+     * @param {number} y arc center point y-axis
+     * @param {number} radius
+     * @param {number} start start angle in radians
+     * @param {number} end end angle in radians
+     * @param {boolean} [antiClockwise=false] draw arc anti-clockwise
+     * @param {boolean} [fill=false]
      */
     strokeArc(x, y, radius, start, end, antiClockwise = false, fill) {
         if (fill === true ) {
@@ -733,14 +754,14 @@ class WebGLRenderer extends Renderer {
     /**
      * Fill an arc at the specified coordinates with given radius, start and end points
      * @name fillArc
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
-     * @param {Number} x arc center point x-axis
-     * @param {Number} y arc center point y-axis
-     * @param {Number} radius
-     * @param {Number} start start angle in radians
-     * @param {Number} end end angle in radians
-     * @param {Boolean} [antiClockwise=false] draw arc anti-clockwise
+     * @param {number} x arc center point x-axis
+     * @param {number} y arc center point y-axis
+     * @param {number} radius
+     * @param {number} start start angle in radians
+     * @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
@@ -776,13 +797,13 @@ class WebGLRenderer extends Renderer {
     /**
      * Stroke an ellipse at the specified coordinates with given radius
      * @name strokeEllipse
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
-     * @param {Number} x ellipse center point x-axis
-     * @param {Number} y ellipse center point y-axis
-     * @param {Number} w horizontal radius of the ellipse
-     * @param {Number} h vertical radius of the ellipse
-     * @param {Boolean} [fill=false] also fill the shape with the current color if true
+     * @param {number} x ellipse center point x-axis
+     * @param {number} y ellipse center point y-axis
+     * @param {number} w horizontal radius of the ellipse
+     * @param {number} h vertical radius of the ellipse
+     * @param {boolean} [fill=false] also fill the shape with the current color if true
      */
     strokeEllipse(x, y, w, h, fill = false) {
         if (fill === true ) {
@@ -813,12 +834,12 @@ class WebGLRenderer extends Renderer {
     /**
      * Fill an ellipse at the specified coordinates with given radius
      * @name fillEllipse
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
-     * @param {Number} x ellipse center point x-axis
-     * @param {Number} y ellipse center point y-axis
-     * @param {Number} w horizontal radius of the ellipse
-     * @param {Number} h vertical radius of the ellipse
+     * @param {number} x ellipse center point x-axis
+     * @param {number} y ellipse center point y-axis
+     * @param {number} w horizontal radius of the ellipse
+     * @param {number} h vertical radius of the ellipse
      */
     fillEllipse(x, y, w, h) {
         // XXX to be optimzed using a specific shader
@@ -848,12 +869,12 @@ class WebGLRenderer extends Renderer {
     /**
      * Stroke a line of the given two points
      * @name strokeLine
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
-     * @param {Number} startX the start x coordinate
-     * @param {Number} startY the start y coordinate
-     * @param {Number} endX the end x coordinate
-     * @param {Number} endY the end y coordinate
+     * @param {number} startX the start x coordinate
+     * @param {number} startY the start y coordinate
+     * @param {number} endX the end x coordinate
+     * @param {number} endY the end y coordinate
      */
     strokeLine(startX, startY, endX, endY) {
         var points = this._glPoints;
@@ -868,12 +889,12 @@ class WebGLRenderer extends Renderer {
     /**
      * Fill a line of the given two points
      * @name fillLine
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
-     * @param {Number} startX the start x coordinate
-     * @param {Number} startY the start y coordinate
-     * @param {Number} endX the end x coordinate
-     * @param {Number} endY the end y coordinate
+     * @param {number} startX the start x coordinate
+     * @param {number} startY the start y coordinate
+     * @param {number} endX the end x coordinate
+     * @param {number} endY the end y coordinate
      */
     fillLine(startX, startY, endX, endY) {
         this.strokeLine(startX, startY, endX, endY);
@@ -882,10 +903,10 @@ class WebGLRenderer extends Renderer {
     /**
      * Stroke a me.Polygon on the screen with a specified color
      * @name strokePolygon
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
      * @param {me.Polygon} poly the shape to draw
-     * @param {Boolean} [fill=false] also fill the shape with the current color if true
+     * @param {boolean} [fill=false] also fill the shape with the current color if true
      */
     strokePolygon(poly, fill = false) {
         if (fill === true ) {
@@ -912,10 +933,10 @@ class WebGLRenderer extends Renderer {
     /**
      * Fill a me.Polygon on the screen
      * @name fillPolygon
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
      * @param {me.Polygon} poly the shape to draw
-    */
+     */
     fillPolygon(poly) {
         var points = poly.points;
         var glPoints = this._glPoints;
@@ -940,13 +961,13 @@ class WebGLRenderer extends Renderer {
     /**
      * Draw a stroke rectangle at the specified coordinates
      * @name strokeRect
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
-     * @param {Number} x
-     * @param {Number} y
-     * @param {Number} width
-     * @param {Number} height
-     * @param {Boolean} [fill=false] also fill the shape with the current color if true
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
+     * @param {boolean} [fill=false] also fill the shape with the current color if true
      */
     strokeRect(x, y, width, height, fill = false) {
         if (fill === true ) {
@@ -968,12 +989,12 @@ class WebGLRenderer extends Renderer {
     /**
      * Draw a filled rectangle at the specified coordinates
      * @name fillRect
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
-     * @param {Number} x
-     * @param {Number} y
-     * @param {Number} width
-     * @param {Number} height
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
      */
     fillRect(x, y, width, height) {
         var glPoints = this._glPoints;
@@ -992,7 +1013,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 me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
      * @param {me.Matrix2d} mat2d Matrix to transform by
      */
@@ -1004,7 +1025,7 @@ class WebGLRenderer extends Renderer {
     /**
      * Multiply given matrix into the renderer tranformation matrix
      * @name transform
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
      * @param {me.Matrix2d} mat2d Matrix to transform by
      */
@@ -1022,10 +1043,10 @@ class WebGLRenderer extends Renderer {
     /**
      * Translates the uniform matrix by the given coordinates
      * @name translate
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
-     * @param {Number} x
-     * @param {Number} y
+     * @param {number} x
+     * @param {number} y
      */
     translate(x, y) {
         var currentTransform = this.currentTransform;
@@ -1045,12 +1066,12 @@ 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 me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
-     * @param {Number} x
-     * @param {Number} y
-     * @param {Number} width
-     * @param {Number} height
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
      */
     clipRect(x, y, width, height) {
         var canvas = this.backBufferCanvas;
@@ -1093,7 +1114,7 @@ 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 me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
      * @param {me.Rect|me.Polygon|me.Line|me.Ellipse} [mask] the shape defining the mask to be applied
      */
@@ -1125,7 +1146,7 @@ class WebGLRenderer extends Renderer {
      * disable (remove) the rendering mask set through setMask.
      * @name clearMask
      * @see me.WebGLRenderer#setMask
-     * @memberOf me.WebGLRenderer.prototype
+     * @memberof me.WebGLRenderer.prototype
      * @function
      */
     clearMask() {