Merge pull request #13150 from mike-000/heatmap-opacity

Include layer opacity in Heatmap shader
This commit is contained in:
Olivier Guyot
2021-12-22 12:28:03 +01:00
committed by GitHub
4 changed files with 52 additions and 2 deletions

View File

@@ -285,12 +285,13 @@ class Heatmap extends BaseVector {
uniform sampler2D u_image;
uniform sampler2D u_gradientTexture;
uniform float u_opacity;
varying vec2 v_texCoord;
void main() {
vec4 color = texture2D(u_image, v_texCoord);
gl_FragColor.a = color.a;
gl_FragColor.a = color.a * u_opacity;
gl_FragColor.rgb = texture2D(u_gradientTexture, vec2(0.5, color.a)).rgb;
gl_FragColor.rgb *= gl_FragColor.a;
}`,
@@ -298,6 +299,9 @@ class Heatmap extends BaseVector {
u_gradientTexture: function () {
return this.gradient_;
}.bind(this),
u_opacity: function () {
return this.getOpacity();
}.bind(this),
},
},
],

View File

@@ -55,7 +55,7 @@ import {listen, unlistenByKey} from '../../events.js';
* @property {string} [hitVertexShader] Vertex shader source for hit detection rendering.
* @property {string} [hitFragmentShader] Fragment shader source for hit detection rendering.
* @property {Object<string,import("../../webgl/Helper").UniformValue>} [uniforms] Uniform definitions for the post process steps
* Please note that `u_texture` is reserved for the main texture slot.
* Please note that `u_texture` is reserved for the main texture slot and `u_opacity` is reserved for the layer opacity.
* @property {Array<import("./Layer").PostProcessesOptions>} [postProcesses] Post-processes definitions
*/
@@ -99,6 +99,7 @@ import {listen, unlistenByKey} from '../../events.js';
* the final color that will have to be output for hit detection to work.
*
* The following uniform is used for the main texture: `u_texture`.
* The following uniform is used for the layer opacity: `u_opacity`.
*
* Please note that the main shader output should have premultiplied alpha, otherwise visual anomalies may occur.
*