Update color matrices based on framestate values

In getColorMatrix method, we'll update the color matrices only if layerstate
color properties has changed in the framestate.

src/ol/renderer/webgl/webgllayerrenderer.js

@@ -59,37 +59,51 @@ ol.renderer.webgl.Layer = function(mapRenderer, layer) {
 
   /**
    * @private
-   * @type {boolean}
+   * @type {number|undefined}
    */
-  this.colorMatrixDirty_ = true;
+  this.brightness_ = undefined;
 
   /**
    * @private
    * @type {!goog.vec.Mat4.Float32}
    */
   this.brightnessMatrix_ = goog.vec.Mat4.createFloat32();
-  this.updateBrightnessMatrix_();
+
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.contrast_ = undefined;
 
   /**
    * @private
    * @type {!goog.vec.Mat4.Float32}
    */
   this.contrastMatrix_ = goog.vec.Mat4.createFloat32();
-  this.updateContrastMatrix_();
+
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.hue_ = undefined;
 
   /**
    * @private
    * @type {!goog.vec.Mat4.Float32}
    */
   this.hueMatrix_ = goog.vec.Mat4.createFloat32();
-  this.updateHueMatrix_();
+
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.saturation_ = undefined;
 
   /**
    * @private
    * @type {!goog.vec.Mat4.Float32}
    */
   this.saturationMatrix_ = goog.vec.Mat4.createFloat32();
-  this.updateSaturationMatrix_();
 
 };
 goog.inherits(ol.renderer.webgl.Layer, ol.renderer.Layer);
@@ -144,10 +158,36 @@ ol.renderer.webgl.Layer.prototype.bindFramebuffer =
 
 
 /**
+ * @param {number} brightness Brightness.
+ * @param {number} contrast Contrast.
+ * @param {number} hue Hue.
+ * @param {number} saturation Saturation.
  * @return {!goog.vec.Mat4.Float32} Color matrix.
  */
-ol.renderer.webgl.Layer.prototype.getColorMatrix = function() {
+ol.renderer.webgl.Layer.prototype.getColorMatrix = function(
-  if (this.colorMatrixDirty_) {
+    brightness, contrast, hue, saturation) {
+  var colorMatrixDirty = false;
+  if (brightness !== this.brightness_) {
+    ol.vec.Mat4.makeBrightness(this.brightnessMatrix_, brightness);
+    this.brightness_ = brightness;
+    colorMatrixDirty = true;
+  }
+  if (contrast !== this.contrast_) {
+    ol.vec.Mat4.makeContrast(this.contrastMatrix_, contrast);
+    this.contrast_ = contrast;
+    colorMatrixDirty = true;
+  }
+  if (hue !== this.hue_) {
+    ol.vec.Mat4.makeHue(this.hueMatrix_, hue);
+    this.hue_ = hue;
+    colorMatrixDirty = true;
+  }
+  if (saturation !== this.saturation_) {
+    ol.vec.Mat4.makeSaturation(this.saturationMatrix_, saturation);
+    this.saturation_ = saturation;
+    colorMatrixDirty = true;
+  }
+  if (colorMatrixDirty) {
     this.updateColorMatrix_();
   }
   return this.colorMatrix_;
@@ -197,16 +237,6 @@ ol.renderer.webgl.Layer.prototype.handleWebGLContextLost = function() {
 };
 
 
-/**
- * @private
- */
-ol.renderer.webgl.Layer.prototype.updateBrightnessMatrix_ = function() {
-  var brightness = this.getLayer().getBrightness();
-  ol.vec.Mat4.makeBrightness(this.brightnessMatrix_, brightness);
-  this.colorMatrixDirty_ = true;
-};
-
-
 /**
  * @private
  */
@@ -217,35 +247,4 @@ ol.renderer.webgl.Layer.prototype.updateColorMatrix_ = function() {
   goog.vec.Mat4.multMat(colorMatrix, this.brightnessMatrix_, colorMatrix);
   goog.vec.Mat4.multMat(colorMatrix, this.saturationMatrix_, colorMatrix);
   goog.vec.Mat4.multMat(colorMatrix, this.hueMatrix_, colorMatrix);
-  this.colorMatrixDirty_ = false;
-};
-
-
-/**
- * @private
- */
-ol.renderer.webgl.Layer.prototype.updateContrastMatrix_ = function() {
-  var contrast = this.getLayer().getContrast();
-  ol.vec.Mat4.makeContrast(this.contrastMatrix_, contrast);
-  this.colorMatrixDirty_ = true;
-};
-
-
-/**
- * @private
- */
-ol.renderer.webgl.Layer.prototype.updateHueMatrix_ = function() {
-  var hue = this.getLayer().getHue();
-  ol.vec.Mat4.makeHue(this.hueMatrix_, hue);
-  this.colorMatrixDirty_ = true;
-};
-
-
-/**
- * @private
- */
-ol.renderer.webgl.Layer.prototype.updateSaturationMatrix_ = function() {
-  var saturation = this.getLayer().getSaturation();
-  ol.vec.Mat4.makeSaturation(this.saturationMatrix_, saturation);
-  this.colorMatrixDirty_ = true;
 };

src/ol/renderer/webgl/webglmaprenderer.js

@@ -643,7 +643,12 @@ ol.renderer.webgl.Map.prototype.renderFrame = function(frameState) {
         layerRenderer.getProjectionMatrix());
     if (useColor) {
       gl.uniformMatrix4fv(locations.u_colorMatrix, false,
-          layerRenderer.getColorMatrix());
+          layerRenderer.getColorMatrix(
+              layerState.brightness,
+              layerState.contrast,
+              layerState.hue,
+              layerState.saturation
+          ));
     }
     gl.uniform1f(locations.u_opacity, layerState.opacity);
     gl.bindTexture(goog.webgl.TEXTURE_2D, layerRenderer.getTexture());