Merge pull request #93 from twpayne/webgl-renderer-cleanups

WebGL renderer cleanups

src/ol/renderer/webgl/webgllayerrenderer.js

@@ -3,6 +3,7 @@ goog.provide('ol.renderer.webgl.Layer');
 goog.require('goog.vec.Mat4');
 goog.require('ol.layer.Layer');
 goog.require('ol.renderer.Layer');
+goog.require('ol.vec.Mat4');
 
 
 
@@ -13,7 +14,50 @@ goog.require('ol.renderer.Layer');
  * @param {ol.layer.Layer} layer Layer.
  */
 ol.renderer.webgl.Layer = function(mapRenderer, layer) {
+
   goog.base(this, mapRenderer, layer);
+
+  /**
+   * @private
+   * @type {!goog.vec.Mat4.Float32}
+   */
+  this.brightnessMatrix_ = goog.vec.Mat4.createFloat32();
+
+  /**
+   * @private
+   * @type {!goog.vec.Mat4.Float32}
+   */
+  this.contrastMatrix_ = goog.vec.Mat4.createFloat32();
+
+  /**
+   * @private
+   * @type {!goog.vec.Mat4.Float32}
+   */
+  this.hueMatrix_ = goog.vec.Mat4.createFloat32();
+
+  /**
+   * @private
+   * @type {!goog.vec.Mat4.Float32}
+   */
+  this.saturationMatrix_ = goog.vec.Mat4.createFloat32();
+
+  /**
+   * @private
+   * @type {!goog.vec.Mat4.Float32}
+   */
+  this.colorMatrix_ = goog.vec.Mat4.createFloat32();
+
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.colorMatrixDirty_ = true;
+
+  this.handleLayerBrightnessChange();
+  this.handleLayerContrastChange();
+  this.handleLayerHueChange();
+  this.handleLayerSaturationChange();
+
 };
 goog.inherits(ol.renderer.webgl.Layer, ol.renderer.Layer);
 
@@ -26,6 +70,17 @@ ol.renderer.webgl.Layer.prototype.dispatchChangeEvent = function() {
 };
 
 
+/**
+ * @return {!goog.vec.Mat4.Float32} Color matrix.
+ */
+ol.renderer.webgl.Layer.prototype.getColorMatrix = function() {
+  if (this.colorMatrixDirty_) {
+    this.updateColorMatrix_();
+  }
+  return this.colorMatrix_;
+};
+
+
 /**
  * @inheritDoc
  * @return {ol.renderer.Map} MapRenderer.
@@ -37,7 +92,7 @@ ol.renderer.webgl.Layer.prototype.getMapRenderer = function() {
 
 
 /**
- * @return {goog.vec.Mat4.AnyType} Matrix.
+ * @return {!goog.vec.Mat4.Number} Matrix.
  */
 ol.renderer.webgl.Layer.prototype.getMatrix = goog.abstractMethod;
 
@@ -52,6 +107,9 @@ ol.renderer.webgl.Layer.prototype.getTexture = goog.abstractMethod;
  * @inheritDoc
  */
 ol.renderer.webgl.Layer.prototype.handleLayerBrightnessChange = function() {
+  var value = this.getLayer().getBrightness();
+  ol.vec.Mat4.makeBrightness(this.brightnessMatrix_, value);
+  this.colorMatrixDirty_ = true;
   this.dispatchChangeEvent();
 };
 
@@ -60,6 +118,9 @@ ol.renderer.webgl.Layer.prototype.handleLayerBrightnessChange = function() {
  * @inheritDoc
  */
 ol.renderer.webgl.Layer.prototype.handleLayerContrastChange = function() {
+  var value = this.getLayer().getContrast();
+  ol.vec.Mat4.makeContrast(this.contrastMatrix_, value);
+  this.colorMatrixDirty_ = true;
   this.dispatchChangeEvent();
 };
 
@@ -68,6 +129,9 @@ ol.renderer.webgl.Layer.prototype.handleLayerContrastChange = function() {
  * @inheritDoc
  */
 ol.renderer.webgl.Layer.prototype.handleLayerHueChange = function() {
+  var value = this.getLayer().getHue();
+  ol.vec.Mat4.makeHue(this.hueMatrix_, value);
+  this.colorMatrixDirty_ = true;
   this.dispatchChangeEvent();
 };
 
@@ -92,6 +156,9 @@ ol.renderer.webgl.Layer.prototype.handleLayerOpacityChange = function() {
  * @inheritDoc
  */
 ol.renderer.webgl.Layer.prototype.handleLayerSaturationChange = function() {
+  var saturation = this.getLayer().getSaturation();
+  ol.vec.Mat4.makeSaturation(this.saturationMatrix_, saturation);
+  this.colorMatrixDirty_ = true;
   this.dispatchChangeEvent();
 };
 
@@ -116,3 +183,17 @@ ol.renderer.webgl.Layer.prototype.handleWebGLContextLost = goog.nullFunction;
  * @return {boolean} Request render frame.
  */
 ol.renderer.webgl.Layer.prototype.renderFrame = goog.abstractMethod;
+
+
+/**
+ * @private
+ */
+ol.renderer.webgl.Layer.prototype.updateColorMatrix_ = function() {
+  var colorMatrix = this.colorMatrix_;
+  goog.vec.Mat4.makeIdentity(colorMatrix);
+  goog.vec.Mat4.multMat(colorMatrix, this.contrastMatrix_, colorMatrix);
+  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;
+};

src/ol/renderer/webgl/webglmaprenderer.js

@@ -16,7 +16,6 @@ goog.require('goog.events.Event');
 goog.require('goog.events.EventType');
 goog.require('goog.functions');
 goog.require('goog.style');
-goog.require('goog.vec.Mat4');
 goog.require('goog.webgl');
 goog.require('ol.layer.Layer');
 goog.require('ol.layer.TileLayer');
@@ -269,64 +268,6 @@ ol.renderer.webgl.Map.prototype.bindImageTexture =
 ol.renderer.webgl.Map.prototype.canRotate = goog.functions.TRUE;
 
 
-/**
- * @param {number} value Hue value.
- * @return {!goog.vec.Mat4.Float32} Matrix.
- */
-ol.renderer.webgl.Map.prototype.createHueRotateMatrix = function(value) {
-  var cosHue = Math.cos(value);
-  var sinHue = Math.sin(value);
-  var v00 = 0.213 + cosHue * 0.787 - sinHue * 0.213;
-  var v01 = 0.715 - cosHue * 0.715 - sinHue * 0.715;
-  var v02 = 0.072 - cosHue * 0.072 + sinHue * 0.928;
-  var v03 = 0;
-  var v10 = 0.213 - cosHue * 0.213 + sinHue * 0.143;
-  var v11 = 0.715 + cosHue * 0.285 + sinHue * 0.140;
-  var v12 = 0.072 - cosHue * 0.072 - sinHue * 0.283;
-  var v13 = 0;
-  var v20 = 0.213 - cosHue * 0.213 - sinHue * 0.787;
-  var v21 = 0.715 - cosHue * 0.715 + sinHue * 0.715;
-  var v22 = 0.072 + cosHue * 0.928 + sinHue * 0.072;
-  var v23 = 0;
-  var v30 = 0;
-  var v31 = 0;
-  var v32 = 0;
-  var v33 = 1;
-  var matrix = goog.vec.Mat4.createFloat32();
-  goog.vec.Mat4.setFromValues(matrix,
-      v00, v10, v20, v30,
-      v01, v11, v21, v31,
-      v02, v12, v22, v32,
-      v03, v13, v23, v33);
-  return matrix;
-};
-
-
-/**
- * @param {number} value Brightness value.
- * @return {!goog.vec.Mat4.Float32} Matrix.
- */
-ol.renderer.webgl.Map.prototype.createBrightnessMatrix = function(value) {
-  var matrix = goog.vec.Mat4.createFloat32Identity();
-  goog.vec.Mat4.setColumnValues(matrix, 3, value, value, value, 1);
-  return matrix;
-};
-
-
-/**
- * @param {number} value Contrast value.
- * @return {!goog.vec.Mat4.Float32} Matrix.
- */
-ol.renderer.webgl.Map.prototype.createContrastMatrix = function(value) {
-  var matrix = goog.vec.Mat4.createFloat32();
-  goog.vec.Mat4.setDiagonalValues(matrix, value, value, value, 1);
-  var translateValue = (-0.5 * value + 0.5);
-  goog.vec.Mat4.setColumnValues(matrix, 3,
-      translateValue, translateValue, translateValue, 1);
-  return matrix;
-};
-
-
 /**
  * @inheritDoc
  */
@@ -341,38 +282,6 @@ ol.renderer.webgl.Map.prototype.createLayerRenderer = function(layer) {
 };
 
 
-/**
- * @param {number} value Saturation value.
- * @return {!goog.vec.Mat4.Float32} Matrix.
- */
-ol.renderer.webgl.Map.prototype.createSaturateMatrix = function(value) {
-  var v00 = 0.213 + 0.787 * value;
-  var v01 = 0.715 - 0.715 * value;
-  var v02 = 0.072 - 0.072 * value;
-  var v03 = 0;
-  var v10 = 0.213 - 0.213 * value;
-  var v11 = 0.715 + 0.285 * value;
-  var v12 = 0.072 - 0.072 * value;
-  var v13 = 0;
-  var v20 = 0.213 - 0.213 * value;
-  var v21 = 0.715 - 0.715 * value;
-  var v22 = 0.072 + 0.928 * value;
-  var v23 = 0;
-  var v30 = 0;
-  var v31 = 0;
-  var v32 = 0;
-  var v33 = 1;
-  var matrix = goog.vec.Mat4.createFloat32();
-  goog.vec.Mat4.setFromValues(matrix,
-      v00, v10, v20, v30,
-      v01, v11, v21, v31,
-      v02, v12, v22, v32,
-      v03, v13, v23, v33);
-  return matrix;
-
-};
-
-
 /**
  * @inheritDoc
  */
@@ -603,7 +512,8 @@ ol.renderer.webgl.Map.prototype.removeLayerRenderer = function(layer) {
  */
 ol.renderer.webgl.Map.prototype.renderFrame = function(time) {
 
-  if (!this.getMap().isDef()) {
+  var map = this.getMap();
+  if (!map.isDef()) {
     return;
   }
 
@@ -622,13 +532,6 @@ ol.renderer.webgl.Map.prototype.renderFrame = function(time) {
     this.canvasSize_ = size;
   }
 
-  var animate = false;
-  this.forEachReadyVisibleLayer(function(layer, layerRenderer) {
-    if (layerRenderer.renderFrame(time)) {
-      animate = true;
-    }
-  });
-
   var gl = this.getGL();
 
   gl.bindFramebuffer(goog.webgl.FRAMEBUFFER, null);
@@ -677,16 +580,8 @@ ol.renderer.webgl.Map.prototype.renderFrame = function(time) {
   this.forEachReadyVisibleLayer(function(layer, layerRenderer) {
     gl.uniformMatrix4fv(
         this.locations_.uMatrix, false, layerRenderer.getMatrix());
-    var hueRotateMatrix = this.createHueRotateMatrix(layer.getHue());
+    gl.uniformMatrix4fv(
-    var saturateMatrix = this.createSaturateMatrix(layer.getSaturation());
+        this.locations_.uColorMatrix, false, layerRenderer.getColorMatrix());
-    var brightnessMatrix = this.createBrightnessMatrix(layer.getBrightness());
-    var contrastMatrix = this.createContrastMatrix(layer.getContrast());
-    var colorMatrix = goog.vec.Mat4.createFloat32Identity();
-    goog.vec.Mat4.multMat(colorMatrix, contrastMatrix, colorMatrix);
-    goog.vec.Mat4.multMat(colorMatrix, brightnessMatrix, colorMatrix);
-    goog.vec.Mat4.multMat(colorMatrix, saturateMatrix, colorMatrix);
-    goog.vec.Mat4.multMat(colorMatrix, hueRotateMatrix, colorMatrix);
-    gl.uniformMatrix4fv(this.locations_.uColorMatrix, false, colorMatrix);
     gl.uniform1f(this.locations_.uOpacity, layer.getOpacity());
     gl.bindTexture(goog.webgl.TEXTURE_2D, layerRenderer.getTexture());
     gl.drawArrays(goog.webgl.TRIANGLE_STRIP, 0, 4);

src/ol/renderer/webgl/webgltilelayerrenderer.js

@@ -145,7 +145,7 @@ ol.renderer.webgl.TileLayer = function(mapRenderer, tileLayer) {
 
   /**
    * @private
-   * @type {goog.vec.Mat4.AnyType}
+   * @type {!goog.vec.Mat4.Number}
    */
   this.matrix_ = goog.vec.Mat4.createNumber();
 

src/ol/vec/mat4.js

@@ -0,0 +1,92 @@
+goog.provide('ol.vec.Mat4');
+
+goog.require('goog.vec.Mat4');
+
+
+/**
+ * @param {!goog.vec.Mat4.Float32} matrix Matrix.
+ * @param {number} value Brightness value.
+ * @return {!goog.vec.Mat4.Float32} Matrix.
+ */
+ol.vec.Mat4.makeBrightness = function(matrix, value) {
+  goog.vec.Mat4.makeTranslate(matrix, value, value, value);
+  return matrix;
+};
+
+
+/**
+ * @param {!goog.vec.Mat4.Float32} matrix Matrix.
+ * @param {number} value Contrast value.
+ * @return {!goog.vec.Mat4.Float32} Matrix.
+ */
+ol.vec.Mat4.makeContrast = function(matrix, value) {
+  goog.vec.Mat4.makeScale(matrix, value, value, value);
+  var translateValue = (-0.5 * value + 0.5);
+  goog.vec.Mat4.setColumnValues(matrix, 3,
+      translateValue, translateValue, translateValue, 1);
+  return matrix;
+};
+
+
+/**
+ * @param {!goog.vec.Mat4.Float32} matrix Matrix.
+ * @param {number} value Hue value.
+ * @return {!goog.vec.Mat4.Float32} Matrix.
+ */
+ol.vec.Mat4.makeHue = function(matrix, value) {
+  var cosHue = Math.cos(value);
+  var sinHue = Math.sin(value);
+  var v00 = 0.213 + cosHue * 0.787 - sinHue * 0.213;
+  var v01 = 0.715 - cosHue * 0.715 - sinHue * 0.715;
+  var v02 = 0.072 - cosHue * 0.072 + sinHue * 0.928;
+  var v03 = 0;
+  var v10 = 0.213 - cosHue * 0.213 + sinHue * 0.143;
+  var v11 = 0.715 + cosHue * 0.285 + sinHue * 0.140;
+  var v12 = 0.072 - cosHue * 0.072 - sinHue * 0.283;
+  var v13 = 0;
+  var v20 = 0.213 - cosHue * 0.213 - sinHue * 0.787;
+  var v21 = 0.715 - cosHue * 0.715 + sinHue * 0.715;
+  var v22 = 0.072 + cosHue * 0.928 + sinHue * 0.072;
+  var v23 = 0;
+  var v30 = 0;
+  var v31 = 0;
+  var v32 = 0;
+  var v33 = 1;
+  goog.vec.Mat4.setFromValues(matrix,
+      v00, v10, v20, v30,
+      v01, v11, v21, v31,
+      v02, v12, v22, v32,
+      v03, v13, v23, v33);
+  return matrix;
+};
+
+
+/**
+ * @param {!goog.vec.Mat4.Float32} matrix Matrix.
+ * @param {number} value Saturation value.
+ * @return {!goog.vec.Mat4.Float32} Matrix.
+ */
+ol.vec.Mat4.makeSaturation = function(matrix, value) {
+  var v00 = 0.213 + 0.787 * value;
+  var v01 = 0.715 - 0.715 * value;
+  var v02 = 0.072 - 0.072 * value;
+  var v03 = 0;
+  var v10 = 0.213 - 0.213 * value;
+  var v11 = 0.715 + 0.285 * value;
+  var v12 = 0.072 - 0.072 * value;
+  var v13 = 0;
+  var v20 = 0.213 - 0.213 * value;
+  var v21 = 0.715 - 0.715 * value;
+  var v22 = 0.072 + 0.928 * value;
+  var v23 = 0;
+  var v30 = 0;
+  var v31 = 0;
+  var v32 = 0;
+  var v33 = 1;
+  goog.vec.Mat4.setFromValues(matrix,
+      v00, v10, v20, v30,
+      v01, v11, v21, v31,
+      v02, v12, v22, v32,
+      v03, v13, v23, v33);
+  return matrix;
+};