melonjs 14.5.0 → 15.1.0

package/src/video/webgl/compositors/primitive_compositor.js

@@ -0,0 +1,68 @@
+import primitiveVertex from "./../shaders/primitive.vert";
+import primitiveFragment from "./../shaders/primitive.frag";
+import Compositor from "./compositor.js";
+
+/**
+ * @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
+ * @augments Compositor
+ */
+ export default class PrimitiveCompositor extends Compositor {
+
+    /**
+     * Initialize the compositor
+     * @ignore
+     */
+    init(renderer) {
+        super.init(renderer, {
+            attributes: [
+                {name: "aVertex", size: 2, type: renderer.gl.FLOAT, normalized: false, offset: 0 * Float32Array.BYTES_PER_ELEMENT},
+                {name: "aColor",  size: 4, type: renderer.gl.UNSIGNED_BYTE, normalized: true, offset: 2 * Float32Array.BYTES_PER_ELEMENT}
+            ],
+            shader: {
+                vertex: primitiveVertex, fragment: primitiveFragment
+            }
+        });
+    }
+
+    /**
+     * Draw an array of vertices
+     * @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 {Point[]} verts - an array of vertices
+     * @param {number} [vertexCount=verts.length] - amount of points defined in the points array
+     */
+    drawVertices(mode, verts, vertexCount = verts.length) {
+        let viewMatrix = this.viewMatrix;
+        let vertexData = this.vertexData;
+        let color = this.renderer.currentColor;
+        let alpha = this.renderer.getGlobalAlpha();
+
+        if (vertexData.isFull(vertexCount)) {
+            // is the vertex buffer full if we add more vertices
+            this.flush();
+        }
+
+        // flush if drawing vertices with a different drawing mode
+        if (mode !== this.mode) {
+            this.flush(this.mode);
+            this.mode = mode;
+        }
+
+        if (!viewMatrix.isIdentity()) {
+            verts.forEach((vert) => {
+                viewMatrix.apply(vert);
+                vertexData.push(vert.x, vert.y, undefined, undefined, color.toUint32(alpha));
+            });
+        } else {
+            verts.forEach((vert) => {
+                vertexData.push(vert.x, vert.y, undefined, undefined, color.toUint32(alpha));
+            });
+        }
+
+        // force flush for primitive using LINE_STRIP or LINE_LOOP
+        if (this.mode === this.gl.LINE_STRIP || this.mode === this.gl.LINE_LOOP) {
+            this.flush(this.mode);
+        }
+    }
+}

package/src/video/webgl/compositors/{webgl_compositor.js → quad_compositor.js}

@@ -1,15 +1,11 @@
 import Vector2d from "../../../math/vector2.js";
-import GLShader from "../glshader.js";
-import VertexArrayBuffer from "../buffer/vertex.js";
 import { isPowerOfTwo } from "../../../math/math.js";
-import primitiveVertex from "./../shaders/primitive.vert";
-import primitiveFragment from "./../shaders/primitive.frag";
 import quadVertex from "./../shaders/quad.vert";
 import quadFragment from "./../shaders/quad.frag";
 import Compositor from "./compositor.js";
 
 // a pool of resuable vectors
-var V_ARRAY = [
+let V_ARRAY = [
     new Vector2d(),
     new Vector2d(),
     new Vector2d(),
@@ -22,33 +18,27 @@ var V_ARRAY = [
  * Pushes texture regions or shape geometry into WebGL buffers, automatically flushes to GPU
  * @augments Compositor
  */
- export default class WebGLCompositor extends Compositor {
+ export default class QuadCompositor extends Compositor {
 
     /**
      * Initialize the compositor
      * @ignore
      */
     init (renderer) {
-        super.init(renderer);
+        super.init(renderer, {
+            attributes: [
+                {name: "aVertex", size: 2, type: renderer.gl.FLOAT, normalized: false, offset: 0 * Float32Array.BYTES_PER_ELEMENT},
+                {name: "aRegion", size: 2, type: renderer.gl.FLOAT, normalized: false, offset: 2 * Float32Array.BYTES_PER_ELEMENT},
+                {name: "aColor",  size: 4, type: renderer.gl.UNSIGNED_BYTE, normalized: true, offset: 4 * Float32Array.BYTES_PER_ELEMENT}
+            ],
+            shader: {
+                vertex: quadVertex, fragment: quadFragment
+            }
+        });
 
         // list of active texture units
         this.currentTextureUnit = -1;
         this.boundTextures = [];
-
-        // Load and create shader programs
-        this.primitiveShader = new GLShader(this.gl, primitiveVertex, primitiveFragment);
-        this.quadShader = new GLShader(this.gl, quadVertex, quadFragment);
-
-        /// define all vertex attributes
-        this.addAttribute("aVertex", 2, this.gl.FLOAT, false, 0 * Float32Array.BYTES_PER_ELEMENT); // 0
-        this.addAttribute("aRegion", 2, this.gl.FLOAT, false, 2 * Float32Array.BYTES_PER_ELEMENT); // 1
-        this.addAttribute("aColor",  4, this.gl.UNSIGNED_BYTE, true, 4 * Float32Array.BYTES_PER_ELEMENT); // 2
-
-        this.vertexBuffer = new VertexArrayBuffer(this.vertexSize, 6); // 6 vertices per quad
-
-        // vertex buffer
-        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.gl.createBuffer());
-        this.gl.bufferData(this.gl.ARRAY_BUFFER, this.vertexBuffer.buffer, this.gl.STREAM_DRAW);
     }
 
     /**
@@ -59,37 +49,34 @@ var V_ARRAY = [
         super.reset();
 
         // delete all related bound texture
-        for (var i = 0; i < this.renderer.maxTextures; i++) {
-            var texture2D = this.getTexture2D(i);
+        for (let i = 0; i < this.renderer.maxTextures; i++) {
+            let texture2D = this.getTexture2D(i);
             if (typeof texture2D !== "undefined") {
                 this.deleteTexture2D(texture2D);
             }
         }
         this.currentTextureUnit = -1;
-
-        // set the quad shader as the default program
-        this.useShader(this.quadShader);
     }
 
     /**
      * Create a WebGL texture from an image
      * @param {number} unit - Destination texture unit
-     * @param {Image|HTMLCanvasElement|ImageData|Uint8Array[]|Float32Array[]} image - Source image
+     * @param {Image|HTMLCanvasElement|ImageData|Uint8Array[]|Float32Array[]} [pixels=null] - Source image
      * @param {number} filter - gl.LINEAR or gl.NEAREST
      * @param {string} [repeat="no-repeat"] - Image repeat behavior (see {@link 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} [w=pixels.width] - Source image width (Only use with UInt8Array[] or Float32Array[] source image)
+     * @param {number} [h=pixels.height] - Source image height (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;
-        var isPOT = isPowerOfTwo(w || image.width) && isPowerOfTwo(h || image.height);
-        var texture = gl.createTexture();
-        var rs = (repeat.search(/^repeat(-x)?$/) === 0) && (isPOT || this.renderer.WebGLVersion > 1) ? gl.REPEAT : gl.CLAMP_TO_EDGE;
-        var rt = (repeat.search(/^repeat(-y)?$/) === 0) && (isPOT || this.renderer.WebGLVersion > 1) ? gl.REPEAT : gl.CLAMP_TO_EDGE;
+    createTexture2D(unit, pixels = null, filter, repeat = "no-repeat", w = pixels.width, h = pixels.height, premultipliedAlpha = true, mipmap = true) {
+        let gl = this.gl;
+        let isPOT = isPowerOfTwo(w) && isPowerOfTwo(h);
+        let rs = (repeat.search(/^repeat(-x)?$/) === 0) && (isPOT || this.renderer.WebGLVersion > 1) ? gl.REPEAT : gl.CLAMP_TO_EDGE;
+        let rt = (repeat.search(/^repeat(-y)?$/) === 0) && (isPOT || this.renderer.WebGLVersion > 1) ? gl.REPEAT : gl.CLAMP_TO_EDGE;
+
+        let texture = gl.createTexture();
 
         this.bindTexture2D(texture, unit);
 
@@ -97,16 +84,21 @@ var V_ARRAY = [
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, rt);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
+
         gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, premultipliedAlpha);
-        if (w || h || b) {
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, b, gl.RGBA, gl.UNSIGNED_BYTE, image);
-        }
-        else {
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+
+        if (pixels === null || typeof pixels.byteLength !== "undefined") {
+            // if pixels is undefined, or if it's Uint8Array/Float32Array TypedArray
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels, 0);
+        } else if (pixels instanceof OffscreenCanvas) {
+            // convert to ImageBitmap first (else Safari 16.4 and higher will throw an TypeError exception)
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, pixels.transferToImageBitmap());
+        } else {
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
         }
 
         // generate the sprite mimap (used when scaling) if a PowerOfTwo texture
-        if (isPOT && mipmap !== false) {
+        if (isPOT && mipmap === true) {
             gl.generateMipmap(gl.TEXTURE_2D);
         }
 
@@ -138,7 +130,7 @@ var V_ARRAY = [
      * @param {number} unit - Texture unit to which the given texture is bound
      */
     bindTexture2D(texture, unit) {
-        var gl = this.gl;
+        let gl = this.gl;
 
         if (texture !== this.boundTextures[unit]) {
             this.flush();
@@ -179,9 +171,9 @@ var V_ARRAY = [
     /**
      * @ignore
      */
-    uploadTexture(texture, w, h, b, force = false) {
-        var unit = this.renderer.cache.getUnit(texture);
-        var texture2D = this.boundTextures[unit];
+    uploadTexture(texture, w, h, force = false) {
+        let unit = this.renderer.cache.getUnit(texture);
+        let texture2D = this.boundTextures[unit];
 
         if (typeof texture2D === "undefined" || force) {
             this.createTexture2D(
@@ -191,7 +183,6 @@ var V_ARRAY = [
                 texture.repeat,
                 w,
                 h,
-                b,
                 texture.premultipliedAlpha
             );
         } else {
@@ -201,22 +192,6 @@ var V_ARRAY = [
         return this.currentTextureUnit;
     }
 
-
-    /**
-     * Select the shader to use for compositing
-     * @see GLShader
-     * @param {GLShader} shader - a reference to a GLShader instance
-     */
-    useShader(shader) {
-        if (this.activeShader !== shader) {
-            this.flush();
-            this.activeShader = shader;
-            this.activeShader.bind();
-            this.activeShader.setUniform("uProjectionMatrix", this.renderer.projectionMatrix);
-            this.activeShader.setVertexAttributes(this.gl, this.attributes, this.vertexByteSize);
-        }
-    }
-
     /**
      * Add a textured quad
      * @param {TextureAtlas} texture - Source texture atlas
@@ -231,26 +206,21 @@ var V_ARRAY = [
      * @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) {
+        let vertexData = this.vertexData;
 
-        if (this.color.alpha < 1 / 255) {
-            // Fast path: don't send fully transparent quads
-            return;
-        }
-
-        this.useShader(this.quadShader);
-
-        if (this.vertexBuffer.isFull(6)) {
+        if (vertexData.isFull(6)) {
             // is the vertex buffer full if we add 6 more vertices
             this.flush();
         }
 
         // upload and activate the texture if necessary
-        var unit = this.uploadTexture(texture);
-        // set fragement sampler accordingly
-        this.quadShader.setUniform("uSampler", unit);
+        let unit = this.uploadTexture(texture);
+
+        // set fragment sampler accordingly
+        this.currentShader.setUniform("uSampler", unit);
 
         // Transform vertices
-        var m = this.viewMatrix,
+        let m = this.viewMatrix,
             vec0 = V_ARRAY[0].set(x, y),
             vec1 = V_ARRAY[1].set(x + w, y),
             vec2 = V_ARRAY[2].set(x, y + h),
@@ -263,38 +233,11 @@ var V_ARRAY = [
             m.apply(vec3);
         }
 
-        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);
-    }
-
-    /**
-     * Draw an array of vertices
-     * @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 {Point[]} verts - an array of vertices
-     * @param {number} [vertexCount=verts.length] - amount of points defined in the points array
-     */
-    drawVertices(mode, verts, vertexCount = verts.length) {
-        // use the primitive shader
-        this.useShader(this.primitiveShader);
-        // Set the line color
-        this.primitiveShader.setUniform("uColor", this.color);
-
-        var m = this.viewMatrix;
-        var vertex = this.vertexBuffer;
-        var m_isIdentity = m.isIdentity();
-
-        for (var i = 0; i < vertexCount; i++) {
-            if (!m_isIdentity) {
-                m.apply(verts[i]);
-            }
-            vertex.push(verts[i].x, verts[i].y);
-        }
-
-        // flush
-        this.flush(mode);
+        vertexData.push(vec0.x, vec0.y, u0, v0, tint);
+        vertexData.push(vec1.x, vec1.y, u1, v0, tint);
+        vertexData.push(vec2.x, vec2.y, u0, v1, tint);
+        vertexData.push(vec2.x, vec2.y, u0, v1, tint);
+        vertexData.push(vec1.x, vec1.y, u1, v0, tint);
+        vertexData.push(vec3.x, vec3.y, u1, v1, tint);
     }
 }

package/src/video/webgl/glshader.js

@@ -18,7 +18,7 @@ import { minify } from "./utils/string.js";
      * @see https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders
      * @example
      * // create a basic shader
-     * var myShader = new me.GLShader(
+     * let myShader = new me.GLShader(
      *    // WebGL rendering context
      *    gl,
      *    // vertex shader
@@ -93,7 +93,7 @@ import { minify } from "./utils/string.js";
      * @returns {GLint} number indicating the location of the variable name if found. Returns -1 otherwise
      */
     getAttribLocation(name) {
-        var attr = this.attributes[name];
+        let attr = this.attributes[name];
         if (typeof attr !== "undefined") {
             return attr;
         } else {
@@ -109,7 +109,7 @@ import { minify } from "./utils/string.js";
      * myShader.setUniform("uProjectionMatrix", this.projectionMatrix);
      */
     setUniform(name, value) {
-        var uniforms = this.uniforms;
+        let uniforms = this.uniforms;
         if (typeof uniforms[name] !== "undefined") {
             if (typeof value === "object" && typeof value.toArray === "function") {
                 uniforms[name] = value.toArray();
@@ -129,9 +129,9 @@ import { minify } from "./utils/string.js";
      */
     setVertexAttributes(gl, attributes, vertexByteSize) {
         // set the vertex attributes
-        for (var index = 0; index < attributes.length; ++index) {
-            var element = attributes[index];
-            var location = this.getAttribLocation(element.name);
+        for (let index = 0; index < attributes.length; ++index) {
+            let element = attributes[index];
+            let location = this.getAttribLocation(element.name);
 
             if (location !== -1) {
                 gl.enableVertexAttribArray(location);

package/src/video/webgl/shaders/primitive.vert

@@ -1,18 +1,15 @@
 // Current vertex point
 attribute vec2 aVertex;
+attribute vec4 aColor;
 
 // Projection matrix
 uniform mat4 uProjectionMatrix;
 
-// Vertex color
-uniform vec4 uColor;
-
-// Fragment color
 varying vec4 vColor;
 
 void main(void) {
     // Transform the vertex position by the projection matrix
     gl_Position = uProjectionMatrix * vec4(aVertex, 0.0, 1.0);
     // Pass the remaining attributes to the fragment shader
-    vColor = vec4(uColor.rgb * uColor.a, uColor.a);
+    vColor = vec4(aColor.bgr * aColor.a, aColor.a);
 }

package/src/video/webgl/shaders/quad.vert

@@ -1,7 +1,9 @@
+// Current vertex point
 attribute vec2 aVertex;
 attribute vec2 aRegion;
 attribute vec4 aColor;
 
+// Projection matrix
 uniform mat4 uProjectionMatrix;
 
 varying vec2 vRegion;
@@ -9,7 +11,7 @@ varying vec4 vColor;
 
 void main(void) {
     // Transform the vertex position by the projection matrix
-     gl_Position = uProjectionMatrix * vec4(aVertex, 0.0, 1.0);
+    gl_Position = uProjectionMatrix * vec4(aVertex, 0.0, 1.0);
     // Pass the remaining attributes to the fragment shader
     vColor = vec4(aColor.bgr * aColor.a, aColor.a);
     vRegion = aRegion;

package/src/video/webgl/utils/attributes.js

@@ -2,7 +2,7 @@
  * @ignore
  */
 export function extractAttributes(gl, shader) {
-    var attributes = {},
+    let attributes = {},
         attrRx = /attribute\s+\w+\s+(\w+)/g,
         match,
         i = 0;

package/src/video/webgl/utils/program.js

@@ -2,7 +2,7 @@
  * @ignore
  */
 function compileShader(gl, type, source) {
-    var shader = gl.createShader(type);
+    let shader = gl.createShader(type);
     gl.shaderSource(shader, source);
     gl.compileShader(shader);
 
@@ -18,10 +18,10 @@ function compileShader(gl, type, source) {
  * @ignore
  */
 export 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);
@@ -29,14 +29,14 @@ export 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/src/video/webgl/utils/uniforms.js

@@ -26,7 +26,7 @@ const fnHash = {
  * @ignore
  */
 export function extractUniforms(gl, shader) {
-    var uniforms = {},
+    let uniforms = {},
         uniRx = /uniform\s+(\w+)\s+(\w+)/g,
         uniformsData = {},
         descriptor = {},
@@ -42,7 +42,7 @@ export 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] = {
@@ -68,7 +68,7 @@ export 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";
                         }