melonjs 10.1.1 → 10.2.3

package/src/video/webgl/webgl_compositor.js

@@ -75,15 +75,6 @@ class WebGLCompositor {
         // local reference
         var gl = renderer.gl;
 
-        /**
-         * The number of quads held in the batch
-         * @name length
-         * @memberOf me.WebGLCompositor
-         * @type Number
-         * @readonly
-         */
-        //this.length = 0;
-
         // list of active texture units
         this.currentTextureUnit = -1;
         this.boundTextures = [];
@@ -181,9 +172,9 @@ class WebGLCompositor {
         for (var i = 0; i < this.renderer.maxTextures; i++) {
             var texture = this.boundTextures[i];
             if (texture !== null) {
+                this.boundTextures[i] = null;
                 this.gl.deleteTexture(texture);
             }
-            this.boundTextures[i] = null;
         }
         this.currentTextureUnit = -1;
 
@@ -196,11 +187,11 @@ class WebGLCompositor {
      * @name addAttribute
      * @memberOf me.WebGLCompositor
      * @function
-     * @param {String} name name of the attribute in the vertex shader
-     * @param {Number} size number of components per vertex attribute. Must be 1, 2, 3, or 4.
+     * @param {string} name name of the attribute in the vertex shader
+     * @param {number} size number of components per vertex attribute. Must be 1, 2, 3, or 4.
      * @param {GLenum} type data type of each component in the array
-     * @param {Boolean} normalized whether integer data values should be normalized into a certain range when being cast to a float
-     * @param {Number} offset offset in bytes of the first component in the vertex attribute array
+     * @param {boolean} normalized whether integer data values should be normalized into a certain range when being cast to a float
+     * @param {number} offset offset in bytes of the first component in the vertex attribute array
      */
     addAttribute(name, size, type, normalized, offset) {
         this.attributes.push({
@@ -217,10 +208,10 @@ class WebGLCompositor {
      * @name setViewport
      * @memberOf me.WebGLCompositor
      * @function
-     * @param {Number} x x position of viewport
-     * @param {Number} y y position of viewport
-     * @param {Number} width width of viewport
-     * @param {Number} height height of viewport
+     * @param {number} x x position of viewport
+     * @param {number} y y position of viewport
+     * @param {number} w width of viewport
+     * @param {number} h height of viewport
      */
     setViewport(x, y, w, h) {
         this.gl.viewport(x, y, w, h);
@@ -231,17 +222,16 @@ class WebGLCompositor {
      * @name createTexture2D
      * @memberOf me.WebGLCompositor
      * @function
-     * @param {Number} unit Destination texture unit
-     * @param {Image|Canvas|ImageData|UInt8Array[]|Float32Array[]} image Source image
-     * @param {Number} filter gl.LINEAR or gl.NEAREST
-     * @param {String} [repeat="no-repeat"] Image repeat behavior (see {@link me.ImageLayer#repeat})
-     * @param {Number} [w] Source image width (Only use with UInt8Array[] or Float32Array[] source image)
-     * @param {Number} [h] Source image height (Only use with UInt8Array[] or Float32Array[] source image)
-     * @param {Number} [b] Source image border (Only use with UInt8Array[] or Float32Array[] source image)
-     * @param {Number} [b] Source image border (Only use with UInt8Array[] or Float32Array[] source image)
-     * @param {Boolean} [premultipliedAlpha=true] Multiplies the alpha channel into the other color channels
-     * @param {Boolean} [mipmap=true] Whether mipmap levels should be generated for this texture
-     * @return {WebGLTexture} a WebGL texture
+     * @param {number} unit Destination texture unit
+     * @param {Image|HTMLCanvasElement|ImageData|Uint8Array[]|Float32Array[]} image Source image
+     * @param {number} filter gl.LINEAR or gl.NEAREST
+     * @param {string} [repeat="no-repeat"] Image repeat behavior (see {@link me.ImageLayer#repeat})
+     * @param {number} [w] Source image width (Only use with UInt8Array[] or Float32Array[] source image)
+     * @param {number} [h] Source image height (Only use with UInt8Array[] or Float32Array[] source image)
+     * @param {number} [b] Source image border (Only use with UInt8Array[] or Float32Array[] source image)
+     * @param {boolean} [premultipliedAlpha=true] Multiplies the alpha channel into the other color channels
+     * @param {boolean} [mipmap=true] Whether mipmap levels should be generated for this texture
+     * @returns {WebGLTexture} a WebGL texture
      */
     createTexture2D(unit, image, filter, repeat = "no-repeat", w, h, b, premultipliedAlpha = true, mipmap = true) {
         var gl = this.gl;
@@ -250,7 +240,7 @@ class WebGLCompositor {
         var rs = (repeat.search(/^repeat(-x)?$/) === 0) && (isPOT || this.renderer.WebGLVersion > 1) ? gl.REPEAT : gl.CLAMP_TO_EDGE;
         var rt = (repeat.search(/^repeat(-y)?$/) === 0) && (isPOT || this.renderer.WebGLVersion > 1) ? gl.REPEAT : gl.CLAMP_TO_EDGE;
 
-        this.setTexture2D(texture, unit);
+        this.bindTexture2D(texture, unit);
 
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, rs);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, rt);
@@ -274,13 +264,13 @@ class WebGLCompositor {
 
     /**
      * assign the given WebGL texture to the current batch
-     * @name setTexture2D
+     * @name bindTexture2D
      * @memberOf me.WebGLCompositor
      * @function
-     * @param {WebGLTexture} a WebGL texture
-     * @param {Number} unit Texture unit to which the given texture is bound
+     * @param {WebGLTexture} texture a WebGL texture
+     * @param {number} unit Texture unit to which the given texture is bound
      */
-    setTexture2D(texture, unit) {
+    bindTexture2D(texture, unit) {
         var gl = this.gl;
 
         if (texture !== this.boundTextures[unit]) {
@@ -300,6 +290,17 @@ class WebGLCompositor {
         }
     }
 
+    /**
+     * unbind the given WebGL texture, forcing it to be reuploaded
+     * @name unbindTexture2D
+     * @memberOf me.WebGLCompositor
+     * @function
+     * @param {WebGLTexture} texture a WebGL texture
+     */
+    unbindTexture2D(texture) {
+        var unit = this.renderer.cache.getUnit(texture);
+        this.boundTextures[unit] = null;
+    }
 
     /**
      * @ignore
@@ -320,7 +321,7 @@ class WebGLCompositor {
                 texture.premultipliedAlpha
             );
         } else {
-            this.setTexture2D(texture2D, unit);
+            this.bindTexture2D(texture2D, unit);
         }
 
         return this.currentTextureUnit;
@@ -363,10 +364,10 @@ class WebGLCompositor {
      * @memberOf me.WebGLCompositor
      * @function
      * @param {me.Renderer.Texture} texture Source texture
-     * @param {Number} x Destination x-coordinate
-     * @param {Number} y Destination y-coordinate
-     * @param {Number} w Destination width
-     * @param {Number} h Destination height
+     * @param {number} x Destination x-coordinate
+     * @param {number} y Destination y-coordinate
+     * @param {number} w Destination width
+     * @param {number} h Destination height
      * @param {number} u0 Texture UV (u0) value.
      * @param {number} v0 Texture UV (v0) value.
      * @param {number} u1 Texture UV (u1) value.
@@ -414,7 +415,7 @@ class WebGLCompositor {
 
     /**
      * Flush batched texture operations to the GPU
-     * @param
+     * @param {number} [mode=gl.TRIANGLES] the GL drawing mode
      * @memberOf me.WebGLCompositor
      * @function
      */
@@ -452,9 +453,9 @@ class WebGLCompositor {
      * @name drawVertices
      * @memberOf me.WebGLCompositor
      * @function
-     * @param {GLENUM} mode primitive type to render (gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, gl.TRIANGLES)
+     * @param {GLenum} mode primitive type to render (gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, gl.TRIANGLES)
      * @param {me.Vector2d[]} verts vertices
-     * @param {Number} [vertexCount=verts.length] amount of points defined in the points array
+     * @param {number} [vertexCount=verts.length] amount of points defined in the points array
      */
     drawVertices(mode, verts, vertexCount = verts.length) {
         // use the primitive shader
@@ -482,10 +483,10 @@ class WebGLCompositor {
      * @name clearColor
      * @memberOf me.WebGLCompositor
      * @function
-     * @param {Number} r - the red color value used when the color buffers are cleared
-     * @param {Number} g - the green color value used when the color buffers are cleared
-     * @param {Number} b - the blue color value used when the color buffers are cleared
-     * @param {Number} a - the alpha color value used when the color buffers are cleared
+     * @param {number} r - the red color value used when the color buffers are cleared
+     * @param {number} g - the green color value used when the color buffers are cleared
+     * @param {number} b - the blue color value used when the color buffers are cleared
+     * @param {number} a - the alpha color value used when the color buffers are cleared
      */
     clearColor(r, g, b, a) {
         this.gl.clearColor(r, g, b, a);

package/src/video/webgl/webgl_renderer.js

@@ -18,19 +18,19 @@ import { isPowerOfTwo, nextPowerOfTwo, TAU } from "./../../math/math.js";
  * @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
+ * @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 {
@@ -44,7 +44,7 @@ class WebGLRenderer extends Renderer {
          * The WebGL version used by this renderer (1 or 2)
          * @name WebGLVersion
          * @memberOf me.WebGLRenderer
-         * @type {Number}
+         * @type {number}
          * @default 1
          * @readonly
          */
@@ -54,7 +54,7 @@ class WebGLRenderer extends Renderer {
          * The vendor string of the underlying graphics driver.
          * @name GPUVendor
          * @memberOf me.WebGLRenderer
-         * @type {String}
+         * @type {string}
          * @default null
          * @readonly
          */
@@ -64,7 +64,7 @@ class WebGLRenderer extends Renderer {
          * The renderer string of the underlying graphics driver.
          * @name GPURenderer
          * @memberOf me.WebGLRenderer
-         * @type {String}
+         * @type {string}
          * @default null
          * @readonly
          */
@@ -82,7 +82,7 @@ class WebGLRenderer extends Renderer {
          * Maximum number of texture unit supported under the current context
          * @name maxTextures
          * @memberOf me.WebGLRenderer
-         * @type {Number}
+         * @type {number}
          * @readonly
          */
         this.maxTextures = this.gl.getParameter(this.gl.MAX_TEXTURE_IMAGE_UNITS);
@@ -115,7 +115,7 @@ class WebGLRenderer extends Renderer {
         /**
          * The current transformation matrix used for transformations on the overall scene
          * @name currentTransform
-         * @type me.Matrix2d
+         * @type {me.Matrix2d}
          * @memberOf me.WebGLRenderer#
          */
         this.currentTransform = new Matrix2d();
@@ -123,7 +123,7 @@ class WebGLRenderer extends Renderer {
         /**
          * The current compositor used by the renderer
          * @name currentCompositor
-         * @type me.WebGLCompositor
+         * @type {me.WebGLCompositor}
          * @memberOf me.WebGLRenderer#
          */
         this.currentCompositor = null;
@@ -258,9 +258,9 @@ class WebGLRenderer extends Renderer {
      * @name createPattern
      * @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");
@@ -301,19 +301,19 @@ class WebGLRenderer extends Renderer {
      * @name clearColor
      * @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 CSS color.
+     * @param {boolean} [opaque=false] Allow transparency [default] or clear the surface completely [true]
      */
-    clearColor(col, opaque) {
+    clearColor(color, opaque) {
         var glArray;
 
         this.save();
 
-        if (col instanceof Color) {
-            glArray = col.toArray();
+        if (color instanceof Color) {
+            glArray = color.toArray();
         } else {
             // reuse temporary the renderer default color object
-            glArray = this.getColor().parseCSS(col).toArray();
+            glArray = this.getColor().parseCSS(color).toArray();
         }
 
         // clear gl context with the specified color
@@ -331,10 +331,10 @@ class WebGLRenderer extends Renderer {
      * @name clearRect
      * @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();
@@ -383,14 +383,14 @@ class WebGLRenderer extends Renderer {
      * @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);
@@ -436,10 +436,10 @@ class WebGLRenderer extends Renderer {
      * @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) {
@@ -453,7 +453,7 @@ class WebGLRenderer extends Renderer {
      * @name getScreenContext
      * @memberOf me.WebGLRenderer.prototype
      * @function
-     * @return {WebGLRenderingContext}
+     * @returns {WebGLRenderingContext}
      */
     getScreenContext() {
         return this.gl;
@@ -464,9 +464,9 @@ class WebGLRenderer extends Renderer {
      * @name getContextGL
      * @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) {
@@ -522,7 +522,7 @@ class WebGLRenderer extends Renderer {
      * @name getContext
      * @memberOf me.WebGLRenderer.prototype
      * @function
-     * @return {WebGLRenderingContext}
+     * @returns {WebGLRenderingContext}
      */
     getContext() {
         return this.gl;
@@ -533,7 +533,7 @@ class WebGLRenderer extends Renderer {
      * @name setBlendMode
      * @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) {
@@ -623,7 +623,7 @@ class WebGLRenderer extends Renderer {
      * @name rotate
      * @memberOf me.WebGLRenderer.prototype
      * @function
-     * @param {Number} angle in radians
+     * @param {number} angle in radians
      */
     rotate(angle) {
         this.currentTransform.rotate(angle);
@@ -634,8 +634,8 @@ class WebGLRenderer extends Renderer {
      * @name scale
      * @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);
@@ -655,10 +655,10 @@ class WebGLRenderer extends Renderer {
      * @name setGlobalAlpha
      * @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;
     }
 
     /**
@@ -667,7 +667,7 @@ class WebGLRenderer extends Renderer {
      * @name setColor
      * @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;
@@ -680,7 +680,7 @@ class WebGLRenderer extends Renderer {
      * @name setLineWidth
      * @memberOf me.WebGLRenderer.prototype
      * @function
-     * @param {Number} width Line width
+     * @param {number} width Line width
      */
     setLineWidth(width) {
         this.getScreenContext().lineWidth(width);
@@ -691,13 +691,13 @@ class WebGLRenderer extends Renderer {
      * @name strokeArc
      * @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 ) {
@@ -735,12 +735,12 @@ class WebGLRenderer extends Renderer {
      * @name fillArc
      * @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
@@ -778,11 +778,11 @@ class WebGLRenderer extends Renderer {
      * @name strokeEllipse
      * @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 ) {
@@ -815,10 +815,10 @@ class WebGLRenderer extends Renderer {
      * @name fillEllipse
      * @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
@@ -850,10 +850,10 @@ class WebGLRenderer extends Renderer {
      * @name strokeLine
      * @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;
@@ -870,10 +870,10 @@ class WebGLRenderer extends Renderer {
      * @name fillLine
      * @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);
@@ -885,7 +885,7 @@ class WebGLRenderer extends Renderer {
      * @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 ) {
@@ -915,7 +915,7 @@ class WebGLRenderer extends Renderer {
      * @memberOf me.WebGLRenderer.prototype
      * @function
      * @param {me.Polygon} poly the shape to draw
-    */
+     */
     fillPolygon(poly) {
         var points = poly.points;
         var glPoints = this._glPoints;
@@ -942,11 +942,11 @@ class WebGLRenderer extends Renderer {
      * @name strokeRect
      * @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 ) {
@@ -970,10 +970,10 @@ class WebGLRenderer extends Renderer {
      * @name fillRect
      * @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;
@@ -1024,8 +1024,8 @@ class WebGLRenderer extends Renderer {
      * @name translate
      * @memberOf me.WebGLRenderer.prototype
      * @function
-     * @param {Number} x
-     * @param {Number} y
+     * @param {number} x
+     * @param {number} y
      */
     translate(x, y) {
         var currentTransform = this.currentTransform;
@@ -1047,10 +1047,10 @@ class WebGLRenderer extends Renderer {
      * @name clipRect
      * @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;