9480237248

Committed 12 Jun 2024 09:34AM UTC coverage: 89.564% (-0.1%) from 89.672%

Build # 9480237248

Build Type

Pull #8944

github

Committed by

web-flow

Commit Message

Merge f729716b1 into 93518480a

Pull Request Pull Request #8944: CARTO HeatmapTileLayer implement autoscaling

Run Details

6353 of 6990 branches covered (90.89%)

Branch coverage included in aggregate %.

108 of 270 new or added lines in 3 files covered. (40.0%)

23 existing lines in 1 file now uncovered.

52480 of 58698 relevant lines covered (89.41%)

6564.12 hits per line

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

89.82

/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 {
    range = vec2(STOPS.w, 1.0);
    c1 = heatmap.color5; c2 = heatmap.color6;
  }

  float f = (clamp(value, 0.0, 1.0) - 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 {	1✔
46	range = vec2(STOPS.w, 1.0);	1✔
47	c1 = heatmap.color5; c2 = heatmap.color6;	1✔
48	}	1✔
49		1✔
50	float f = (clamp(value, 0.0, 1.0) - range.x) / (range.y - range.x);	1✔
51	return mix(c1, c2, f) / 255.0;	1✔
52	}	1✔
53		1✔
54	const vec3 SHIFT = vec3(1.0, 256.0, 256.0 * 256.0);	1✔
55	const float MAX_VAL = SHIFT.z * 255.0;	1✔
56	const float SCALE = MAX_VAL / 8.0;	1✔
57	vec4 pack(float value) {	1✔
58	return vec4(mod(vec3(value, floor(value / SHIFT.yz)), 256.0), 255.0) / 255.0;	1✔
59	}	1✔
60	float unpack(vec3 color) {	1✔
61	return 255.0 * dot(color, SHIFT);	1✔
62	}	1✔
63		1✔
64	vec4 heatmap_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {	1✔
65	bool firstPass = (heatmap.delta.y < 0.5);	1✔
66	float accumulator = 0.0;	1✔
67		1✔
68	// Controls quality of heatmap, larger values increase quality at expense of performance	1✔
69	float SUPPORT = clamp(heatmap.radiusPixels / 2.0, 8.0, 32.0);	1✔
70		1✔
71	// Gaussian normalization parameters	1✔
72	float sigma = SUPPORT / 3.0;	1✔
73	float a = -0.5 / (sigma * sigma);	1✔
74	float w0 = 0.3989422804014327 / sigma; // 1D normalization	1✔
75	for (float t = -SUPPORT; t <= SUPPORT; t++) {	1✔
76	vec2 percent = (t * heatmap.delta - 0.5) / SUPPORT;	1✔
77	vec2 delta = percent * heatmap.radiusPixels / texSize;	1✔
78	vec4 offsetColor = texture(source, texCoord + delta);	1✔
79		1✔
80	// Unpack float	1✔
81	float value = unpack(offsetColor.rgb);	1✔
82		1✔
83	// Gaussian	1✔
84	float weight = w0 * exp(a * t * t);	1✔
85		1✔
86	accumulator += value * weight;	1✔
87	}	1✔
88		1✔
89	if (firstPass) {	1✔
90	return pack(accumulator);	1✔
91	}	1✔
92		1✔
93	// Undo scaling to obtain normalized density	1✔
94	float density = 10.0 * heatmap.intensity * accumulator / SCALE;	1✔
95		1✔
96	// Domain also in normalized density units	1✔
97	vec2 domain = heatmap.colorDomain;	1✔
98		1✔
99	// Apply domain	1✔
100	float f = (density - domain[0]) / (domain[1] - domain[0]);	1✔
101		1✔
102	// sqrt/log scaling??	1✔
103	// float f = (log(density) - log(domain[0] + 1.0)) / (log(domain[1] + 1.0) - log(domain[0] + 1.0));	1✔
104	// f = sqrt(f);	1✔
105		1✔
106	// Color map	1✔
107	vec4 color = vec4(0.0);	1✔
108	color.rgb = colorGradient(f);	1✔
109		1✔
110	color.a = smoothstep(0.0, 0.1, f);	1✔
111	color.a = pow(color.a, 1.0 / 2.2);	1✔
112	color.a *= heatmap.opacity;	1✔
113		1✔
114	return color;	1✔
115	}	1✔
116	`;	1✔
117		1✔
118	const defaultColorRange: Color[] = [	1✔
119	[255, 255, 178],	1✔
120	[254, 217, 118],	1✔
121	[254, 178, 76],	1✔
122	[253, 141, 60],	1✔
123	[240, 59, 32],	1✔
124	[189, 0, 38]	1✔
125	];	1✔
126		1✔
127	export type HeatmapProps = {	1✔
128	/**	1✔
129	* Radius of the heatmap blur in pixels, to which the weight of a cell is distributed.	1✔
130	*	1✔
131	* @default 20	1✔
132	*/	1✔
133	radiusPixels?: number;	1✔
134	/**	1✔
135	* Controls how weight values are mapped to the `colorRange`, as an array of two numbers [`minValue`, `maxValue`].	1✔
136	*	1✔
137	* @default [0, 1]	1✔
138	*/	1✔
139	colorDomain?: [number, number];	1✔
140	/**	1✔
141	* Specified as an array of colors [color1, color2, ...].	1✔
142	*	1✔
143	* @default `6-class YlOrRd` - [colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6)	1✔
144	*/	1✔
145	colorRange: Color[];	1✔
146	/**	1✔
147	* 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✔
148	*/	1✔
149	intensity?: number;	1✔
150	opacity: number;	1✔
151	};	1✔
152		1✔
153	export type HeatmapUniforms = {	1✔
154	delta?: [number, number];	1✔
155	radiusPixels?: number;	1✔
156	colorDomain?: [number, number];	1✔
157	color1?: [number, number, number];	1✔
158	color2?: [number, number, number];	1✔
159	color3?: [number, number, number];	1✔
160	color4?: [number, number, number];	1✔
161	color5?: [number, number, number];	1✔
162	color6?: [number, number, number];	1✔
163	intensity: number;	1✔
164	opacity?: number;	1✔
165	};	1✔
166		1✔
167	export const heatmap: ShaderPass<HeatmapProps, HeatmapUniforms> = {	1✔
168	name: 'heatmap',	1✔
169	uniformPropTypes: {	1✔
170	delta: {value: [0, 1]},	1✔
171	radiusPixels: {value: 20, min: 0, softMax: 100},	1✔
172	colorDomain: {value: [0, 1]},	1✔
173	color1: {value: [0, 0, 0]},	1✔
174	color2: {value: [0, 0, 0]},	1✔
175	color3: {value: [0, 0, 0]},	1✔
176	color4: {value: [0, 0, 0]},	1✔
177	color5: {value: [0, 0, 0]},	1✔
178	color6: {value: [0, 0, 0]},	1✔
179	intensity: {value: 1, min: 0.1, max: 10},	1✔
180	opacity: {value: 1, min: 0, max: 1}	1✔
181	},	1✔
182	uniformTypes: {	1✔
183	delta: 'vec2<f32>',	1✔
184	radiusPixels: 'f32',	1✔
185	colorDomain: 'vec2<f32>',	1✔
186	color1: 'vec3<f32>',	1✔
187	color2: 'vec3<f32>',	1✔
188	color3: 'vec3<f32>',	1✔
189	color4: 'vec3<f32>',	1✔
190	color5: 'vec3<f32>',	1✔
191	color6: 'vec3<f32>',	1✔
192	intensity: 'f32',	1✔
193	opacity: 'f32'	1✔
194	},	1✔
195	getUniforms: opts => {	1✔
196	const {	×
197	delta = [1, 0],	×
198	colorRange = defaultColorRange,	×
199	radiusPixels = 20,	×
200	colorDomain = [0, 1],	×
NEW 201	intensity = 1,	×
202	opacity = 1	×
203	} = opts as HeatmapProps & {delta: [number, number]};	×
204	const [color1, color2, color3, color4, color5, color6] = colorRange;	×
205	return {	×
206	delta,	×
207	color1,	×
208	color2,	×
209	color3,	×
210	color4,	×
211	color5,	×
212	color6,	×
213	radiusPixels,	×
214	colorDomain,	×
NEW 215	intensity,	×
216	opacity	×
217	};	×
218	},	×
219	fs,	1✔
220	passes: [	1✔
221	{sampler: true, uniforms: {delta: [1, 0]}},	1✔
222	{sampler: true, uniforms: {delta: [0, 1]}}	1✔
223	]	1✔
224	};	1✔

visgl / deck.gl / 9480237248

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