diff --git a/src/video/webgl/compositors/compositor.js b/src/video/webgl/compositors/compositor.js index dc4a7fc849..65b6a35b35 100644 --- a/src/video/webgl/compositors/compositor.js +++ b/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) { diff --git a/src/video/webgl/compositors/primitive_compositor.js b/src/video/webgl/compositors/primitive_compositor.js index 653bbd4184..95c5f03813 100644 --- a/src/video/webgl/compositors/primitive_compositor.js +++ b/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)); }); } diff --git a/src/video/webgl/compositors/quad_compositor.js b/src/video/webgl/compositors/quad_compositor.js index c5fb9bc6e2..1e1e111272 100644 --- a/src/video/webgl/compositors/quad_compositor.js +++ b/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); } } diff --git a/src/video/webgl/webgl_renderer.js b/src/video/webgl/webgl_renderer.js index c895eb4da9..a160d526dc 100644 --- a/src/video/webgl/webgl_renderer.js +++ b/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)