melonjs 10.5.1 → 10.6.1

package/src/video/texture.js

@@ -3,7 +3,7 @@ import WebGLRenderer from "./webgl/webgl_renderer.js";
 import TextureCache from "./texture_cache.js";
 import Sprite from "./../renderable/sprite.js";
 import { renderer } from "./video.js";
-import pool from "./../system/pooling.js";
+import * as pool from "./../system/pooling.js";
 import loader from "./../loader/loader.js";
 import { ETA } from "./../math/math.js";
 

package/src/video/webgl/buffer/vertex.js

@@ -22,9 +22,6 @@ class VertexArrayBuffer {
         // Float32 and Uint32 view of the vertex data array buffer
         this.bufferF32 = new Float32Array(this.buffer);
         this.bufferU32 = new Uint32Array(this.buffer);
-
-
-        return this;
     }
 
     /**

package/src/video/webgl/glshader.js

@@ -285,8 +285,6 @@ class GLShader {
 
         // destroy the shader on context lost (will be recreated on context restore)
         event.on(event.WEBGL_ONCONTEXT_LOST, this.destroy, this);
-
-        return this;
     }
 
     /**

package/src/video/webgl/webgl_compositor.js

@@ -359,6 +359,17 @@ class WebGLCompositor {
         return this.currentTextureUnit;
     }
 
+    /**
+     * set/change the current projection matrix
+     * @name setProjection
+     * @memberof WebGLCompositor
+     * @function
+     * @param {Matrix3d} matrix
+     */
+    setProjection(matrix) {
+        this.activeShader.setUniform("uProjectionMatrix", matrix);
+    }
+
     /**
      * Select the shader to use for compositing
      * @name useShader

package/src/video/webgl/webgl_renderer.js

@@ -7,7 +7,7 @@ import TextureCache from "./../texture_cache.js";
 import { TextureAtlas, createAtlas } from "./../texture.js";
 import { createCanvas, renderer } from "./../video.js";
 import * as event from "./../../system/event.js";
-import pool from "./../../system/pooling.js";
+import * as pool from "./../../system/pooling.js";
 import { isPowerOfTwo, nextPowerOfTwo, TAU } from "./../../math/math.js";
 
 
@@ -100,6 +100,11 @@ class WebGLRenderer extends Renderer {
          */
         this._scissorStack = [];
 
+        /**
+         * @ignore
+         */
+        this._blendStack = [];
+
         /**
          * @ignore
          */
@@ -172,8 +177,6 @@ class WebGLRenderer extends Renderer {
             this.isContextValid = true;
             event.emit(event.WEBGL_ONCONTEXT_RESTORED, this);
         }, false );
-
-        return this;
     }
 
     /**
@@ -319,6 +322,18 @@ class WebGLRenderer extends Renderer {
         this.currentCompositor.flush();
     }
 
+    /**
+     * set/change the current projection matrix (WebGL only)
+     * @name setProjection
+     * @memberof WebGLRenderer.prototype
+     * @function
+     * @param {Matrix3d} matrix
+     */
+    setProjection(matrix) {
+        super.setProjection(matrix);
+        this.currentCompositor.setProjection(matrix);
+    }
+
     /**
      * Clears the gl context with the given color.
      * @name clearColor
@@ -549,28 +564,48 @@ class WebGLRenderer extends Renderer {
     }
 
     /**
-     * set a blend mode for the given context
+     * set a blend mode for the given context. <br>
+     * Supported blend mode between Canvas and WebGL remderer : <br>
+     * - "normal" : this is the default mode and draws new content on top of the existing content <br>
+     * <img src="images/normal-blendmode.png" width="510"/> <br>
+     * - "multiply" : the pixels of the top layer are multiplied with the corresponding pixel of the bottom layer. A darker picture is the result. <br>
+     * <img src="images/multiply-blendmode.png" width="510"/> <br>
+     * - "lighter" : where both content overlap the color is determined by adding color values. <br>
+     * <img src="images/lighter-blendmode.png" width="510"/> <br>
+     * - "screen" : The pixels are inverted, multiplied, and inverted again. A lighter picture is the result (opposite of multiply) <br>
+     * <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
-     * @param {string} [mode="normal"] blend mode : "normal", "multiply"
+     * @param {string} [mode="normal"] blend mode : "normal", "multiply", "lighter", "screen"
      * @param {WebGLRenderingContext} [gl]
      */
-    setBlendMode(mode, gl) {
-        gl = gl || this.gl;
-
-
-        gl.enable(gl.BLEND);
-        switch (mode) {
-            case "multiply" :
-                gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-                this.currentBlendMode = mode;
-                break;
+    setBlendMode(mode = "normal", gl = this.gl) {
 
-            default :
-                gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
-                this.currentBlendMode = "normal";
-                break;
+        if (this.currentBlendMode !== mode) {
+            this.flush();
+            gl.enable(gl.BLEND);
+            this.currentBlendMode = mode;
+
+            switch (mode) {
+                case "screen" :
+                    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR);
+                    break;
+
+                case "lighter" :
+                    gl.blendFunc(gl.ONE, gl.ONE);
+                    break;
+
+                case "multiply" :
+                    gl.blendFunc(gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA);
+                    break;
+
+                default :
+                    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+                    this.currentBlendMode = "normal";
+                    break;
+            }
         }
     }
 
@@ -604,6 +639,8 @@ class WebGLRenderer extends Renderer {
             this.currentColor.copy(color);
             this.currentTransform.copy(matrix);
 
+            this.setBlendMode(this._blendStack.pop());
+
             // recycle objects
             pool.push(color);
             pool.push(matrix);
@@ -636,6 +673,8 @@ class WebGLRenderer extends Renderer {
             // FIXME avoid slice and object realloc
             this._scissorStack.push(this.currentScissor.slice());
         }
+
+        this._blendStack.push(this.getBlendMode());
     }
 
     /**