melonjs 10.2.3 → 10.3.0

package/src/video/video.js

@@ -10,7 +10,7 @@ import { initialized, version } from "./../index.js";
 /**
  * video functions
  * @namespace me.video
- * @memberOf me
+ * @memberof me
  */
 
 var designRatio = 1;
@@ -126,7 +126,7 @@ function onresize() {
 /**
  * Select the HTML5 Canvas renderer
  * @name CANVAS
- * @memberOf me.video
+ * @memberof me.video
  * @constant
  */
 export const CANVAS = 0;
@@ -134,7 +134,7 @@ export const CANVAS = 0;
 /**
  * Select the WebGL renderer
  * @name WEBGL
- * @memberOf me.video
+ * @memberof me.video
  * @constant
  */
 export const WEBGL = 1;
@@ -142,7 +142,7 @@ export const WEBGL = 1;
 /**
  * Auto-select the renderer (Attempt WebGL first, with fallback to Canvas)
  * @name AUTO
- * @memberOf me.video
+ * @memberof me.video
  * @constant
  */
 export const AUTO = 2;
@@ -153,7 +153,7 @@ export const AUTO = 2;
  * @type {HTMLElement}
  * @readonly
  * @name parent
- * @memberOf me.video
+ * @memberof me.video
  */
 export let parent = null;
 
@@ -162,7 +162,7 @@ export let parent = null;
  * @name scaleRatio
  * @type {me.Vector2d}
  * @default <1,1>
- * @memberOf me.video
+ * @memberof me.video
  */
 export let scaleRatio = new Vector2d(1, 1);
 
@@ -170,7 +170,7 @@ export let scaleRatio = new Vector2d(1, 1);
   * A reference to the active Canvas or WebGL active renderer renderer
   * @name renderer
   * @type {me.CanvasRenderer|me.WebGLRenderer}
-  * @memberOf me.video
+  * @memberof me.video
   */
 export let renderer = null;
 

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

@@ -8,7 +8,7 @@
 class VertexArrayBuffer {
 
     constructor(vertex_size, vertex_per_quad) {
-        // the size of one vertex
+        // the size of one vertex in float
         this.vertexSize = vertex_size;
         // size of a quad in vertex
         this.quadSize = vertex_per_quad;
@@ -40,7 +40,7 @@ class VertexArrayBuffer {
      * return true if full
      * @ignore
      */
-    isFull(vertex = 0) {
+    isFull(vertex = this.quadSize) {
          return (this.vertexCount + vertex >= this.maxVertex);
     }
 

package/src/video/webgl/glshader.js

@@ -198,12 +198,11 @@ function minify(src) {
  * @classdesc
  * a base GL Shader object
  * @class GLShader
- * @memberOf me
+ * @memberof me
  * @param {WebGLRenderingContext} gl the current WebGL rendering context
  * @param {string} vertex a string containing the GLSL source code to set
  * @param {string} fragment a string containing the GLSL source code to set
  * @param {string} [precision=auto detected] float precision ('lowp', 'mediump' or 'highp').
- * @constructor
  * @see https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders
  * @example
  * // create a basic shader
@@ -235,7 +234,7 @@ class GLShader {
          * @public
          * @type {WebGLRenderingContext}
          * @name gl
-         * @memberOf me.GLShader
+         * @memberof me.GLShader
          */
         this.gl = gl;
 
@@ -244,7 +243,7 @@ class GLShader {
          * @public
          * @type {string}
          * @name vertex
-         * @memberOf me.GLShader
+         * @memberof me.GLShader
          */
         this.vertex = setPrecision(minify(vertex), precision || device.getMaxShaderPrecision(this.gl));
 
@@ -253,7 +252,7 @@ class GLShader {
          * @public
          * @type {string}
          * @name vertex
-         * @memberOf me.GLShader
+         * @memberof me.GLShader
          */
         this.fragment = setPrecision(minify(fragment), precision || device.getMaxShaderPrecision(this.gl));
 
@@ -262,7 +261,7 @@ class GLShader {
          * @public
          * @type {GLint[]}
          * @name attributes
-         * @memberOf me.GLShader
+         * @memberof me.GLShader
          */
         this.attributes = extractAttributes(this.gl, this);
 
@@ -272,7 +271,7 @@ class GLShader {
          * @public
          * @type {WebGLProgram}
          * @name program
-         * @memberOf me.GLShader
+         * @memberof me.GLShader
          */
         this.program = compileProgram(this.gl, this.vertex, this.fragment, this.attributes);
 
@@ -281,7 +280,7 @@ class GLShader {
          * @public
          * @type {object}
          * @name uniforms
-         * @memberOf me.GLShader
+         * @memberof me.GLShader
          */
         this.uniforms = extractUniforms(this.gl, this);
 
@@ -294,7 +293,7 @@ class GLShader {
     /**
      * Installs this shader program as part of current rendering state
      * @name bind
-     * @memberOf me.GLShader
+     * @memberof me.GLShader
      * @function
      */
     bind() {
@@ -304,7 +303,7 @@ class GLShader {
     /**
      * returns the location of an attribute variable in this shader program
      * @name getAttribLocation
-     * @memberOf me.GLShader
+     * @memberof me.GLShader
      * @function
      * @param {string} name the name of the attribute variable whose location to get.
      * @returns {GLint} number indicating the location of the variable name if found. Returns -1 otherwise
@@ -321,7 +320,7 @@ class GLShader {
     /**
      * Set the uniform to the given value
      * @name setUniform
-     * @memberOf me.GLShader
+     * @memberof me.GLShader
      * @function
      * @param {string} name the uniform name
      * @param {object|Float32Array} value the value to assign to that uniform
@@ -344,7 +343,7 @@ class GLShader {
     /**
      * destroy this shader objects resources (program, attributes, uniforms)
      * @name destroy
-     * @memberOf me.GLShader
+     * @memberof me.GLShader
      * @function
      */
     destroy() {

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 {
@@ -94,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;
@@ -103,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;
@@ -112,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);
@@ -125,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();
     }
 
     /**
@@ -170,10 +142,9 @@ 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.boundTextures[i] = null;
-                this.gl.deleteTexture(texture);
+            var texture2D = this.getTexture2D(i);
+            if (typeof texture2D !== "undefined") {
+                this.deleteTexture2D(texture2D);
             }
         }
         this.currentTextureUnit = -1;
@@ -185,7 +156,7 @@ 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.
@@ -201,12 +172,39 @@ 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
@@ -220,7 +218,7 @@ 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|HTMLCanvasElement|ImageData|Uint8Array[]|Float32Array[]} image Source image
@@ -262,10 +260,35 @@ 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} texture a WebGL texture
      * @param {number} unit Texture unit to which the given texture is bound
@@ -293,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} texture 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(),
@@ -331,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
      */
@@ -350,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);
                 }
@@ -361,7 +394,7 @@ 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
@@ -372,7 +405,7 @@ class WebGLCompositor {
      * @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) {
 
@@ -383,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();
         }
 
@@ -410,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 {number} [mode=gl.TRIANGLES] the GL drawing mode
-     * @memberOf me.WebGLCompositor
+     * @memberof me.WebGLCompositor
      * @function
      */
     flush(mode = this.mode) {
@@ -434,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();
@@ -451,7 +479,7 @@ 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 {me.Vector2d[]} verts vertices
@@ -481,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);
@@ -495,7 +523,7 @@ class WebGLCompositor {
     /**
      * Clear the frame buffer
      * @name clear
-     * @memberOf me.WebGLCompositor
+     * @memberof me.WebGLCompositor
      * @function
      */
     clear() {