diff --git a/README.md b/README.md index 536e0493..8812c1a6 100644 --- a/README.md +++ b/README.md @@ -136,6 +136,18 @@ The `new MapboxInterpolateHeatmapLayer()` function has the following parameters: } ``` +- `valueToColor4`: Same as `valueToColor`, but with alpha channel support. The function name and signature must be defined as: + + `vec4 valueToColor4(float value, float defaultOpacity)` + + Default value: + + ```glsl + vec4 valueToColor4(float value, float defaultOpacity) { + return vec4(valueToColor(value), defaultOpacity); + } + ``` + ## Technical explanation The color is computed using the [Inverse Distance Weighting](https://en.wikipedia.org/wiki/Inverse_distance_weighting) (IDW) algorithm: diff --git a/src/layer.ts b/src/layer.ts index 34699005..4d3a9eac 100644 --- a/src/layer.ts +++ b/src/layer.ts @@ -13,10 +13,15 @@ class MapboxInterpolateHeatmapLayer implements CustomLayerInterface { aoi?: { lat: number; lon: number }[] = []; textureCoverSameAreaAsROI: boolean; valueToColor?: string = ` - vec3 valueToColor(float value) { + vec3 valueToColor(float value) { return vec3(max((value-0.5)*2.0, 0.0), 1.0 - 2.0*abs(value - 0.5), max((0.5-value)*2.0, 0.0)); - } -`; + } + `; + valueToColor4?: string = ` + vec4 valueToColor4(float value, float defaultOpacity) { + return vec4(valueToColor(value), defaultOpacity); + } + `; points: number[][] = []; // Custom Props aPositionComputation?: number; @@ -91,8 +96,8 @@ class MapboxInterpolateHeatmapLayer implements CustomLayerInterface { void main(void) { vec4 data = texture2D(u_ComputationTexture, vec2(gl_FragCoord.x/u_ScreenSize.x, gl_FragCoord.y/u_ScreenSize.y)); float u = data.x/data.y; - gl_FragColor.rgb = valueToColor(u); - gl_FragColor.a = u_Opacity; + u += u_Opacity*0.00000001; // force WebGL to use u_Opacity. This might not be the case depending on valueToColor4 + gl_FragColor = valueToColor4(u, u_Opacity); } `; const computationVertexSource = `