melonjs 10.2.0 → 10.3.0

package/src/video/webgl/webgl_compositor.js

@@ -9,7 +9,6 @@ import primitiveFragment from "./shaders/primitive.frag";
 import quadVertex from "./shaders/quad.vert";
 import quadFragment from "./shaders/quad.frag";
 
-
 // a pool of resuable vectors
 var V_ARRAY = [
     new Vector2d(),
@@ -18,47 +17,12 @@ var V_ARRAY = [
     new Vector2d()
 ];
 
-// Handy constants
-var VERTEX_SIZE = 2;
-var REGION_SIZE = 2;
-var COLOR_SIZE = 4;
-
-var ELEMENT_SIZE = VERTEX_SIZE + REGION_SIZE + COLOR_SIZE;
-var ELEMENT_OFFSET = ELEMENT_SIZE * Float32Array.BYTES_PER_ELEMENT;
-
-var ELEMENTS_PER_QUAD = 4;
-var INDICES_PER_QUAD = 6;
-
-var MAX_LENGTH = 16000;
-
-/**
- * Create a full index buffer for the element array
- * @ignore
- */
-function createIB() {
-    var indices = [
-        0, 1, 2,
-        2, 1, 3
-    ];
-
-    // ~384KB index buffer
-    var data = new Array(MAX_LENGTH * INDICES_PER_QUAD);
-    for (var i = 0; i < data.length; i++) {
-        data[i] = indices[i % INDICES_PER_QUAD] +
-            ~~(i / INDICES_PER_QUAD) * ELEMENTS_PER_QUAD;
-    }
-
-    return new Uint16Array(data);
-};
-
-
 /**
  * @classdesc
  * A WebGL Compositor object. This class handles all of the WebGL state<br>
  * Pushes texture regions or shape geometry into WebGL buffers, automatically flushes to GPU
  * @class WebGLCompositor
- * @memberOf me
- * @constructor
+ * @memberof me
  * @param {me.WebGLRenderer} renderer the current WebGL renderer session
  */
 class WebGLCompositor {
@@ -75,15 +39,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 = [];
@@ -103,7 +58,7 @@ class WebGLCompositor {
         /**
          * a reference to the active WebGL shader
          * @name activeShader
-         * @memberOf me.WebGLCompositor
+         * @memberof me.WebGLCompositor
          * @type {me.GLShader}
          */
         this.activeShader = null;
@@ -112,7 +67,7 @@ class WebGLCompositor {
          * primitive type to render (gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, gl.TRIANGLES)
          * @name mode
          * @see me.WebGLCompositor
-         * @memberOf me.WebGLCompositor
+         * @memberof me.WebGLCompositor
          * @default gl.TRIANGLES
          */
         this.mode = gl.TRIANGLES;
@@ -121,10 +76,28 @@ class WebGLCompositor {
          * an array of vertex attribute properties
          * @name attributes
          * @see me.WebGLCompositor.addAttribute
-         * @memberOf me.WebGLCompositor
+         * @memberof me.WebGLCompositor
          */
         this.attributes = [];
 
+        /**
+         * the size of a single vertex in bytes
+         * (will automatically be calculated as attributes definitions are added)
+         * @name vertexByteSize
+         * @see me.WebGLCompositor.addAttribute
+         * @memberof me.WebGLCompositor
+         */
+        this.vertexByteSize = 0;
+
+        /**
+         * the size of a single vertex in floats
+         * (will automatically be calculated as attributes definitions are added)
+         * @name vertexSize
+         * @see me.WebGLCompositor.addAttribute
+         * @memberof me.WebGLCompositor
+         */
+        this.vertexSize = 0;
+
         // Load and create shader programs
         this.primitiveShader = new GLShader(this.gl, primitiveVertex, primitiveFragment);
         this.quadShader = new GLShader(this.gl, quadVertex, quadFragment);
@@ -134,27 +107,17 @@ class WebGLCompositor {
         this.addAttribute("aRegion", 2, gl.FLOAT, false, 2 * Float32Array.BYTES_PER_ELEMENT); // 1
         this.addAttribute("aColor",  4, gl.UNSIGNED_BYTE, true, 4 * Float32Array.BYTES_PER_ELEMENT); // 2
 
+        this.vertexBuffer = new VertexArrayBuffer(this.vertexSize, 6); // 6 vertices per quad
+
         // vertex buffer
         gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
-        gl.bufferData(
-            gl.ARRAY_BUFFER,
-            MAX_LENGTH * ELEMENT_OFFSET * ELEMENTS_PER_QUAD,
-            gl.STREAM_DRAW
-        );
-
-        this.vertexBuffer = new VertexArrayBuffer(ELEMENT_SIZE, ELEMENTS_PER_QUAD);
-
-        // Cache index buffer (TODO Remove use for cache by replacing drawElements by drawArrays)
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
-        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, createIB(), gl.STATIC_DRAW);
+        gl.bufferData(gl.ARRAY_BUFFER, this.vertexBuffer.buffer, gl.STREAM_DRAW);
 
         // register to the CANVAS resize channel
         event.on(event.CANVAS_ONRESIZE, (width, height) => {
             this.flush();
             this.setViewport(0, 0, width, height);
         });
-
-        this.reset();
     }
 
     /**
@@ -179,11 +142,10 @@ class WebGLCompositor {
 
         // delete all related bound texture
         for (var i = 0; i < this.renderer.maxTextures; i++) {
-            var texture = this.boundTextures[i];
-            if (texture !== null) {
-                this.gl.deleteTexture(texture);
+            var texture2D = this.getTexture2D(i);
+            if (typeof texture2D !== "undefined") {
+                this.deleteTexture2D(texture2D);
             }
-            this.boundTextures[i] = null;
         }
         this.currentTextureUnit = -1;
 
@@ -194,13 +156,13 @@ class WebGLCompositor {
     /**
      * add vertex attribute property definition to the compositor
      * @name addAttribute
-     * @memberOf me.WebGLCompositor
+     * @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({
@@ -210,17 +172,44 @@ class WebGLCompositor {
             normalized: normalized,
             offset: offset
         });
+
+        switch (type) {
+            case this.gl.BYTE:
+                this.vertexByteSize += size * Int8Array.BYTES_PER_ELEMENT;
+                break;
+            case this.gl.UNSIGNED_BYTE:
+                this.vertexByteSize += size * Uint8Array.BYTES_PER_ELEMENT;
+                break;
+            case this.gl.SHORT:
+                this.vertexByteSize += size * Int16Array.BYTES_PER_ELEMENT;
+                break;
+            case this.gl.UNSIGNED_SHORT:
+                this.vertexByteSize += size * Uint16Array.BYTES_PER_ELEMENT;
+                break;
+            case this.gl.INT:
+                this.vertexByteSize += size * Int32Array.BYTES_PER_ELEMENT;
+                break;
+            case this.gl.UNSIGNED_INT:
+                this.vertexByteSize += size * Uint32Array.BYTES_PER_ELEMENT;
+                break;
+            case this.gl.FLOAT:
+                this.vertexByteSize += size * Float32Array.BYTES_PER_ELEMENT;
+                break;
+            default:
+                throw new Error("Invalid GL Attribute type");
+        }
+        this.vertexSize = this.vertexByteSize / Float32Array.BYTES_PER_ELEMENT;
     }
 
     /**
      * Sets the viewport
      * @name setViewport
-     * @memberOf me.WebGLCompositor
+     * @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);
@@ -229,19 +218,18 @@ class WebGLCompositor {
     /**
      * Create a WebGL texture from an image
      * @name createTexture2D
-     * @memberOf me.WebGLCompositor
+     * @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;
@@ -272,13 +260,38 @@ class WebGLCompositor {
         return texture;
     }
 
+    /**
+     * delete the given WebGL texture
+     * @name bindTexture2D
+     * @memberof me.WebGLCompositor
+     * @function
+     * @param {WebGLTexture} [texture] a WebGL texture to delete
+     * @param {number} [unit] Texture unit to delete
+     */
+    deleteTexture2D(texture) {
+        this.gl.deleteTexture(texture);
+        this.unbindTexture2D(texture);
+    }
+
+    /**
+     * returns the WebGL texture associated to the given texture unit
+     * @name bindTexture2D
+     * @memberof me.WebGLCompositor
+     * @function
+     * @param {number} unit Texture unit to which a texture is bound
+     * @returns {WebGLTexture} texture a WebGL texture
+     */
+    getTexture2D(unit) {
+        return this.boundTextures[unit];
+    }
+
     /**
      * assign the given WebGL texture to the current batch
      * @name bindTexture2D
-     * @memberOf me.WebGLCompositor
+     * @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
      */
     bindTexture2D(texture, unit) {
         var gl = this.gl;
@@ -303,23 +316,33 @@ class WebGLCompositor {
     /**
      * unbind the given WebGL texture, forcing it to be reuploaded
      * @name unbindTexture2D
-     * @memberOf me.WebGLCompositor
+     * @memberof me.WebGLCompositor
      * @function
-     * @param {WebGLTexture} a WebGL texture
+     * @param {WebGLTexture} [texture] a WebGL texture
+     * @param {number} [unit] a WebGL texture
+     * @returns {number} unit the unit number that was associated with the given texture
      */
-    unbindTexture2D(texture) {
-        var unit = this.renderer.cache.getUnit(texture);
-        this.boundTextures[unit] = null;
+    unbindTexture2D(texture, unit) {
+        if (typeof unit === "undefined") {
+            unit = this.boundTextures.indexOf(texture);
+        }
+        if (unit !== -1) {
+            delete this.boundTextures[unit];
+            if (unit === this.currentTextureUnit) {
+                this.currentTextureUnit = -1;
+            }
+        }
+        return unit;
     }
 
     /**
      * @ignore
      */
-    uploadTexture(texture, w, h, b, force) {
+    uploadTexture(texture, w, h, b, force = false) {
         var unit = this.renderer.cache.getUnit(texture);
         var texture2D = this.boundTextures[unit];
 
-        if (texture2D === null || force) {
+        if (typeof texture2D === "undefined" || force) {
             this.createTexture2D(
                 unit,
                 texture.getTexture(),
@@ -341,7 +364,7 @@ class WebGLCompositor {
      * Select the shader to use for compositing
      * @name useShader
      * @see me.GLShader
-     * @memberOf me.WebGLCompositor
+     * @memberof me.WebGLCompositor
      * @function
      * @param {me.GLShader} shader a reference to a GLShader instance
      */
@@ -360,7 +383,7 @@ class WebGLCompositor {
 
                 if (location !== -1) {
                     gl.enableVertexAttribArray(location);
-                    gl.vertexAttribPointer(location, element.size, element.type, element.normalized, ELEMENT_OFFSET, element.offset);
+                    gl.vertexAttribPointer(location, element.size, element.type, element.normalized, this.vertexByteSize, element.offset);
                 } else {
                     gl.disableVertexAttribArray(index);
                 }
@@ -371,18 +394,18 @@ class WebGLCompositor {
     /**
      * Add a textured quad
      * @name addQuad
-     * @memberOf me.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.
      * @param {number} v1 Texture UV (v1) value.
-     * @param {number} tint tint color to be applied to the texture in UINT32 format
+     * @param {number} tint tint color to be applied to the texture in UINT32 (argb) format
      */
     addQuad(texture, x, y, w, h, u0, v0, u1, v1, tint) {
 
@@ -393,8 +416,8 @@ class WebGLCompositor {
 
         this.useShader(this.quadShader);
 
-        if (this.vertexBuffer.isFull(4)) {
-            // is the vertex buffer full if we add 4 more vertices
+        if (this.vertexBuffer.isFull(6)) {
+            // is the vertex buffer full if we add 6 more vertices
             this.flush();
         }
 
@@ -420,13 +443,15 @@ class WebGLCompositor {
         this.vertexBuffer.push(vec0.x, vec0.y, u0, v0, tint);
         this.vertexBuffer.push(vec1.x, vec1.y, u1, v0, tint);
         this.vertexBuffer.push(vec2.x, vec2.y, u0, v1, tint);
+        this.vertexBuffer.push(vec2.x, vec2.y, u0, v1, tint);
+        this.vertexBuffer.push(vec1.x, vec1.y, u1, v0, tint);
         this.vertexBuffer.push(vec3.x, vec3.y, u1, v1, tint);
     }
 
     /**
      * Flush batched texture operations to the GPU
-     * @param
-     * @memberOf me.WebGLCompositor
+     * @param {number} [mode=gl.TRIANGLES] the GL drawing mode
+     * @memberof me.WebGLCompositor
      * @function
      */
     flush(mode = this.mode) {
@@ -444,14 +469,7 @@ class WebGLCompositor {
                 gl.bufferData(gl.ARRAY_BUFFER, vertex.toFloat32(0, vertexCount * vertexSize), gl.STREAM_DRAW);
             }
 
-            // Draw the stream buffer
-            // TODO : finalize the WebGLCompositor implementation (splitting this one into two)
-            // so that different compositor with different attributes/uniforms & drawing method can be used
-            if (this.activeShader === this.primitiveShader) {
-                gl.drawArrays(mode, 0, vertexCount);
-            } else {
-                gl.drawElements(mode, vertexCount / vertex.quadSize * INDICES_PER_QUAD, gl.UNSIGNED_SHORT, 0);
-            }
+            gl.drawArrays(mode, 0, vertexCount);
 
             // clear the vertex buffer
             vertex.clear();
@@ -461,11 +479,11 @@ class WebGLCompositor {
     /**
      * Draw an array of vertices
      * @name drawVertices
-     * @memberOf me.WebGLCompositor
+     * @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
@@ -491,12 +509,12 @@ class WebGLCompositor {
     /**
      * Specify the color values used when clearing color buffers. The values are clamped between 0 and 1.
      * @name clearColor
-     * @memberOf me.WebGLCompositor
+     * @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=0] - the red color value used when the color buffers are cleared
+     * @param {number} [g=0] - the green color value used when the color buffers are cleared
+     * @param {number} [b=0] - the blue color value used when the color buffers are cleared
+     * @param {number} [a=0] - the alpha color value used when the color buffers are cleared
      */
     clearColor(r, g, b, a) {
         this.gl.clearColor(r, g, b, a);
@@ -505,7 +523,7 @@ class WebGLCompositor {
     /**
      * Clear the frame buffer
      * @name clear
-     * @memberOf me.WebGLCompositor
+     * @memberof me.WebGLCompositor
      * @function
      */
     clear() {