Allow canvas reuse for WebGL layers

src/ol/webgl/PostProcessingPass.js

@@ -22,11 +22,12 @@ const DEFAULT_FRAGMENT_SHADER = `
   precision mediump float;
    
   uniform sampler2D u_image;
+  uniform float u_opacity;
    
   varying vec2 v_texCoord;
    
   void main() {
-    gl_FragColor = texture2D(u_image, v_texCoord);
+    gl_FragColor = texture2D(u_image, v_texCoord) * u_opacity;
   }
 `;
 
@@ -86,11 +87,12 @@ const DEFAULT_FRAGMENT_SHADER = `
  *   precision mediump float;
  *
  *   uniform sampler2D u_image;
+ *   uniform float u_opacity;
  *
  *   varying vec2 v_texCoord;
  *
  *   void main() {
- *     gl_FragColor = texture2D(u_image, v_texCoord);
+ *     gl_FragColor = texture2D(u_image, v_texCoord) * u_opacity;
  *   }
  *   ```
  *
@@ -148,6 +150,10 @@ class WebGLPostProcessingPass {
       this.renderTargetProgram_,
       'u_screenSize'
     );
+    this.renderTargetOpacityLocation_ = gl.getUniformLocation(
+      this.renderTargetProgram_,
+      'u_opacity'
+    );
     this.renderTargetTextureLocation_ = gl.getUniformLocation(
       this.renderTargetProgram_,
       'u_image'
@@ -258,8 +264,6 @@ class WebGLPostProcessingPass {
     gl.bindTexture(gl.TEXTURE_2D, this.renderTargetTexture_);
 
     // render the frame buffer to the canvas
-    gl.clearColor(0.0, 0.0, 0.0, 0.0);
-    gl.clear(gl.COLOR_BUFFER_BIT);
     gl.enable(gl.BLEND);
     gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
     gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
@@ -279,6 +283,9 @@ class WebGLPostProcessingPass {
     gl.uniform2f(this.renderTargetUniformLocation_, size[0], size[1]);
     gl.uniform1i(this.renderTargetTextureLocation_, 0);
 
+    const opacity = frameState.layerStatesArray[frameState.layerIndex].opacity;
+    gl.uniform1f(this.renderTargetOpacityLocation_, opacity);
+
     this.applyUniforms(frameState);
 
     gl.drawArrays(gl.TRIANGLES, 0, 6);