fix multiple (redundant) calls to gl.viewport() when using multiple compositors

`viewport` applies to the global gl context, so it should be defined at the [WebGL]Renderer level now, and not anymore in the Compositor class.

this follows #1172

Author: obiot

src/video/webgl/compositors/compositor.js

@@ -1,4 +1,3 @@
-import * as event from "../../../system/event.js";
 import VertexArrayBuffer from "../buffer/vertex.js";
 import GLShader from "../glshader.js";
 
@@ -105,12 +104,6 @@ import GLShader from "../glshader.js";
         } else {
             throw new Error("shader definition missing");
         }
-
-        // register to the CANVAS resize channel
-        event.on(event.CANVAS_ONRESIZE, (width, height) => {
-            this.flush();
-            this.setViewport(0, 0, width, height);
-        });
     }
 
     /**
@@ -123,13 +116,6 @@ import GLShader from "../glshader.js";
 
         // clear the vertex data buffer
         this.vertexData.clear();
-
-        // initial viewport size
-        this.setViewport(
-            0, 0,
-            this.renderer.getCanvas().width,
-            this.renderer.getCanvas().height
-        );
     }
 
     /**
@@ -204,17 +190,6 @@ import GLShader from "../glshader.js";
         this.vertexSize = this.vertexByteSize / Float32Array.BYTES_PER_ELEMENT;
     }
 
-    /**
-     * Sets the 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);
-    }
-
     /**
      * set/change the current projection matrix
      * @param {Matrix3d} matrix

src/video/webgl/webgl_renderer.js

@@ -176,6 +176,12 @@ import { isPowerOfTwo } from "./../../math/math.js";
         event.on(event.GAME_RESET, () => {
             this.reset();
         });
+
+        // register to the CANVAS resize channel
+        event.on(event.CANVAS_ONRESIZE, (width, height) => {
+            this.flush();
+            this.setViewport(0, 0, width, height);
+        });
     }
 
     /**
@@ -187,6 +193,9 @@ import { isPowerOfTwo } from "./../../math/math.js";
         // clear gl context
         this.clear();
 
+        // initial viewport size
+        this.setViewport();
+
         // rebind the vertex buffer if required (e.g in case of context loss)
         if (this.gl.getParameter(this.gl.ARRAY_BUFFER_BINDING) !== this.vertexBuffer) {
             this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexBuffer);
@@ -318,6 +327,17 @@ import { isPowerOfTwo } from "./../../math/math.js";
         this.currentCompositor.setProjection(matrix);
     }
 
+    /**
+     * Sets the WebGL viewport, which specifies the affine transformation of x and y from normalized device coordinates to window coordinates
+     * @param {number} [x = 0] - x the horizontal coordinate for the lower left corner of the viewport origin
+     * @param {number} [y = 0] - y the vertical coordinate for the lower left corner of the viewport origin
+     * @param {number} [w = width of the canvas] - the width of viewport
+     * @param {number} [h = height of the canvas] - the height of viewport
+     */
+    setViewport(x = 0, y = 0, w = this.getCanvas().width, h = this.getCanvas().height) {
+        this.gl.viewport(x, y, w, h);
+    }
+
     /**
      * Clear the frame buffer
      */