From fb8bf785dd5b7a91796ef7ad3584102f2b206d5b Mon Sep 17 00:00:00 2001 From: Olivier Guyot Date: Fri, 16 Nov 2018 00:24:51 +0100 Subject: [PATCH] Use the gradient texture in the heatmap layer --- src/ol/layer/Heatmap.js | 15 ++++++++++----- src/ol/webgl/Helper.js | 3 ++- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/ol/layer/Heatmap.js b/src/ol/layer/Heatmap.js index 58a624d451..31db5f5782 100644 --- a/src/ol/layer/Heatmap.js +++ b/src/ol/layer/Heatmap.js @@ -85,7 +85,7 @@ class Heatmap extends VectorLayer { /** * @private - * @type {Uint8ClampedArray} + * @type {HTMLCanvasElement} */ this.gradient_ = null; @@ -309,15 +309,20 @@ class Heatmap extends VectorLayer { precision mediump float; uniform sampler2D u_image; + uniform sampler2D u_gradientTexture; varying vec2 v_texCoord; varying vec2 v_screenCoord; void main() { vec4 color = texture2D(u_image, v_texCoord); - gl_FragColor.rgb = vec3(color.a, 0.3 + color.a * 0.6, 0.5); + gl_FragColor.rgb = texture2D(u_gradientTexture, vec2(0.5, color.a)).rgb; + // gl_FragColor.rgb = color.rgb; gl_FragColor.a = smoothstep(0.0, 0.07, color.a); - }` + }`, + uniforms: { + u_gradientTexture: this.gradient_ + } } ], sizeCallback: function() { @@ -330,7 +335,7 @@ class Heatmap extends VectorLayer { /** * @param {Array} colors A list of colored. - * @return {Uint8ClampedArray} An array. + * @return {HTMLCanvasElement} canvas with gradient texture. */ function createGradient(colors) { const width = 1; @@ -346,7 +351,7 @@ function createGradient(colors) { context.fillStyle = gradient; context.fillRect(0, 0, width, height); - return context.getImageData(0, 0, width, height).data; + return context.canvas; } diff --git a/src/ol/webgl/Helper.js b/src/ol/webgl/Helper.js index 2371e7a5e7..dcb79137b4 100644 --- a/src/ol/webgl/Helper.js +++ b/src/ol/webgl/Helper.js @@ -156,7 +156,8 @@ class WebGLHelper extends Disposable { webGlContext: gl, scaleRatio: options.scaleRatio, vertexShader: options.vertexShader, - fragmentShader: options.fragmentShader + fragmentShader: options.fragmentShader, + uniforms: options.uniforms }); }) : [new WebGLPostProcessingPass({ webGlContext: gl })]; }