ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Move color matrix code into ol.color.Matrix

Browse Source
This commit is contained in:
Tom Payne
2013-11-13 17:49:13 +01:00
parent e3c3170c39
commit e1ba9c0322
4 changed files with 209 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/ol/color.js → src/ol/color/color.js
View File

@@ -3,8 +3,6 @@
// causes occasional loss of precision and rounding errors, especially in the
// alpha channel.
// FIXME move the color matrix code from ol.renderer.webgl.Layer to here
goog.provide('ol.color');
goog.require('goog.array');

205
src/ol/color/colormatrix.js Normal file
View File

@@ -0,0 +1,205 @@
goog.provide('ol.color.Matrix');
goog.require('goog.vec.Mat4');
/**
* @constructor
*/
ol.color.Matrix = function() {
/**
* @private
* @type {!goog.vec.Mat4.Number}
*/
this.colorMatrix_ = goog.vec.Mat4.createNumber();
/**
* @private
* @type {number|undefined}
*/
this.brightness_ = undefined;
/**
* @private
* @type {!goog.vec.Mat4.Number}
*/
this.brightnessMatrix_ = goog.vec.Mat4.createNumber();
/**
* @private
* @type {number|undefined}
*/
this.contrast_ = undefined;
/**
* @private
* @type {!goog.vec.Mat4.Number}
*/
this.contrastMatrix_ = goog.vec.Mat4.createNumber();
/**
* @private
* @type {number|undefined}
*/
this.hue_ = undefined;
/**
* @private
* @type {!goog.vec.Mat4.Number}
*/
this.hueMatrix_ = goog.vec.Mat4.createNumber();
/**
* @private
* @type {number|undefined}
*/
this.saturation_ = undefined;
/**
* @private
* @type {!goog.vec.Mat4.Number}
*/
this.saturationMatrix_ = goog.vec.Mat4.createNumber();
};
/**
* @param {!goog.vec.Mat4.Number} matrix Matrix.
* @param {number} value Brightness value.
* @return {!goog.vec.Mat4.Number} Matrix.
*/
ol.color.Matrix.makeBrightness = function(matrix, value) {
goog.vec.Mat4.makeTranslate(matrix, value, value, value);
return matrix;
};
/**
* @param {!goog.vec.Mat4.Number} matrix Matrix.
* @param {number} value Contrast value.
* @return {!goog.vec.Mat4.Number} Matrix.
*/
ol.color.Matrix.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.Number} matrix Matrix.
* @param {number} value Hue value.
* @return {!goog.vec.Mat4.Number} Matrix.
*/
ol.color.Matrix.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.Number} matrix Matrix.
* @param {number} value Saturation value.
* @return {!goog.vec.Mat4.Number} Matrix.
*/
ol.color.Matrix.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;
};
/**
* @param {number|undefined} brightness Brightness.
* @param {number|undefined} contrast Contrast.
* @param {number|undefined} hue Hue.
* @param {number|undefined} saturation Saturation.
* @return {!goog.vec.Mat4.Number} Matrix.
*/
ol.color.Matrix.prototype.getMatrix = function(
brightness, contrast, hue, saturation) {
var colorMatrixDirty = false;
if (goog.isDef(brightness) && brightness !== this.brightness_) {
ol.color.Matrix.makeBrightness(this.brightnessMatrix_, brightness);
this.brightness_ = brightness;
colorMatrixDirty = true;
}
if (goog.isDef(contrast) && contrast !== this.contrast_) {
ol.color.Matrix.makeContrast(this.contrastMatrix_, contrast);
this.contrast_ = contrast;
colorMatrixDirty = true;
}
if (goog.isDef(hue) && hue !== this.hue_) {
ol.color.Matrix.makeHue(this.hueMatrix_, hue);
this.hue_ = hue;
colorMatrixDirty = true;
}
if (goog.isDef(saturation) && saturation !== this.saturation_) {
ol.color.Matrix.makeSaturation(this.saturationMatrix_, saturation);
this.saturation_ = saturation;
colorMatrixDirty = true;
}
if (colorMatrixDirty) {
var colorMatrix = this.colorMatrix_;
goog.vec.Mat4.makeIdentity(colorMatrix);
if (goog.isDef(contrast)) {
goog.vec.Mat4.multMat(colorMatrix, this.contrastMatrix_, colorMatrix);
}
if (goog.isDef(brightness)) {
goog.vec.Mat4.multMat(colorMatrix, this.brightnessMatrix_, colorMatrix);
}
if (goog.isDef(saturation)) {
goog.vec.Mat4.multMat(colorMatrix, this.saturationMatrix_, colorMatrix);
}
if (goog.isDef(hue)) {
goog.vec.Mat4.multMat(colorMatrix, this.hueMatrix_, colorMatrix);
}
}
return this.colorMatrix_;
};

108
src/ol/renderer/webgl/webgllayerrenderer.js
View File

@@ -1,15 +1,13 @@
// FIXME move colorMatrix_ elsewhere?
goog.provide('ol.renderer.webgl.Layer');
goog.require('goog.vec.Mat4');
goog.require('goog.webgl');
goog.require('ol.FrameState');
goog.require('ol.color.Matrix');
goog.require('ol.layer.Layer');
goog.require('ol.renderer.Layer');
goog.require('ol.renderer.webgl.map.shader.Color');
goog.require('ol.renderer.webgl.map.shader.Default');
goog.require('ol.vec.Mat4');
@@ -55,57 +53,9 @@ ol.renderer.webgl.Layer = function(mapRenderer, layer) {
/**
* @private
* @type {!goog.vec.Mat4.Float32}
* @type {ol.color.Matrix}
*/
this.colorMatrix_ = goog.vec.Mat4.createFloat32();
/**
* @private
* @type {number|undefined}
*/
this.brightness_ = undefined;
/**
* @private
* @type {!goog.vec.Mat4.Float32}
*/
this.brightnessMatrix_ = goog.vec.Mat4.createFloat32();
/**
* @private
* @type {number|undefined}
*/
this.contrast_ = undefined;
/**
* @private
* @type {!goog.vec.Mat4.Float32}
*/
this.contrastMatrix_ = goog.vec.Mat4.createFloat32();
/**
* @private
* @type {number|undefined}
*/
this.hue_ = undefined;
/**
* @private
* @type {!goog.vec.Mat4.Float32}
*/
this.hueMatrix_ = goog.vec.Mat4.createFloat32();
/**
* @private
* @type {number|undefined}
*/
this.saturation_ = undefined;
/**
* @private
* @type {!goog.vec.Mat4.Float32}
*/
this.saturationMatrix_ = goog.vec.Mat4.createFloat32();
this.colorMatrix_ = new ol.color.Matrix();
/**
* @private
@@ -241,7 +191,7 @@ ol.renderer.webgl.Layer.prototype.composeFrame =
this.getProjectionMatrix());
if (useColor) {
gl.uniformMatrix4fv(locations.u_colorMatrix, false,
this.getColorMatrix(
this.colorMatrix_.getMatrix(
layerState.brightness,
layerState.contrast,
layerState.hue,
@@ -255,43 +205,6 @@ ol.renderer.webgl.Layer.prototype.composeFrame =
};
/**
* @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(
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_;
};
/**
* @protected
* @return {ol.renderer.webgl.Map} MapRenderer.
@@ -333,16 +246,3 @@ ol.renderer.webgl.Layer.prototype.handleWebGLContextLost = function() {
this.framebuffer = null;
this.framebufferDimension = undefined;
};
/**
* @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);
};

89
src/ol/vec/mat4.js
View File

@@ -3,95 +3,6 @@ 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;
};
/**
* Transforms the given vector with the given matrix storing the resulting,
* transformed vector into resultVec. The input vector is multiplied against the