melonjs 15.0.0 → 15.1.0

package/dist/melonjs.mjs/video/webgl/utils/program.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v15.0.0
+ * melonJS Game Engine - v15.1.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -9,7 +9,7 @@
  * @ignore
  */
 function compileShader(gl, type, source) {
-    var shader = gl.createShader(type);
+    let shader = gl.createShader(type);
     gl.shaderSource(shader, source);
     gl.compileShader(shader);
 
@@ -25,10 +25,10 @@ function compileShader(gl, type, source) {
  * @ignore
  */
 function compileProgram(gl, vertex, fragment, attributes) {
-    var vertShader = compileShader(gl, gl.VERTEX_SHADER, vertex);
-    var fragShader = compileShader(gl, gl.FRAGMENT_SHADER, fragment);
+    let vertShader = compileShader(gl, gl.VERTEX_SHADER, vertex);
+    let fragShader = compileShader(gl, gl.FRAGMENT_SHADER, fragment);
 
-    var program = gl.createProgram();
+    let program = gl.createProgram();
 
     gl.attachShader(program, vertShader);
     gl.attachShader(program, fragShader);
@@ -36,14 +36,14 @@ function compileProgram(gl, vertex, fragment, attributes) {
 
     // force vertex attributes to use location 0 as starting location to prevent
     // browser to do complicated emulation when running on desktop OpenGL (e.g. on macOS)
-    for (var location in attributes) {
+    for (let location in attributes) {
         gl.bindAttribLocation(program, attributes[location], location);
     }
 
     gl.linkProgram(program);
 
     if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-        var error_msg =
+        let error_msg =
             "Error initializing Shader " + this + "\n" +
             "gl.VALIDATE_STATUS: " + gl.getProgramParameter(program, gl.VALIDATE_STATUS) + "\n" +
             "gl.getError()" + gl.getError() + "\n" +

package/dist/melonjs.mjs/video/webgl/utils/string.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v15.0.0
+ * melonJS Game Engine - v15.1.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license

package/dist/melonjs.mjs/video/webgl/utils/uniforms.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v15.0.0
+ * melonJS Game Engine - v15.1.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -32,7 +32,7 @@ const fnHash = {
  * @ignore
  */
 function extractUniforms(gl, shader) {
-    var uniforms = {},
+    let uniforms = {},
         uniRx = /uniform\s+(\w+)\s+(\w+)/g,
         uniformsData = {},
         descriptor = {},
@@ -48,7 +48,7 @@ function extractUniforms(gl, shader) {
 
     // Get uniform references
     Object.keys(uniformsData).forEach((name) => {
-        var type = uniformsData[name];
+        let type = uniformsData[name];
         locations[name] = gl.getUniformLocation(shader.program, name);
 
         descriptor[name] = {
@@ -74,7 +74,7 @@ function extractUniforms(gl, shader) {
                      * A generic setter for uniform vectors
                      */
                     return function (val) {
-                        var fnv = fn;
+                        let fnv = fn;
                         if (val.length && fn.slice(-1) !== "v") {
                             fnv += "v";
                         }

package/dist/melonjs.mjs/video/webgl/webgl_renderer.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v15.0.0
+ * melonJS Game Engine - v15.1.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -34,6 +34,7 @@ import { isPowerOfTwo } from '../../math/math.js';
      * @param {boolean} [options.premultipliedAlpha=true] - in WebGL, whether the renderer will assume that colors have premultiplied alpha when canvas transparency is 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 {boolean} [options.depthTest="sorting"] - ~Experimental~ the default method to sort object on the z axis in WebGL ("sorting", "z-buffer")
      * @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
@@ -72,7 +73,7 @@ import { isPowerOfTwo } from '../../math/math.js';
          * @name gl
          * @type {WebGLRenderingContext}
          */
-        this.context = this.gl = this.getContextGL(this.getCanvas(), options.transparent);
+        this.context = this.gl = this.getContextGL(this.getCanvas(), options.transparent, options.depthTest === "z-buffer");
 
         /**
          * the vertex buffer used by this WebGL Renderer
@@ -138,9 +139,20 @@ import { isPowerOfTwo } from '../../math/math.js';
         this.addCompositor(new (this.settings.compositor || QuadCompositor)(this), "quad", true);
         this.addCompositor(new (this.settings.compositor || PrimitiveCompositor)(this), "primitive");
 
+        // depth Test settings
+        this.depthTest = options.depthTest;
 
         // default WebGL state(s)
-        this.gl.disable(this.gl.DEPTH_TEST);
+        if (this.depthTest === "z-buffer") {
+            this.gl.enable(this.gl.DEPTH_TEST);
+            // https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/depthFunc
+            this.gl.depthFunc(this.gl.LEQUAL);
+            this.gl.depthMask(true);
+        } else {
+            this.gl.disable(this.gl.DEPTH_TEST);
+            this.gl.depthMask(false);
+        }
+
         this.gl.disable(this.gl.SCISSOR_TEST);
         this.gl.enable(this.gl.BLEND);
 
@@ -148,7 +160,7 @@ import { isPowerOfTwo } from '../../math/math.js';
         this.setBlendMode(this.settings.blendMode);
 
         // get GPU vendor and renderer
-        var debugInfo = this.gl.getExtension("WEBGL_debug_renderer_info");
+        let debugInfo = this.gl.getExtension("WEBGL_debug_renderer_info");
         if (debugInfo !== null) {
             this.GPUVendor = this.gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
             this.GPURenderer = this.gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
@@ -165,7 +177,7 @@ import { isPowerOfTwo } from '../../math/math.js';
         this.type =  "WebGL" + this.WebGLVersion;
 
         // to simulate context lost and restore in WebGL:
-        // var ctx = me.video.renderer.context.getExtension('WEBGL_lose_context');
+        // let ctx = me.video.renderer.context.getExtension('WEBGL_lose_context');
         // ctx.loseContext()
         this.getCanvas().addEventListener("webglcontextlost", (e) => {
             e.preventDefault();
@@ -288,29 +300,29 @@ import { isPowerOfTwo } from '../../math/math.js';
 
     /**
      * Create a pattern with the specified repetition
-     * @param {Image} image - Source image
+     * @param {HTMLImageElement|SVGImageElement|HTMLVideoElement|HTMLCanvasElement|ImageBitmap|OffscreenCanvas|VideoFrame} image - Source image to be used as the pattern's image
      * @param {string} repeat - Define how the pattern should be repeated
      * @returns {TextureAtlas}
      * @see ImageLayer#repeat
      * @example
-     * var tileable   = renderer.createPattern(image, "repeat");
-     * var horizontal = renderer.createPattern(image, "repeat-x");
-     * var vertical   = renderer.createPattern(image, "repeat-y");
-     * var basic      = renderer.createPattern(image, "no-repeat");
+     * let tileable   = renderer.createPattern(image, "repeat");
+     * let horizontal = renderer.createPattern(image, "repeat-x");
+     * let vertical   = renderer.createPattern(image, "repeat-y");
+     * let basic      = renderer.createPattern(image, "no-repeat");
      */
     createPattern(image, repeat) {
 
         this.setCompositor("quad");
 
         if (renderer.WebGLVersion === 1 && (!isPowerOfTwo(image.width) || !isPowerOfTwo(image.height))) {
-            var src = typeof image.src !== "undefined" ? image.src : image;
+            let src = typeof image.src !== "undefined" ? image.src : image;
             throw new Error(
                 "[WebGL Renderer] " + src + " is not a POT texture " +
                 "(" + image.width + "x" + image.height + ")"
             );
         }
 
-        var texture = new TextureAtlas(createAtlas(image.width, image.height, "pattern", repeat), image);
+        let texture = new TextureAtlas(createAtlas(image.width, image.height, "pattern", repeat), image);
 
         // FIXME: Remove old cache entry and texture when changing the repeat mode
         this.currentCompositor.uploadTexture(texture);
@@ -349,9 +361,13 @@ import { isPowerOfTwo } from '../../math/math.js';
      * Clear the frame buffer
      */
     clear() {
-        var gl = this.gl;
+        let gl = this.gl;
         gl.clearColor(0, 0, 0, this.settings.transparent ? 0.0 : 1.0);
-        gl.clear(gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
+        if (this.depthTest === "z-buffer") {
+            gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
+        } else {
+            gl.clear(gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
+        }
     }
 
     /**
@@ -360,13 +376,13 @@ import { isPowerOfTwo } from '../../math/math.js';
      * @param {boolean} [opaque=false] - Allow transparency [default] or clear the surface completely [true]
      */
     clearColor(color = "#000000", opaque = false) {
-        var glArray;
-        var gl = this.gl;
+        let glArray;
+        let gl = this.gl;
 
         if (color instanceof Color) {
             glArray = color.toArray();
         } else {
-            var _color = pool.pull("me.Color");
+            let _color = pool.pull("me.Color");
             // reuse temporary the renderer default color object
             glArray = _color.parseCSS(color).toArray();
             pool.push(_color);
@@ -393,7 +409,7 @@ import { isPowerOfTwo } from '../../math/math.js';
 
     /**
      * Draw an image to the gl context
-     * @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 {HTMLImageElement|SVGImageElement|HTMLVideoElement|HTMLCanvasElement|ImageBitmap|OffscreenCanvas|VideoFrame} image - An element to draw into the context.
      * @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.
@@ -438,8 +454,8 @@ import { isPowerOfTwo } from '../../math/math.js';
 
         this.setCompositor("quad");
 
-        var texture = this.cache.get(image);
-        var uvs = texture.getUVs(sx + "," + sy + "," + sw + "," + sh);
+        let texture = this.cache.get(image);
+        let uvs = texture.getUVs(sx + "," + sy + "," + sw + "," + sh);
         this.currentCompositor.addQuad(texture, dx, dy, dw, dh, uvs[0], uvs[1], uvs[2], uvs[3], this.currentTint.toUint32(this.getGlobalAlpha()));
     }
 
@@ -453,7 +469,7 @@ import { isPowerOfTwo } from '../../math/math.js';
      * @see WebGLRenderer#createPattern
      */
     drawPattern(pattern, x, y, width, height) {
-        var uvs = pattern.getUVs("0,0," + width + "," + height);
+        let uvs = pattern.getUVs("0,0," + width + "," + height);
         this.setCompositor("quad");
         this.currentCompositor.addQuad(pattern, x, y, width, height, uvs[0], uvs[1], uvs[2], uvs[3], this.currentTint.toUint32(this.getGlobalAlpha()));
     }
@@ -462,9 +478,10 @@ import { isPowerOfTwo } from '../../math/math.js';
      * Returns the WebGL Context object of the given canvas element
      * @param {HTMLCanvasElement} canvas
      * @param {boolean} [transparent=false] - use true to enable transparency
+     * @param {boolean} [depth=false] - use true to enable depth buffer testing
      * @returns {WebGLRenderingContext}
      */
-    getContextGL(canvas, transparent = false) {
+    getContextGL(canvas, transparent = false, depth = false) {
         if (typeof canvas === "undefined" || canvas === null) {
             throw new Error(
                 "You must pass a canvas element in order to create " +
@@ -472,10 +489,10 @@ import { isPowerOfTwo } from '../../math/math.js';
             );
         }
 
-        var attr = {
+        let attr = {
             alpha : transparent,
             antialias : this.settings.antiAlias,
-            depth : false,
+            depth : depth,
             stencil: true,
             preserveDrawingBuffer : false,
             premultipliedAlpha: transparent ? this.settings.premultipliedAlpha : false,
@@ -483,7 +500,7 @@ import { isPowerOfTwo } from '../../math/math.js';
             failIfMajorPerformanceCaveat : this.settings.failIfMajorPerformanceCaveat
         };
 
-        var gl;
+        let gl;
 
         // attempt to create a WebGL2 context if requested
         if (this.settings.preferWebGL1 === false) {
@@ -567,8 +584,8 @@ import { isPowerOfTwo } from '../../math/math.js';
     restore() {
         // do nothing if there is no saved states
         if (this._matrixStack.length !== 0) {
-            var color = this._colorStack.pop();
-            var matrix = this._matrixStack.pop();
+            let color = this._colorStack.pop();
+            let matrix = this._matrixStack.pop();
 
             // restore the previous context
             this.currentColor.copy(color);
@@ -657,7 +674,7 @@ import { isPowerOfTwo } from '../../math/math.js';
      * @param {Color|string} color - css color string.
      */
     setColor(color) {
-        var alpha = this.currentColor.alpha;
+        let alpha = this.currentColor.alpha;
         this.currentColor.copy(color);
         this.currentColor.alpha *= alpha;
     }
@@ -773,8 +790,8 @@ import { isPowerOfTwo } from '../../math/math.js';
         this.translate(poly.pos.x, poly.pos.y);
         this.path2D.beginPath();
 
-        var points = poly.points;
-        for (var i = 1; i < points.length; i++) {
+        let points = poly.points;
+        for (let i = 1; i < points.length; i++) {
             this.path2D.moveTo(points[i-1].x, points[i-1].y);
             this.path2D.lineTo(points[i].x, points[i].y);
         }
@@ -895,11 +912,11 @@ import { isPowerOfTwo } from '../../math/math.js';
      * @param {Matrix2d} mat2d - Matrix to transform by
      */
     transform(mat2d) {
-        var currentTransform = this.currentTransform;
+        let currentTransform = this.currentTransform;
         currentTransform.multiply(mat2d);
         if (this.settings.subPixel === false) {
             // snap position values to pixel grid
-            var a = currentTransform.toArray();
+            let a = currentTransform.toArray();
             a[6] |= 0;
             a[7] |= 0;
         }
@@ -911,11 +928,11 @@ import { isPowerOfTwo } from '../../math/math.js';
      * @param {number} y
      */
     translate(x, y) {
-        var currentTransform = this.currentTransform;
+        let currentTransform = this.currentTransform;
         currentTransform.translate(x, y);
         if (this.settings.subPixel === false) {
             // snap position values to pixel grid
-            var a = currentTransform.toArray();
+            let a = currentTransform.toArray();
             a[6] |= 0;
             a[7] |= 0;
         }
@@ -933,11 +950,11 @@ import { isPowerOfTwo } from '../../math/math.js';
      * @param {number} height
      */
     clipRect(x, y, width, height) {
-        var canvas = this.getCanvas();
-        var gl = this.gl;
+        let canvas = this.getCanvas();
+        let gl = this.gl;
         // if requested box is different from the current canvas size
         if (x !== 0 || y !== 0 || width !== canvas.width || height !== canvas.height) {
-            var currentScissor = this.currentScissor;
+            let currentScissor = this.currentScissor;
             if (gl.isEnabled(gl.SCISSOR_TEST)) {
                 // if same as the current scissor box do nothing
                 if (currentScissor[0] === x && currentScissor[1] === y &&
@@ -976,7 +993,7 @@ import { isPowerOfTwo } from '../../math/math.js';
      * @param {boolean} [invert=false] - either the given shape should define what is visible (default) or the opposite
      */
     setMask(mask, invert = false) {
-        var gl = this.gl;
+        let gl = this.gl;
 
         // flush the compositor
         this.flush();