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

Adjust hue, sat, and constrast in webgl renderer

Browse Source
This commit is contained in:
Éric Lemoine
2012-11-29 22:48:40 +01:00
parent 9622395c86
commit 21f3f90ca6
1 changed files with 108 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
src/ol/renderer/webgl/webglmaprenderer.js
View File

@@ -16,6 +16,7 @@ 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');
@@ -36,19 +37,15 @@ ol.renderer.webgl.TextureCacheEntry;
/**
* @constructor
* @extends {ol.renderer.webgl.FragmentShader}
* @see https://github.com/evanw/glfx.js/blob/master/src/filters/adjust/brightnesscontrast.js
* @see https://github.com/evanw/glfx.js/blob/master/src/filters/adjust/huesaturation.js
* @see https://svn.webkit.org/repository/webkit/trunk/Source/WebCore/platform/graphics/filters/skia/SkiaImageFilterBuilder.cpp
*/
ol.renderer.webgl.map.shader.Fragment = function() {
goog.base(this, [
'precision mediump float;',
'',
'uniform float uBrightness;',
'uniform float uContrast;',
'uniform float uHue;',
'uniform mat4 uColorMatrix;',
'uniform float uOpacity;',
'uniform mat4 uMatrix;',
'uniform float uSaturation;',
'uniform sampler2D uTexture;',
'',
'varying vec2 vTexCoord;',
@@ -56,41 +53,9 @@ ol.renderer.webgl.map.shader.Fragment = function() {
'void main(void) {',
'',
' vec4 texCoord = uMatrix * vec4(vTexCoord, 0., 1.);',
' vec4 color = texture2D(uTexture, texCoord.st);',
'',
' if (uHue != 0.) {',
' float angle = uHue * 3.14159265;',
' float s = sin(angle), c = cos(angle);',
' vec3 weights = (vec3(2. * c, -sqrt(3.) * s - c, sqrt(3.) * s - c)',
' + 1.) / 3.;',
' color.rgb = vec3(',
' dot(color.rgb, weights.xyz),',
' dot(color.rgb, weights.zxy),',
' dot(color.rgb, weights.yzx)',
' );',
' }',
'',
' if (uSaturation != 0.) {',
' float average = (color.r + color.g + color.b) / 3.;',
' if (uSaturation > 0.) {',
' color.rgb += (average - color.rgb)',
' * (1. - 1. / (1. - uSaturation));',
' } else {',
' color.rgb += (average - color.rgb) * -uSaturation;',
' }',
' }',
'',
' color.rgb += uBrightness;',
'',
' if (uContrast != 0.) {',
' if (uContrast > 0.) {',
' color.rgb = (color.rgb - 0.5) / (1. - uContrast) + 0.5;',
' } else {',
' color.rgb = (color.rgb - 0.5) * (1. + uContrast) + 0.5;',
' }',
' }',
'',
' color.a = color.a * uOpacity;',
' vec4 texColor = texture2D(uTexture, texCoord.st);',
' vec4 color = uColorMatrix * vec4(texColor.rgb, 1.);',
' color.a = texColor.a * uOpacity;',
'',
' gl_FragColor = color;',
'',
@@ -188,12 +153,9 @@ ol.renderer.webgl.Map = function(container, map) {
* @private
* @type {{aPosition: number,
* aTexCoord: number,
* uBrightness: WebGLUniformLocation,
* uContrast: WebGLUniformLocation,
* uHue: WebGLUniformLocation,
* uColorMatrix: WebGLUniformLocation,
* uMatrix: WebGLUniformLocation,
* uOpacity: WebGLUniformLocation,
* uSaturation: WebGLUniformLocation,
* uTexture: WebGLUniformLocation}|null}
*/
this.locations_ = null;
@@ -307,6 +269,64 @@ 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
*/
@@ -321,6 +341,38 @@ 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
*/
@@ -585,12 +637,9 @@ ol.renderer.webgl.Map.prototype.render = function() {
this.locations_ = {
aPosition: gl.getAttribLocation(program, 'aPosition'),
aTexCoord: gl.getAttribLocation(program, 'aTexCoord'),
uBrightness: gl.getUniformLocation(program, 'uBrightness'),
uContrast: gl.getUniformLocation(program, 'uContrast'),
uHue: gl.getUniformLocation(program, 'uHue'),
uColorMatrix: gl.getUniformLocation(program, 'uColorMatrix'),
uMatrix: gl.getUniformLocation(program, 'uMatrix'),
uOpacity: gl.getUniformLocation(program, 'uOpacity'),
uSaturation: gl.getUniformLocation(program, 'uSaturation'),
uTexture: gl.getUniformLocation(program, 'uTexture')
};
}
@@ -620,11 +669,17 @@ ol.renderer.webgl.Map.prototype.render = function() {
this.forEachReadyVisibleLayer(function(layer, layerRenderer) {
gl.uniformMatrix4fv(
this.locations_.uMatrix, false, layerRenderer.getMatrix());
gl.uniform1f(this.locations_.uBrightness, layer.getBrightness());
gl.uniform1f(this.locations_.uContrast, layer.getContrast());
gl.uniform1f(this.locations_.uHue, layer.getHue());
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.uniform1f(this.locations_.uOpacity, layer.getOpacity());
gl.uniform1f(this.locations_.uSaturation, layer.getSaturation());
gl.bindTexture(goog.webgl.TEXTURE_2D, layerRenderer.getTexture());
gl.drawArrays(goog.webgl.TRIANGLE_STRIP, 0, 4);
}, this);