From 874047a928206becd1e7b7d11ece7297991949dd Mon Sep 17 00:00:00 2001 From: Olivier Guyot Date: Fri, 16 Nov 2018 01:51:00 +0100 Subject: [PATCH] The heatmap layer now has a configurable blur --- src/ol/layer/Heatmap.js | 90 ++++++++++++++++++++++++++++++++++++----- 1 file changed, 81 insertions(+), 9 deletions(-) diff --git a/src/ol/layer/Heatmap.js b/src/ol/layer/Heatmap.js index 58fbf87534..2ba6362439 100644 --- a/src/ol/layer/Heatmap.js +++ b/src/ol/layer/Heatmap.js @@ -5,11 +5,7 @@ import {listen} from '../events.js'; import {getChangeEventType} from '../Object.js'; import {createCanvasContext2D} from '../dom.js'; import VectorLayer from './Vector.js'; -import {clamp} from '../math.js'; import {assign} from '../obj.js'; -import RenderEventType from '../render/EventType.js'; -import Icon from '../style/Icon.js'; -import Style from '../style/Style.js'; import WebGLPointsLayerRenderer from "../renderer/webgl-new/PointsLayer"; @@ -229,6 +225,8 @@ class Heatmap extends VectorLayer { fragmentShader: ` precision mediump float; uniform float u_opacity; + uniform float u_resolution; + uniform float u_blur; varying vec2 v_texCoord; @@ -236,20 +234,94 @@ class Heatmap extends VectorLayer { gl_FragColor.rgb = vec3(1.0, 1.0, 1.0); vec2 texCoord = v_texCoord * 2.0 - vec2(1.0, 1.0); float sqRadius = texCoord.x * texCoord.x + texCoord.y * texCoord.y; - float alpha = 1.0 - sqrt(sqRadius); + float alpha = 1.0 - sqRadius * sqRadius; if (alpha <= 0.0) { discard; } - gl_FragColor.a = alpha * 0.1; + gl_FragColor.a = alpha * 0.30 + 1.0 / u_resolution; }`, uniforms: { u_size: function() { return this.get(Property.RADIUS) * 10; - }.bind(this) + }.bind(this), + u_resolution: function(frameState) { + return frameState.viewState.resolution; + } }, postProcesses: [ { - scaleRatio: 0.25 + fragmentShader: ` + precision mediump float; + + uniform sampler2D u_image; + uniform sampler2D u_gradientTexture; + uniform vec2 u_blurSize; + + varying vec2 v_texCoord; + varying vec2 v_screenCoord; + + void main() { + float weights[9]; + weights[0] = weights[8] = 0.05; + weights[1] = weights[7] = 0.09; + weights[2] = weights[6] = 0.12; + weights[3] = weights[5] = 0.15; + weights[4] = 0.18; + vec4 sum = vec4(0.0); + vec2 offset; + vec4 center = texture2D(u_image, v_texCoord); + + // vertical blur + offset = vec2(0.0, u_blurSize.y * 1.0); + sum += texture2D(u_image, v_texCoord + offset) * weights[0]; + offset = vec2(0.0, u_blurSize.y * 0.75); + sum += texture2D(u_image, v_texCoord + offset) * weights[1]; + offset = vec2(0.0, u_blurSize.y * 0.5); + sum += texture2D(u_image, v_texCoord + offset) * weights[2]; + offset = vec2(0.0, u_blurSize.y * 0.25); + sum += texture2D(u_image, v_texCoord + offset) * weights[3]; + offset = vec2(0.0, u_blurSize.y * 0.0); + sum += texture2D(u_image, v_texCoord + offset) * weights[4]; + offset = vec2(0.0, u_blurSize.y * -0.25); + sum += texture2D(u_image, v_texCoord + offset) * weights[5]; + offset = vec2(0.0, u_blurSize.y * -0.5); + sum += texture2D(u_image, v_texCoord + offset) * weights[6]; + offset = vec2(0.0, u_blurSize.y * -0.75); + sum += texture2D(u_image, v_texCoord + offset) * weights[7]; + offset = vec2(0.0, u_blurSize.y * -1.0); + sum += center * weights[8]; + + // horizontal blur + offset = vec2(u_blurSize.x * 1.0, 0.0); + sum += texture2D(u_image, v_texCoord + offset) * weights[0]; + offset = vec2(u_blurSize.x * 0.75, 0.0); + sum += texture2D(u_image, v_texCoord + offset) * weights[1]; + offset = vec2(u_blurSize.x * 0.5, 0.0); + sum += texture2D(u_image, v_texCoord + offset) * weights[2]; + offset = vec2(u_blurSize.x * 0.25, 0.0); + sum += texture2D(u_image, v_texCoord + offset) * weights[3]; + offset = vec2(u_blurSize.x * 0.0, 0.0); + sum += texture2D(u_image, v_texCoord + offset) * weights[4]; + offset = vec2(u_blurSize.x * -0.25, 0.0); + sum += texture2D(u_image, v_texCoord + offset) * weights[5]; + offset = vec2(u_blurSize.x * -0.5, 0.0); + sum += texture2D(u_image, v_texCoord + offset) * weights[6]; + offset = vec2(u_blurSize.x * -0.75, 0.0); + sum += texture2D(u_image, v_texCoord + offset) * weights[7]; + offset = vec2(u_blurSize.x * -1.0, 0.0); + sum += center * weights[8]; + + gl_FragColor = sum * 0.5; + }`, + scaleRatio: 0.5, + uniforms: { + u_blurSize: function (frameState) { + return [ + this.get(Property.BLUR) / frameState.size[0], + this.get(Property.BLUR) / frameState.size[1] + ] + }.bind(this) + } }, { fragmentShader: ` @@ -264,7 +336,7 @@ class Heatmap extends VectorLayer { void main() { vec4 color = texture2D(u_image, v_texCoord); gl_FragColor.rgb = texture2D(u_gradientTexture, vec2(0.5, color.a)).rgb; - gl_FragColor.a = smoothstep(0.0, 0.07, color.a); + gl_FragColor.a = color.a; }`, uniforms: { u_gradientTexture: this.gradient_,