8724126194

Committed 17 Apr 2024 02:55PM UTC coverage: 89.805% (-0.2%) from 90.002%

Build # 8724126194

Build Type

Pull #8703

github

Committed by

web-flow

Commit Message

Merge 156fd1e84 into fa029ddde

Pull Request Pull Request #8703: CARTO: Implement QuadbinHeatmapTileLayer

Run Details

6305 of 6938 branches covered (90.88%)

Branch coverage included in aggregate %.

340 of 521 new or added lines in 5 files covered. (65.26%)

4 existing lines in 1 file now uncovered.

52043 of 58034 relevant lines covered (89.68%)

6639.96 hits per line

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

90.14

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

import type {ShaderPass} from '@luma.gl/shadertools';
import {random} 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 opacity;
} heatmap;

// Controls quality of heatmap, larger values increase quality at expense of performance
const float SUPPORT = 8.0;
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);
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;

  // Randomize the lookup values to hide the fixed number of samples
  float offset = 0.5 * random(vec3(12.9898, 78.233, 151.7182), 0.0);

  // Gaussian normalization parameters
  const float sigma = SUPPORT / 3.0;
  const float a = -0.5 / (sigma * sigma);
  const float w0 = 0.3989422804014327 / sigma; // 1D normalization

  for (float t = -SUPPORT; t <= SUPPORT; t++) {
    vec2 percent = (t * heatmap.delta + offset - 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);
  }

  // Apply domain
  float f = (accumulator - heatmap.colorDomain[0]) / (heatmap.colorDomain[1] - heatmap.colorDomain[0]);

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

visgl / deck.gl / 8724126194

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