fix/optimize instance and usage of VertexBuffer across the different …

…compositor instances

- VertexBuffer is created by the WebGLRenderer and shared by the different compositor
- renamed the previous Compositor.vertexBuffer object to Compositor.vertexData; which is better more correct name for it.

src/video/webgl/compositors/compositor.js

@@ -77,10 +77,10 @@ import VertexArrayBuffer from "../buffer/vertex.js";
         this.vertexSize = 0;
 
         /**
-         * the vertex buffer used by this compositor
+         * the vertex data buffer used by this compositor
          * @type {VertexArrayBuffer}
          */
-        this.vertexBuffer = null;
+        this.vertexData = null;
 
         // parse given attibrutes
         if (typeof settings !== "undefined" && Array.isArray(settings.attributes)) {
@@ -91,12 +91,7 @@ import VertexArrayBuffer from "../buffer/vertex.js";
             throw new Error("attributes definition missing");
         }
 
-        // instantiate the compositor vertexBuffer
-        this.vertexBuffer = new VertexArrayBuffer(this.vertexSize, 6);
-
-        // 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);
+        this.vertexData = new VertexArrayBuffer(this.vertexSize, 6);
 
         // register to the CANVAS resize channel
         event.on(event.CANVAS_ONRESIZE, (width, height) => {
@@ -113,7 +108,8 @@ import VertexArrayBuffer from "../buffer/vertex.js";
         // WebGL context
         this.gl = this.renderer.gl;
 
-        this.flush();
+        // clear the vertex data buffer
+        this.vertexData.clear();
 
         // initial viewport size
         this.setViewport(
@@ -131,6 +127,7 @@ import VertexArrayBuffer from "../buffer/vertex.js";
      * called by the WebGL renderer when a compositor become the current one
      */
     bind() {
+        // (re)bind the active shader
         if (this.activeShader !== null) {
             this.activeShader.bind();
             this.activeShader.setUniform("uProjectionMatrix", this.renderer.projectionMatrix);
@@ -222,7 +219,7 @@ import VertexArrayBuffer from "../buffer/vertex.js";
      * @param {number} [mode=gl.TRIANGLES] - the GL drawing mode
      */
     flush(mode = this.mode) {
-        var vertex = this.vertexBuffer;
+        var vertex = this.vertexData;
         var vertexCount = vertex.vertexCount;
 
         if (vertexCount > 0) {

src/video/webgl/compositors/primitive_compositor.js

@@ -46,11 +46,11 @@ import Compositor from "./compositor.js";
      */
     drawVertices(mode, verts, vertexCount = verts.length) {
         var viewMatrix = this.viewMatrix;
-        var vertexBuffer = this.vertexBuffer;
+        var vertexData = this.vertexData;
         var color = this.renderer.currentColor;
         var alpha = this.renderer.getGlobalAlpha();
 
-        if (vertexBuffer.isFull(vertexCount)) {
+        if (vertexData.isFull(vertexCount)) {
             // is the vertex buffer full if we add more vertices
             this.flush();
         }
@@ -64,11 +64,11 @@ import Compositor from "./compositor.js";
         if (!viewMatrix.isIdentity()) {
             verts.forEach((vert) => {
                 viewMatrix.apply(vert);
-                vertexBuffer.push(vert.x, vert.y, undefined, undefined, color.toUint32(alpha));
+                vertexData.push(vert.x, vert.y, undefined, undefined, color.toUint32(alpha));
             });
         } else {
             verts.forEach((vert) => {
-                vertexBuffer.push(vert.x, vert.y, undefined, undefined, color.toUint32(alpha));
+                vertexData.push(vert.x, vert.y, undefined, undefined, color.toUint32(alpha));
             });
         }
 

src/video/webgl/compositors/quad_compositor.js

@@ -201,9 +201,9 @@ 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) {
-        var vertexBuffer = this.vertexBuffer;
+        var vertexData = this.vertexData;
 
-        if (vertexBuffer.isFull(6)) {
+        if (vertexData.isFull(6)) {
             // is the vertex buffer full if we add 6 more vertices
             this.flush();
         }
@@ -227,11 +227,11 @@ var V_ARRAY = [
             m.apply(vec3);
         }
 
-        vertexBuffer.push(vec0.x, vec0.y, u0, v0, tint);
-        vertexBuffer.push(vec1.x, vec1.y, u1, v0, tint);
-        vertexBuffer.push(vec2.x, vec2.y, u0, v1, tint);
-        vertexBuffer.push(vec2.x, vec2.y, u0, v1, tint);
-        vertexBuffer.push(vec1.x, vec1.y, u1, v0, tint);
-        vertexBuffer.push(vec3.x, vec3.y, u1, v1, tint);
+        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);
     }
 }

src/video/webgl/webgl_renderer.js

@@ -67,6 +67,12 @@ import { isPowerOfTwo } 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}
@@ -112,6 +118,9 @@ import { isPowerOfTwo } from "./../../math/math.js";
          */
         this.compositors = new Map();
 
+        // 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");
@@ -219,6 +228,7 @@ import { isPowerOfTwo } from "./../../math/math.js";
                 // flush the current compositor
                 this.currentCompositor.flush();
             }
+            //console.log("set Compositor " + name);
             // set as the active one
             this.currentCompositor = compositor;
             // (re)bind the compositor (program & attributes)