diff --git a/src/ol/renderer/webgl/webglmaprenderer.js b/src/ol/renderer/webgl/webglmaprenderer.js index 494a6198ca..13ea482b40 100644 --- a/src/ol/renderer/webgl/webglmaprenderer.js +++ b/src/ol/renderer/webgl/webglmaprenderer.js @@ -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);