From cfaee15c9fe9b1b7c201473e210237dc67537fc9 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Sat, 5 Jan 2013 12:13:06 +0100 Subject: [PATCH] Factor out color matrix generation, move color matrix into layer renderer --- src/ol/renderer/webgl/webgllayerrenderer.js | 81 +++++++++++++++ src/ol/renderer/webgl/webglmaprenderer.js | 103 +------------------- src/ol/vec/mat4.js | 92 +++++++++++++++++ 3 files changed, 175 insertions(+), 101 deletions(-) create mode 100644 src/ol/vec/mat4.js diff --git a/src/ol/renderer/webgl/webgllayerrenderer.js b/src/ol/renderer/webgl/webgllayerrenderer.js index 07fae42335..6cf6c01cb4 100644 --- a/src/ol/renderer/webgl/webgllayerrenderer.js +++ b/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. @@ -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; +}; diff --git a/src/ol/renderer/webgl/webglmaprenderer.js b/src/ol/renderer/webgl/webglmaprenderer.js index 66c1336b32..9b0b638e62 100644 --- a/src/ol/renderer/webgl/webglmaprenderer.js +++ b/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 */ @@ -671,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()); - var saturateMatrix = this.createSaturateMatrix(layer.getSaturation()); - 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.uniformMatrix4fv( + this.locations_.uColorMatrix, false, layerRenderer.getColorMatrix()); gl.uniform1f(this.locations_.uOpacity, layer.getOpacity()); gl.bindTexture(goog.webgl.TEXTURE_2D, layerRenderer.getTexture()); gl.drawArrays(goog.webgl.TRIANGLE_STRIP, 0, 4); diff --git a/src/ol/vec/mat4.js b/src/ol/vec/mat4.js new file mode 100644 index 0000000000..46535be877 --- /dev/null +++ b/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; +};