Add global opacity support to WebGL image replay

vectorLayer.setOpacity() now works as expected.

src/ol/render/webgl/webglimage.glsl

@@ -30,12 +30,13 @@ void main(void) {
 
 
 //! FRAGMENT
+uniform float u_opacity;
 uniform sampler2D u_image;
 
 void main(void) {
   vec4 texColor = texture2D(u_image, v_texCoord);
   gl_FragColor.rgb = texColor.rgb;
-  float alpha = texColor.a * v_opacity;
+  float alpha = texColor.a * v_opacity * u_opacity;
   if (alpha == 0.0) {
     discard;
   }

src/ol/render/webgl/webglimageshader.js

@@ -21,14 +21,14 @@ goog.addSingletonGetter(ol.render.webgl.imagereplay.shader.Fragment);
  * @const
  * @type {string}
  */
-ol.render.webgl.imagereplay.shader.Fragment.DEBUG_SOURCE = 'precision mediump float;\nvarying vec2 v_texCoord;\nvarying float v_opacity;\n\nuniform sampler2D u_image;\n\nvoid main(void) {\n  vec4 texColor = texture2D(u_image, v_texCoord);\n  gl_FragColor.rgb = texColor.rgb;\n  float alpha = texColor.a * v_opacity;\n  if (alpha == 0.0) {\n    discard;\n  }\n  gl_FragColor.a = alpha;\n}\n';
+ol.render.webgl.imagereplay.shader.Fragment.DEBUG_SOURCE = 'precision mediump float;\nvarying vec2 v_texCoord;\nvarying float v_opacity;\n\nuniform float u_opacity;\nuniform sampler2D u_image;\n\nvoid main(void) {\n  vec4 texColor = texture2D(u_image, v_texCoord);\n  gl_FragColor.rgb = texColor.rgb;\n  float alpha = texColor.a * v_opacity * u_opacity;\n  if (alpha == 0.0) {\n    discard;\n  }\n  gl_FragColor.a = alpha;\n}\n';
 
 
 /**
  * @const
  * @type {string}
  */
-ol.render.webgl.imagereplay.shader.Fragment.OPTIMIZED_SOURCE = 'precision mediump float;varying vec2 a;varying float b;uniform sampler2D k;void main(void){vec4 texColor=texture2D(k,a);gl_FragColor.rgb=texColor.rgb;float alpha=texColor.a*b;if(alpha==0.0){discard;}gl_FragColor.a=alpha;}';
+ol.render.webgl.imagereplay.shader.Fragment.OPTIMIZED_SOURCE = 'precision mediump float;varying vec2 a;varying float b;uniform float k;uniform sampler2D l;void main(void){vec4 texColor=texture2D(l,a);gl_FragColor.rgb=texColor.rgb;float alpha=texColor.a*b*k;if(alpha==0.0){discard;}gl_FragColor.a=alpha;}';
 
 
 /**
@@ -89,7 +89,7 @@ ol.render.webgl.imagereplay.shader.Locations = function(gl, program) {
    * @type {WebGLUniformLocation}
    */
   this.u_image = gl.getUniformLocation(
-      program, goog.DEBUG ? 'u_image' : 'k');
+      program, goog.DEBUG ? 'u_image' : 'l');
 
   /**
    * @type {WebGLUniformLocation}
@@ -103,6 +103,12 @@ ol.render.webgl.imagereplay.shader.Locations = function(gl, program) {
   this.u_offsetScaleMatrix = gl.getUniformLocation(
       program, goog.DEBUG ? 'u_offsetScaleMatrix' : 'i');
 
+  /**
+   * @type {WebGLUniformLocation}
+   */
+  this.u_opacity = gl.getUniformLocation(
+      program, goog.DEBUG ? 'u_opacity' : 'k');
+
   /**
    * @type {WebGLUniformLocation}
    */

src/ol/render/webgl/webglreplay.js

@@ -501,13 +501,14 @@ ol.render.webgl.ImageReplay.prototype.getExtent = function() {
  * @param {ol.Size} size Size.
  * @param {ol.Extent} extent Extent.
  * @param {number} pixelRatio Pixel ratio.
+ * @param {number} opacity Global opacity.
  * @param {Object} skippedFeaturesHash Ids of features to skip.
  * @return {T|undefined} Callback result.
  * @template T
  */
 ol.render.webgl.ImageReplay.prototype.replay = function(context,
     center, resolution, rotation, size, extent, pixelRatio,
-    skippedFeaturesHash) {
+    opacity, skippedFeaturesHash) {
   var gl = context.getGL();
 
   var program = context.getProgram(
@@ -566,6 +567,7 @@ ol.render.webgl.ImageReplay.prototype.replay = function(context,
   gl.uniformMatrix4fv(locations.u_offsetScaleMatrix, false, offsetScaleMatrix);
   gl.uniformMatrix4fv(locations.u_offsetRotateMatrix, false,
       offsetRotateMatrix);
+  gl.uniform1f(locations.u_opacity, opacity);
 
   goog.asserts.assert(!goog.isNull(this.indicesBuffer_));
   gl.bindBuffer(goog.webgl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer_);
@@ -732,13 +734,14 @@ ol.render.webgl.ReplayGroup.prototype.isEmpty = function() {
  * @param {ol.Size} size Size.
  * @param {ol.Extent} extent Extent.
  * @param {number} pixelRatio Pixel ratio.
+ * @param {number} opacity Global opacity.
  * @param {Object} skippedFeaturesHash Ids of features to skip.
  * @return {T|undefined} Callback result.
  * @template T
  */
 ol.render.webgl.ReplayGroup.prototype.replay = function(context,
     center, resolution, rotation, size, extent, pixelRatio,
-    skippedFeaturesHash) {
+    opacity, skippedFeaturesHash) {
   var i, ii, replay, result;
   for (i = 0, ii = ol.render.REPLAY_ORDER.length; i < ii; ++i) {
     replay = this.replays_[ol.render.REPLAY_ORDER[i]];
@@ -746,7 +749,7 @@ ol.render.webgl.ReplayGroup.prototype.replay = function(context,
         ol.extent.intersects(extent, replay.getExtent())) {
       result = replay.replay(context,
           center, resolution, rotation, size, extent, pixelRatio,
-          skippedFeaturesHash);
+          opacity, skippedFeaturesHash);
       if (result) {
         return result;
       }

src/ol/renderer/webgl/webglmaprenderer.js

@@ -291,8 +291,9 @@ ol.renderer.webgl.Map.prototype.dispatchComposeEvent_ =
       var center = viewState.center;
       var rotation = viewState.rotation;
       var size = frameState.size;
+      var opacity = 1;
       replayGroup.replay(context, center, resolution, rotation, size, extent,
-          pixelRatio, {});
+          pixelRatio, opacity, {});
     }
     this.replayGroup = replayGroup;
   }

src/ol/renderer/webgl/webglvectorlayerrenderer.js

@@ -73,6 +73,7 @@ ol.renderer.webgl.VectorLayer.prototype.composeFrame =
     replayGroup.replay(context,
         viewState.center, viewState.resolution, viewState.rotation,
         frameState.size, frameState.extent, frameState.pixelRatio,
+        layerState.opacity,
         frameState.skippedFeatureUids);
   }