9466850093

Committed 11 Jun 2024 01:50PM UTC coverage: 89.565% (-0.1%) from 89.672%

Build # 9466850093

Build Type

Pull #8944

github

Committed by

web-flow

Commit Message

Merge 4c2ffe9a8 into 93518480a

Pull Request Pull Request #8944: CARTO HeatmapTileLayer implement autoscaling

Run Details

6355 of 6992 branches covered (90.89%)

Branch coverage included in aggregate %.

68 of 173 new or added lines in 4 files covered. (39.31%)

145 existing lines in 3 files now uncovered.

52484 of 58702 relevant lines covered (89.41%)

6564.26 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

90.0

/modules/carto/src/layers/heatmap.ts

import type {ShaderPass} from '@luma.gl/shadertools';
import {Color} from '@deck.gl/core';
const glsl = (s: TemplateStringsArray) => `${s}`;

/**
 * @filter       Heatmap
 * @param radiusPixels Blur radius in pixels, controls smoothness of heatmap
 * @param colorDomain Domain to apply to values prior to applying color scale
 * @param color1-6 Colors to use in color scale
 */

const fs = glsl`\
uniform heatmapUniforms {
  vec2 delta;
  float radiusPixels;
  vec2 colorDomain;
  vec3 color1;
  vec3 color2;
  vec3 color3;
  vec3 color4;
  vec3 color5;
  vec3 color6;
  float intensity;
  float opacity;
} heatmap;

const vec4 STOPS = vec4(0.2, 0.4, 0.6, 0.8);

vec3 colorGradient(float value) {
  vec3 c1;
  vec3 c2;
  vec2 range;
  if (value < STOPS.x) {
    range = vec2(0.0, STOPS.x);
    c1 = heatmap.color1; c2 = heatmap.color2;
  } else if (value < STOPS.y) {
    range = STOPS.xy;
    c1 = heatmap.color2; c2 = heatmap.color3;
  } else if (value < STOPS.z) {
    range = STOPS.yz;
    c1 = heatmap.color3; c2 = heatmap.color4;
  } else if (value < STOPS.w) {
    range = STOPS.zw;
    c1 = heatmap.color4; c2 = heatmap.color5;
  } else if (value < 1.0 ) {
    range = vec2(STOPS.w, 1.0);
    c1 = heatmap.color5; c2 = heatmap.color6;
  } else {
    // Fade out to white
    range = vec2(1.0, 10.0);
    c1 = heatmap.color6; c2 = vec3(255.0);
  }

  float f = (value - range.x) / (range.y - range.x);
  return mix(c1, c2, f) / 255.0;
}

const vec3 SHIFT = vec3(1.0, 256.0, 256.0 * 256.0);
const float MAX_VAL = SHIFT.z * 255.0;
const float SCALE = MAX_VAL / 8.0;
vec4 pack(float value) {
  return vec4(mod(vec3(value, floor(value / SHIFT.yz)), 256.0), 255.0) / 255.0;
}
float unpack(vec3 color) {
  return 255.0 * dot(color, SHIFT);
}

vec4 heatmap_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
  bool firstPass = (heatmap.delta.y < 0.5);
  float accumulator = 0.0;

  // Controls quality of heatmap, larger values increase quality at expense of performance
  float SUPPORT = clamp(heatmap.radiusPixels / 2.0, 8.0, 32.0);

  // Gaussian normalization parameters
  float sigma = SUPPORT / 3.0;
  float a = -0.5 / (sigma * sigma);
  float w0 = 0.3989422804014327 / sigma; // 1D normalization
  for (float t = -SUPPORT; t <= SUPPORT; t++) {
    vec2 percent = (t * heatmap.delta - 0.5) / SUPPORT;
    vec2 delta = percent * heatmap.radiusPixels / texSize;
    vec4 offsetColor = texture(source, texCoord + delta);

    // Unpack float
    float value = unpack(offsetColor.rgb);

    // Gaussian
    float weight = w0 * exp(a * t * t);
    
    accumulator += value * weight;
  }

  if (firstPass) {
    return pack(accumulator);
  }

  // Undo scaling to obtain normalized density
  float density = 10.0 * heatmap.intensity * accumulator / SCALE;
 
  // Domain also in normalized density units
  vec2 domain = heatmap.colorDomain;

  // Apply domain
  float f = (density - domain[0]) / (domain[1] - domain[0]);

  // sqrt/log scaling??
  // float f = (log(density) - log(domain[0] + 1.0)) / (log(domain[1] + 1.0) - log(domain[0] + 1.0));
  // f = sqrt(f);

  // Color map
  vec4 color = vec4(0.0);
  color.rgb = colorGradient(f);

  color.a = smoothstep(0.0, 0.1, f);
  color.a = pow(color.a, 1.0 / 2.2);
  color.a *= heatmap.opacity;

  return color;
}
`;

const defaultColorRange: Color[] = [
  [255, 255, 178],
  [254, 217, 118],
  [254, 178, 76],
  [253, 141, 60],
  [240, 59, 32],
  [189, 0, 38]
];

export type HeatmapProps = {
  /**
   * Radius of the heatmap blur in pixels, to which the weight of a cell is distributed.
   *
   * @default 20
   */
  radiusPixels?: number;
  /**
   * Controls how weight values are mapped to the `colorRange`, as an array of two numbers [`minValue`, `maxValue`].
   *
   * @default [0, 1]
   */
  colorDomain?: [number, number];
  /**
   * Specified as an array of colors [color1, color2, ...].
   *
   * @default `6-class YlOrRd` - [colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6)
   */
  colorRange: Color[];
  /**
   * Value that is multiplied with the total weight at a pixel to obtain the final weight. A value larger than 1 biases the output color towards the higher end of the spectrum, and a value less than 1 biases the output color towards the lower end of the spectrum.
   */
  intensity?: number;
  opacity: number;
};

export type HeatmapUniforms = {
  delta?: [number, number];
  radiusPixels?: number;
  colorDomain?: [number, number];
  color1?: [number, number, number];
  color2?: [number, number, number];
  color3?: [number, number, number];
  color4?: [number, number, number];
  color5?: [number, number, number];
  color6?: [number, number, number];
  intensity: number;
  opacity?: number;
};

export const heatmap: ShaderPass<HeatmapProps, HeatmapUniforms> = {
  name: 'heatmap',
  uniformPropTypes: {
    delta: {value: [0, 1]},
    radiusPixels: {value: 20, min: 0, softMax: 100},
    colorDomain: {value: [0, 1]},
    color1: {value: [0, 0, 0]},
    color2: {value: [0, 0, 0]},
    color3: {value: [0, 0, 0]},
    color4: {value: [0, 0, 0]},
    color5: {value: [0, 0, 0]},
    color6: {value: [0, 0, 0]},
    intensity: {value: 1, min: 0.1, max: 10},
    opacity: {value: 1, min: 0, max: 1}
  },
  uniformTypes: {
    delta: 'vec2<f32>',
    radiusPixels: 'f32',
    colorDomain: 'vec2<f32>',
    color1: 'vec3<f32>',
    color2: 'vec3<f32>',
    color3: 'vec3<f32>',
    color4: 'vec3<f32>',
    color5: 'vec3<f32>',
    color6: 'vec3<f32>',
    intensity: 'f32',
    opacity: 'f32'
  },
  getUniforms: opts => {
    const {
      delta = [1, 0],
      colorRange = defaultColorRange,
      radiusPixels = 20,
      colorDomain = [0, 1],
      intensity = 1,
      opacity = 1
    } = opts as HeatmapProps & {delta: [number, number]};
    const [color1, color2, color3, color4, color5, color6] = colorRange;
    return {
      delta,
      color1,
      color2,
      color3,
      color4,
      color5,
      color6,
      radiusPixels,
      colorDomain,
      intensity,
      opacity
    };
  },
  fs,
  passes: [
    {sampler: true, uniforms: {delta: [1, 0]}},
    {sampler: true, uniforms: {delta: [0, 1]}}
  ]
};

1	import type {ShaderPass} from '@luma.gl/shadertools';	1✔
2	import {Color} from '@deck.gl/core';	1✔
3	const glsl = (s: TemplateStringsArray) => `${s}`;	1✔
4		1✔
5	/**	1✔
6	* @filter Heatmap	1✔
7	* @param radiusPixels Blur radius in pixels, controls smoothness of heatmap	1✔
8	* @param colorDomain Domain to apply to values prior to applying color scale	1✔
9	* @param color1-6 Colors to use in color scale	1✔
10	*/	1✔
11		1✔
12	const fs = glsl`\	1✔
13	uniform heatmapUniforms {	1✔
14	vec2 delta;	1✔
15	float radiusPixels;	1✔
16	vec2 colorDomain;	1✔
17	vec3 color1;	1✔
18	vec3 color2;	1✔
19	vec3 color3;	1✔
20	vec3 color4;	1✔
21	vec3 color5;	1✔
22	vec3 color6;	1✔
23	float intensity;	1✔
24	float opacity;	1✔
25	} heatmap;	1✔
26		1✔
27	const vec4 STOPS = vec4(0.2, 0.4, 0.6, 0.8);	1✔
28		1✔
29	vec3 colorGradient(float value) {	1✔
30	vec3 c1;	1✔
31	vec3 c2;	1✔
32	vec2 range;	1✔
33	if (value < STOPS.x) {	1✔
34	range = vec2(0.0, STOPS.x);	1✔
35	c1 = heatmap.color1; c2 = heatmap.color2;	1✔
36	} else if (value < STOPS.y) {	1✔
37	range = STOPS.xy;	1✔
38	c1 = heatmap.color2; c2 = heatmap.color3;	1✔
39	} else if (value < STOPS.z) {	1✔
40	range = STOPS.yz;	1✔
41	c1 = heatmap.color3; c2 = heatmap.color4;	1✔
42	} else if (value < STOPS.w) {	1✔
43	range = STOPS.zw;	1✔
44	c1 = heatmap.color4; c2 = heatmap.color5;	1✔
45	} else if (value < 1.0 ) {	1✔
46	range = vec2(STOPS.w, 1.0);	1✔
47	c1 = heatmap.color5; c2 = heatmap.color6;	1✔
48	} else {	1✔
49	// Fade out to white	1✔
50	range = vec2(1.0, 10.0);	1✔
51	c1 = heatmap.color6; c2 = vec3(255.0);	1✔
52	}	1✔
53		1✔
54	float f = (value - range.x) / (range.y - range.x);	1✔
55	return mix(c1, c2, f) / 255.0;	1✔
56	}	1✔
57		1✔
58	const vec3 SHIFT = vec3(1.0, 256.0, 256.0 * 256.0);	1✔
59	const float MAX_VAL = SHIFT.z * 255.0;	1✔
60	const float SCALE = MAX_VAL / 8.0;	1✔
61	vec4 pack(float value) {	1✔
62	return vec4(mod(vec3(value, floor(value / SHIFT.yz)), 256.0), 255.0) / 255.0;	1✔
63	}	1✔
64	float unpack(vec3 color) {	1✔
65	return 255.0 * dot(color, SHIFT);	1✔
66	}	1✔
67		1✔
68	vec4 heatmap_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {	1✔
69	bool firstPass = (heatmap.delta.y < 0.5);	1✔
70	float accumulator = 0.0;	1✔
71		1✔
72	// Controls quality of heatmap, larger values increase quality at expense of performance	1✔
73	float SUPPORT = clamp(heatmap.radiusPixels / 2.0, 8.0, 32.0);	1✔
74		1✔
75	// Gaussian normalization parameters	1✔
76	float sigma = SUPPORT / 3.0;	1✔
77	float a = -0.5 / (sigma * sigma);	1✔
78	float w0 = 0.3989422804014327 / sigma; // 1D normalization	1✔
79	for (float t = -SUPPORT; t <= SUPPORT; t++) {	1✔
80	vec2 percent = (t * heatmap.delta - 0.5) / SUPPORT;	1✔
81	vec2 delta = percent * heatmap.radiusPixels / texSize;	1✔
82	vec4 offsetColor = texture(source, texCoord + delta);	1✔
83		1✔
84	// Unpack float	1✔
85	float value = unpack(offsetColor.rgb);	1✔
86		1✔
87	// Gaussian	1✔
88	float weight = w0 * exp(a * t * t);	1✔
89		1✔
90	accumulator += value * weight;	1✔
91	}	1✔
92		1✔
93	if (firstPass) {	1✔
94	return pack(accumulator);	1✔
95	}	1✔
96		1✔
97	// Undo scaling to obtain normalized density	1✔
98	float density = 10.0 * heatmap.intensity * accumulator / SCALE;	1✔
99		1✔
100	// Domain also in normalized density units	1✔
101	vec2 domain = heatmap.colorDomain;	1✔
102		1✔
103	// Apply domain	1✔
104	float f = (density - domain[0]) / (domain[1] - domain[0]);	1✔
105		1✔
106	// sqrt/log scaling??	1✔
107	// float f = (log(density) - log(domain[0] + 1.0)) / (log(domain[1] + 1.0) - log(domain[0] + 1.0));	1✔
108	// f = sqrt(f);	1✔
109		1✔
110	// Color map	1✔
111	vec4 color = vec4(0.0);	1✔
112	color.rgb = colorGradient(f);	1✔
113		1✔
114	color.a = smoothstep(0.0, 0.1, f);	1✔
115	color.a = pow(color.a, 1.0 / 2.2);	1✔
116	color.a *= heatmap.opacity;	1✔
117		1✔
118	return color;	1✔
119	}	1✔
120	`;	1✔
121		1✔
122	const defaultColorRange: Color[] = [	1✔
123	[255, 255, 178],	1✔
124	[254, 217, 118],	1✔
125	[254, 178, 76],	1✔
126	[253, 141, 60],	1✔
127	[240, 59, 32],	1✔
128	[189, 0, 38]	1✔
129	];	1✔
130		1✔
131	export type HeatmapProps = {	1✔
132	/**	1✔
133	* Radius of the heatmap blur in pixels, to which the weight of a cell is distributed.	1✔
134	*	1✔
135	* @default 20	1✔
136	*/	1✔
137	radiusPixels?: number;	1✔
138	/**	1✔
139	* Controls how weight values are mapped to the `colorRange`, as an array of two numbers [`minValue`, `maxValue`].	1✔
140	*	1✔
141	* @default [0, 1]	1✔
142	*/	1✔
143	colorDomain?: [number, number];	1✔
144	/**	1✔
145	* Specified as an array of colors [color1, color2, ...].	1✔
146	*	1✔
147	* @default `6-class YlOrRd` - [colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6)	1✔
148	*/	1✔
149	colorRange: Color[];	1✔
150	/**	1✔
151	* Value that is multiplied with the total weight at a pixel to obtain the final weight. A value larger than 1 biases the output color towards the higher end of the spectrum, and a value less than 1 biases the output color towards the lower end of the spectrum.	1✔
152	*/	1✔
153	intensity?: number;	1✔
154	opacity: number;	1✔
155	};	1✔
156		1✔
157	export type HeatmapUniforms = {	1✔
158	delta?: [number, number];	1✔
159	radiusPixels?: number;	1✔
160	colorDomain?: [number, number];	1✔
161	color1?: [number, number, number];	1✔
162	color2?: [number, number, number];	1✔
163	color3?: [number, number, number];	1✔
164	color4?: [number, number, number];	1✔
165	color5?: [number, number, number];	1✔
166	color6?: [number, number, number];	1✔
167	intensity: number;	1✔
168	opacity?: number;	1✔
169	};	1✔
170		1✔
171	export const heatmap: ShaderPass<HeatmapProps, HeatmapUniforms> = {	1✔
172	name: 'heatmap',	1✔
173	uniformPropTypes: {	1✔
174	delta: {value: [0, 1]},	1✔
175	radiusPixels: {value: 20, min: 0, softMax: 100},	1✔
176	colorDomain: {value: [0, 1]},	1✔
177	color1: {value: [0, 0, 0]},	1✔
178	color2: {value: [0, 0, 0]},	1✔
179	color3: {value: [0, 0, 0]},	1✔
180	color4: {value: [0, 0, 0]},	1✔
181	color5: {value: [0, 0, 0]},	1✔
182	color6: {value: [0, 0, 0]},	1✔
183	intensity: {value: 1, min: 0.1, max: 10},	1✔
184	opacity: {value: 1, min: 0, max: 1}	1✔
185	},	1✔
186	uniformTypes: {	1✔
187	delta: 'vec2<f32>',	1✔
188	radiusPixels: 'f32',	1✔
189	colorDomain: 'vec2<f32>',	1✔
190	color1: 'vec3<f32>',	1✔
191	color2: 'vec3<f32>',	1✔
192	color3: 'vec3<f32>',	1✔
193	color4: 'vec3<f32>',	1✔
194	color5: 'vec3<f32>',	1✔
195	color6: 'vec3<f32>',	1✔
196	intensity: 'f32',	1✔
197	opacity: 'f32'	1✔
198	},	1✔
199	getUniforms: opts => {	1✔
200	const {	×
201	delta = [1, 0],	×
202	colorRange = defaultColorRange,	×
203	radiusPixels = 20,	×
204	colorDomain = [0, 1],	×
NEW 205	intensity = 1,	×
206	opacity = 1	×
207	} = opts as HeatmapProps & {delta: [number, number]};	×
208	const [color1, color2, color3, color4, color5, color6] = colorRange;	×
209	return {	×
210	delta,	×
211	color1,	×
212	color2,	×
213	color3,	×
214	color4,	×
215	color5,	×
216	color6,	×
217	radiusPixels,	×
218	colorDomain,	×
NEW UNCOV 219	intensity,	×
UNCOV 220	opacity	×
UNCOV 221	};	×
UNCOV 222	},	×
223	fs,	1✔
224	passes: [	1✔
225	{sampler: true, uniforms: {delta: [1, 0]}},	1✔
226	{sampler: true, uniforms: {delta: [0, 1]}}	1✔
227	]	1✔
228	};	1✔

visgl / deck.gl / 9466850093

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous