melonjs 14.4.0 → 15.0.0

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

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v14.4.0
+ * melonJS Game Engine - v15.0.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -7,14 +7,15 @@
  */
 import Color from '../../math/color.js';
 import Matrix2d from '../../math/matrix2.js';
-import WebGLCompositor from './webgl_compositor.js';
+import QuadCompositor from './compositors/quad_compositor.js';
+import PrimitiveCompositor from './compositors/primitive_compositor.js';
 import Renderer from '../renderer.js';
 import TextureCache from '../texture/cache.js';
 import { TextureAtlas, createAtlas } from '../texture/atlas.js';
-import { createCanvas, renderer } from '../video.js';
-import { emit, ONCONTEXT_LOST, ONCONTEXT_RESTORED } from '../../system/event.js';
+import { renderer } from '../video.js';
+import { emit, on, ONCONTEXT_LOST, ONCONTEXT_RESTORED, GAME_RESET, CANVAS_ONRESIZE } from '../../system/event.js';
 import pool from '../../system/pooling.js';
-import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
+import { isPowerOfTwo } from '../../math/math.js';
 
 /**
  * @classdesc
@@ -36,10 +37,9 @@ import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
      * @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 {WebGLCompositor} [options.compositor] - A class that implements the compositor API
+     * @param {Compositor} [options.compositor] - A class that implements the compositor API for sprite rendering
      */
     constructor(options) {
-
         // parent contructor
         super(options);
 
@@ -54,18 +54,18 @@ import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
         /**
          * The vendor string of the underlying graphics driver.
          * @type {string}
-         * @default null
+         * @default undefined
          * @readonly
          */
-        this.GPUVendor = null;
+        this.GPUVendor = undefined;
 
         /**
          * The renderer string of the underlying graphics driver.
          * @type {string}
-         * @default null
+         * @default undefined
          * @readonly
          */
-        this.GPURenderer = null;
+        this.GPURenderer = undefined;
 
         /**
          * The WebGL context
@@ -74,6 +74,12 @@ import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
          */
         this.context = this.gl = this.getContextGL(this.getCanvas(), options.transparent);
 
+        /**
+         * the vertex buffer used by this WebGL Renderer
+         * @type {WebGLBuffer}
+         */
+        this.vertexBuffer = this.gl.createBuffer();
+
         /**
          * Maximum number of texture unit supported under the current context
          * @type {number}
@@ -111,7 +117,13 @@ import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
          * The current compositor used by the renderer
          * @type {WebGLCompositor}
          */
-        this.currentCompositor = null;
+        this.currentCompositor = undefined;
+
+        /**
+         * a reference to the current shader program used by the renderer
+         * @type {WebGLProgram}
+         */
+        this.currentProgram = undefined;
 
         /**
          * The list of active compositors
@@ -119,10 +131,12 @@ import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
          */
         this.compositors = new Map();
 
-        // Create a default compositor
-        var compositor = new (this.settings.compositor || WebGLCompositor)(this);
-        this.compositors.set("default", compositor);
-        this.setCompositor(compositor);
+        // bind the vertex buffer
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexBuffer);
+
+        // Create both quad and primitive compositor
+        this.addCompositor(new (this.settings.compositor || QuadCompositor)(this), "quad", true);
+        this.addCompositor(new (this.settings.compositor || PrimitiveCompositor)(this), "primitive");
 
 
         // default WebGL state(s)
@@ -140,6 +154,10 @@ import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
             this.GPURenderer = this.gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
         }
 
+        // a private property that when set will make `setCompositor`
+        // to use this specific shader instead of the default one
+        this.customShader = undefined;
+
         // Create a texture cache
         this.cache = new TextureCache(this.maxTextures);
 
@@ -160,6 +178,17 @@ import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
             this.isContextValid = true;
             emit(ONCONTEXT_RESTORED, this);
         }, false );
+
+        // reset the renderer on game reset
+        on(GAME_RESET, () => {
+            this.reset();
+        });
+
+        // register to the CANVAS resize channel
+        on(CANVAS_ONRESIZE, (width, height) => {
+            this.flush();
+            this.setViewport(0, 0, width, height);
+        });
     }
 
     /**
@@ -168,6 +197,21 @@ import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
     reset() {
         super.reset();
 
+        // clear gl context
+        this.clear();
+
+        // initial viewport size
+        this.setViewport();
+
+        // rebind the vertex buffer if required (e.g in case of context loss)
+        if (this.gl.getParameter(this.gl.ARRAY_BUFFER_BINDING) !== this.vertexBuffer) {
+            this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexBuffer);
+        }
+
+        this.currentCompositor = undefined;
+        this.currentProgram = undefined;
+        this.customShader = undefined;
+
         this.compositors.forEach((compositor) => {
             if (this.isContextValid === false) {
                 // on context lost/restore
@@ -177,35 +221,62 @@ import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
             }
         });
 
+        this.setCompositor("quad");
+
         this.gl.disable(this.gl.SCISSOR_TEST);
-        if (typeof this.fontContext2D !== "undefined" ) {
-            this.createFontTexture(this.cache);
+    }
+
+    /**
+     * add a new compositor to this renderer
+     * @param {Compositor} compositor - a compositor instance
+     * @param {String} name - a name uniquely identifying this compositor
+     * @param {Boolean} [activate=false] - true if the given compositor should be set as the active one
+     */
+    addCompositor(compositor, name = "default", activate = false) {
+        // make sure there is no existing compositor with the same name
+        if (typeof this.compositors.get(name) !== "undefined") {
+            throw new Error("Invalid Compositor name");
         }
 
+        // add the new compositor
+        this.compositors.set(name, compositor);
+
+        if (activate === true) {
+            // set as active one
+            this.setCompositor(name);
+        }
     }
 
     /**
      * set the active compositor for this renderer
-     * @param {WebGLCompositor|string} compositor - a compositor name or instance
+     * @param {String} name - a compositor name
+     * @param {GLShader} [shader] - an optional shader program to be used, instead of the default one, when activating the compositor
+     * @return {Compositor} an instance to the current active compositor
      */
-    setCompositor(compositor = "default") {
-
-        if (typeof compositor === "string") {
-            compositor = this.compositors.get(compositor);
-        }
+    setCompositor(name = "default", shader = this.customShader) {
+        let compositor = this.compositors.get(name);
 
         if (typeof compositor === "undefined") {
-            throw new Error("Invalid WebGL Compositor");
+            throw new Error("Invalid Compositor");
         }
 
         if (this.currentCompositor !== compositor) {
-            if (this.currentCompositor !== null) {
+            if (this.currentCompositor !== undefined) {
                 // flush the current compositor
                 this.currentCompositor.flush();
             }
-            // set given one as current
+            // set as the active one
             this.currentCompositor = compositor;
         }
+
+        if (name === "quad" && typeof shader === "object") {
+            this.currentCompositor.useShader(shader);
+        } else {
+            // (re)bind the compositor with the default shader (program & attributes)
+            this.currentCompositor.bind();
+        }
+
+        return this.currentCompositor;
     }
 
     /**
@@ -215,43 +286,6 @@ import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
         this.currentTransform.identity();
     }
 
-    /**
-     * @ignore
-     */
-    createFontTexture(cache) {
-        if (typeof this.fontTexture === "undefined") {
-            var canvas = this.getCanvas();
-            var width = canvas.width;
-            var height = canvas.height;
-
-            if (this.WebGLVersion === 1) {
-                if (!isPowerOfTwo(width)) {
-                    width = nextPowerOfTwo(canvas.width);
-                }
-                if (!isPowerOfTwo(height)) {
-                    height = nextPowerOfTwo(canvas.height);
-                }
-            }
-
-            var image = createCanvas(width, height, true);
-
-            /**
-             * @ignore
-             */
-            this.fontContext2D = this.getContext2d(image);
-
-            /**
-             * @ignore
-             */
-            this.fontTexture = new TextureAtlas(createAtlas(canvas.width, canvas.height, "fontTexture"), image, cache);
-            this.currentCompositor.uploadTexture(this.fontTexture, 0, 0, 0);
-
-        } else {
-           // fontTexture was already created, just add it back into the cache
-           cache.set(this.fontContext2D.canvas, this.fontTexture);
-       }
-    }
-
     /**
      * Create a pattern with the specified repetition
      * @param {Image} image - Source image
@@ -266,6 +300,8 @@ import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
      */
     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;
             throw new Error(
@@ -299,10 +335,23 @@ import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
     }
 
     /**
-     * prepare the framebuffer for drawing a new frame
+     * Sets the WebGL viewport, which specifies the affine transformation of x and y from normalized device coordinates to window coordinates
+     * @param {number} [x = 0] - x the horizontal coordinate for the lower left corner of the viewport origin
+     * @param {number} [y = 0] - y the vertical coordinate for the lower left corner of the viewport origin
+     * @param {number} [w = width of the canvas] - the width of viewport
+     * @param {number} [h = height of the canvas] - the height of viewport
+     */
+    setViewport(x = 0, y = 0, w = this.getCanvas().width, h = this.getCanvas().height) {
+        this.gl.viewport(x, y, w, h);
+    }
+
+    /**
+     * Clear the frame buffer
      */
     clear() {
-        this.currentCompositor.clear(this.settings.transparent ? 0.0 : 1.0);
+        var 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);
     }
 
     /**
@@ -312,6 +361,7 @@ import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
      */
     clearColor(color = "#000000", opaque = false) {
         var glArray;
+        var gl = this.gl;
 
         if (color instanceof Color) {
             glArray = color.toArray();
@@ -321,8 +371,10 @@ import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
             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]);
+        gl.clearColor(glArray[0], glArray[1], glArray[2], (opaque === true) ? 1.0 : glArray[3]);
+        gl.clear(gl.COLOR_BUFFER_BIT);
     }
 
     /**
@@ -339,39 +391,6 @@ import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
         this.restore();
     }
 
-    /**
-     * @ignore
-     */
-    drawFont(bounds) {
-        var fontContext = this.getFontContext();
-
-        // Force-upload the new texture
-        this.currentCompositor.uploadTexture(this.fontTexture, 0, 0, 0, true);
-
-        // Add the new quad
-        var uvs = this.fontTexture.getUVs(bounds.left + "," + bounds.top + "," + bounds.width + "," + bounds.height);
-        this.currentCompositor.addQuad(
-            this.fontTexture,
-            bounds.left,
-            bounds.top,
-            bounds.width,
-            bounds.height,
-            uvs[0],
-            uvs[1],
-            uvs[2],
-            uvs[3],
-            this.currentTint.toUint32(this.getGlobalAlpha())
-        );
-
-        // Clear font context2D
-        fontContext.clearRect(
-            bounds.left,
-            bounds.top,
-            bounds.width,
-            bounds.height
-        );
-    }
-
     /**
      * 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.
@@ -417,6 +436,8 @@ import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
             dy |= 0;
         }
 
+        this.setCompositor("quad");
+
         var texture = this.cache.get(image);
         var 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()));
@@ -433,6 +454,7 @@ import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
      */
     drawPattern(pattern, x, y, width, height) {
         var 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()));
     }
 
@@ -539,20 +561,6 @@ import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
         }
     }
 
-    /**
-     * return a reference to the font 2d Context
-     * @ignore
-     */
-    getFontContext() {
-        if (typeof this.fontContext2D === "undefined" ) {
-            // warn the end user about performance impact
-            console.warn("[WebGL Renderer] WARNING : Using Standard me.Text with WebGL will severly impact performances !");
-            // create the font texture if not done yet
-            this.createFontTexture(this.cache);
-        }
-        return this.fontContext2D;
-    }
-
     /**
      * restores the canvas context
      */
@@ -673,10 +681,7 @@ import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
      * @param {boolean} [fill=false]
      */
     strokeArc(x, y, radius, start, end, antiClockwise = false, fill = false) {
-        if (this.getGlobalAlpha() < 1 / 255) {
-            // Fast path: don't draw fully transparent
-            return;
-        }
+        this.setCompositor("primitive");
         this.path2D.beginPath();
         this.path2D.arc(x, y, radius, start, end, antiClockwise);
         if (fill === false) {
@@ -709,15 +714,12 @@ import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
      * @param {boolean} [fill=false] - also fill the shape with the current color if true
      */
     strokeEllipse(x, y, w, h, fill = false) {
-        if (this.getGlobalAlpha() < 1 / 255) {
-            // Fast path: don't draw fully transparent
-            return;
-        }
+        this.setCompositor("primitive");
         this.path2D.beginPath();
         this.path2D.ellipse(x, y, w, h, 0, 0, 360);
         this.path2D.closePath();
         if (fill === false) {
-            this.currentCompositor.drawVertices(this.gl.LINE_LOOP, this.path2D.points);
+            this.currentCompositor.drawVertices(this.gl.LINE_STRIP, this.path2D.points);
         } else {
             this.currentCompositor.drawVertices(this.gl.TRIANGLES, this.path2D.triangulatePath());
         }
@@ -742,14 +744,11 @@ import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
      * @param {number} endY - the end y coordinate
      */
     strokeLine(startX, startY, endX, endY) {
-        if (this.getGlobalAlpha() < 1 / 255) {
-            // Fast path: don't draw fully transparent
-            return;
-        }
+        this.setCompositor("primitive");
         this.path2D.beginPath();
         this.path2D.moveTo(startX, startY);
         this.path2D.lineTo(endX, endY);
-        this.currentCompositor.drawVertices(this.gl.LINE_STRIP, this.path2D.points);
+        this.currentCompositor.drawVertices(this.gl.LINES, this.path2D.points);
     }
 
 
@@ -770,22 +769,19 @@ import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
      * @param {boolean} [fill=false] - also fill the shape with the current color if true
      */
     strokePolygon(poly, fill = false) {
-        if (this.getGlobalAlpha() < 1 / 255) {
-            // Fast path: don't draw fully transparent
-            return;
-        }
+        this.setCompositor("primitive");
         this.translate(poly.pos.x, poly.pos.y);
         this.path2D.beginPath();
-        this.path2D.moveTo(poly.points[0].x, poly.points[0].y);
-        var point;
-        for (var i = 1; i < poly.points.length; i++) {
-            point = poly.points[i];
-            this.path2D.lineTo(point.x, point.y);
+
+        var points = poly.points;
+        for (var 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);
         }
-        this.path2D.lineTo(poly.points[0].x, poly.points[0].y);
+        this.path2D.lineTo(points[points.length - 1].x, points[points.length - 1].y);
         this.path2D.closePath();
         if (fill === false) {
-            this.currentCompositor.drawVertices(this.gl.LINE_LOOP, this.path2D.points);
+            this.currentCompositor.drawVertices(this.gl.LINES, this.path2D.points);
         } else {
             // draw all triangles
             this.currentCompositor.drawVertices(this.gl.TRIANGLES, this.path2D.triangulatePath());
@@ -810,14 +806,11 @@ import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
      * @param {boolean} [fill=false] - also fill the shape with the current color if true
      */
     strokeRect(x, y, width, height, fill = false) {
-        if (this.getGlobalAlpha() < 1 / 255) {
-            // Fast path: don't draw fully transparent
-            return;
-        }
+        this.setCompositor("primitive");
         this.path2D.beginPath();
         this.path2D.rect(x, y, width, height);
         if (fill === false) {
-            this.currentCompositor.drawVertices(this.gl.LINE_LOOP, this.path2D.points);
+            this.currentCompositor.drawVertices(this.gl.LINES, this.path2D.points);
         } else {
             this.currentCompositor.drawVertices(this.gl.TRIANGLES, this.path2D.triangulatePath());
         }
@@ -844,14 +837,11 @@ import { isPowerOfTwo, nextPowerOfTwo } from '../../math/math.js';
      * @param {boolean} [fill=false] - also fill the shape with the current color if true
      */
     strokeRoundRect(x, y, width, height, radius, fill = false) {
-        if (this.getGlobalAlpha() < 1 / 255) {
-            // Fast path: don't draw fully transparent
-            return;
-        }
+        this.setCompositor("primitive");
         this.path2D.beginPath();
         this.path2D.roundRect(x, y, width, height, radius);
         if (fill === false) {
-            this.currentCompositor.drawVertices(this.gl.LINE_LOOP, this.path2D.points);
+            this.currentCompositor.drawVertices(this.gl.LINE_STRIP, this.path2D.points);
         } else {
             this.path2D.closePath();
             this.currentCompositor.drawVertices(this.gl.TRIANGLES, this.path2D.triangulatePath());