tei/MapLibreParticleLab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply symbol shader changes from JS for Metal, Vulkan, and OpenGL (#3873)

Browse Source
This commit is contained in:
Tim Sylvester
2025-10-15 13:14:06 -07:00
committed by GitHub
parent 54565f081b
commit 18e51caa22
13 changed files with 273 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
include/mbgl/shaders/gl/symbol_sdf.hpp
View File

@@ -279,16 +279,22 @@ lowp float halo_blur = u_halo_blur;
lowp vec4 color = fill_color;
highp float gamma = EDGE_GAMMA / (fontScale * u_gamma_scale);
lowp float buff = (256.0 - 64.0) / 256.0;
lowp float inner_edge = (256.0 - 64.0) / 256.0;
if (u_is_halo) {
color = halo_color;
gamma = (halo_blur * 1.19 / SDF_PX + EDGE_GAMMA) / (fontScale * u_gamma_scale);
buff = (6.0 - halo_width / fontScale) / SDF_PX;
inner_edge = inner_edge + gamma * gamma_scale;
}
lowp float dist = texture(u_texture, tex).a;
highp float gamma_scaled = gamma * gamma_scale;
highp float alpha = smoothstep(buff - gamma_scaled, buff + gamma_scaled, dist);
highp float alpha = smoothstep(inner_edge - gamma_scaled, inner_edge + gamma_scaled, dist);
if (u_is_halo) {
// When drawing halos, we want the inside of the halo to be transparent as well
// in case the text fill is transparent.
lowp float halo_edge = (6.0 - halo_width / fontScale) / SDF_PX;
alpha = min(smoothstep(halo_edge - gamma_scaled, halo_edge + gamma_scaled, dist), 1.0 - alpha);
}
fragColor = color * (alpha * opacity * fade_opacity);

12
include/mbgl/shaders/gl/symbol_text_and_icon.hpp
View File

@@ -296,16 +296,22 @@ lowp float halo_blur = u_halo_blur;
lowp vec4 color = fill_color;
highp float gamma = EDGE_GAMMA / (fontScale * u_gamma_scale);
lowp float buff = (256.0 - 64.0) / 256.0;
lowp float inner_edge = (256.0 - 64.0) / 256.0;
if (u_is_halo) {
color = halo_color;
gamma = (halo_blur * 1.19 / SDF_PX + EDGE_GAMMA) / (fontScale * u_gamma_scale);
buff = (6.0 - halo_width / fontScale) / SDF_PX;
inner_edge = inner_edge + gamma * gamma_scale;
}
lowp float dist = texture(u_texture, tex).a;
highp float gamma_scaled = gamma * gamma_scale;
highp float alpha = smoothstep(buff - gamma_scaled, buff + gamma_scaled, dist);
highp float alpha = smoothstep(inner_edge - gamma_scaled, inner_edge + gamma_scaled, dist);
if (u_is_halo) {
// When drawing halos, we want the inside of the halo to be transparent as well
// in case the text fill is transparent.
lowp float halo_edge = (6.0 - halo_width / fontScale) / SDF_PX;
alpha = min(smoothstep(halo_edge - gamma_scaled, halo_edge + gamma_scaled, dist), 1.0 - alpha);
}
fragColor = color * (alpha * opacity * fade_opacity);

38
include/mbgl/shaders/mtl/symbol.hpp
View File

@@ -437,12 +437,22 @@ half4 fragment fragmentMain(FragmentStage in [[stage_in]],
const float EDGE_GAMMA = 0.105 / DEVICE_PIXEL_RATIO;
const float fontGamma = in.fontScale * tileProps.gamma_scale;
const float fillGamma = EDGE_GAMMA / fontGamma;
const float haloGamma = (halo_blur * 1.19 / SDF_PX + EDGE_GAMMA) / fontGamma;
const float gamma = tileProps.is_halo ? haloGamma : fillGamma;
const float gammaScaled = gamma * in.gamma_scale;
const half4 color = tileProps.is_halo ? halo_color : fill_color;
const float gamma = ((tileProps.is_halo ? (halo_blur * 1.19 / SDF_PX) : 0) + EDGE_GAMMA) / fontGamma;
const float buff = tileProps.is_halo ? (6.0 - halo_width / in.fontScale) / SDF_PX : (256.0 - 64.0) / 256.0;
const float fillInnerEdge = (256.0 - 64.0) / 256.0;
const float haloInnerEdge = fillInnerEdge + haloGamma * tileProps.gamma_scale;
const float innerEdge = tileProps.is_halo ? haloInnerEdge : fillInnerEdge;
const float dist = image.sample(image_sampler, float2(in.tex)).a;
const float gamma_scaled = gamma * in.gamma_scale;
const float alpha = smoothstep(buff - gamma_scaled, buff + gamma_scaled, dist);
float alpha = smoothstep(innerEdge - gammaScaled, innerEdge + gammaScaled, dist);
if (tileProps.is_halo) {
// When drawing halos, if the fill is translucent we want the inside of the halo to be translucent as well
const float haloEdge = (6.0 - halo_width / in.fontScale) / SDF_PX;
alpha = min(smoothstep(haloEdge - gammaScaled, haloEdge + gammaScaled, dist), 1.0 - alpha);
}
return half4(color * (alpha * opacity * in.fade_opacity));
}
@@ -673,13 +683,23 @@ half4 fragment fragmentMain(FragmentStage in [[stage_in]],
}
const float EDGE_GAMMA = 0.105 / DEVICE_PIXEL_RATIO;
const half4 color = tileProps.is_halo ? halo_color : fill_color;
const float fontGamma = in.fontScale * tileProps.gamma_scale;
const float gamma = ((tileProps.is_halo ? (halo_blur * 1.19 / SDF_PX) : 0) + EDGE_GAMMA) / fontGamma;
const float buff = tileProps.is_halo ? (6.0 - halo_width / in.fontScale) / SDF_PX : (256.0 - 64.0) / 256.0;
const float fillGamma = EDGE_GAMMA / fontGamma;
const float haloGamma = (halo_blur * 1.19 / SDF_PX + EDGE_GAMMA) / fontGamma;
const float gamma = tileProps.is_halo ? haloGamma : fillGamma;
const float gammaScaled = gamma * in.gamma_scale;
const half4 color = tileProps.is_halo ? halo_color : fill_color;
const float fillInnerEdge = (256.0 - 64.0) / 256.0;
const float haloInnerEdge = fillInnerEdge + haloGamma * tileProps.gamma_scale;
const float innerEdge = tileProps.is_halo ? haloInnerEdge : fillInnerEdge;
const float dist = glyph_image.sample(glyph_sampler, float2(in.tex)).a;
const float gamma_scaled = gamma * in.gamma_scale;
const float alpha = smoothstep(buff - gamma_scaled, buff + gamma_scaled, dist);
float alpha = smoothstep(innerEdge - gammaScaled, innerEdge + gammaScaled, dist);
if (tileProps.is_halo) {
// When drawing halos, if the fill is translucent we want the inside of the halo to be translucent as well
const float haloEdge = (6.0 - halo_width / in.fontScale) / SDF_PX;
alpha = min(smoothstep(haloEdge - gammaScaled, haloEdge + gammaScaled, dist), 1.0 - alpha);
}
return half4(color * (alpha * opacity * in.fade_opacity));
}

36
include/mbgl/shaders/vulkan/symbol.hpp
View File

@@ -485,12 +485,22 @@ void main() {
const float EDGE_GAMMA = 0.105 / DEVICE_PIXEL_RATIO;
const float fontGamma = frag_font_scale * tileProps.gamma_scale;
const float fillGamma = EDGE_GAMMA / fontGamma;
const float haloGamma = (halo_blur * 1.19 / SDF_PX + EDGE_GAMMA) / fontGamma;
const float gamma = tileProps.is_halo ? haloGamma : fillGamma;
const float gammaScaled = gamma * frag_gamma_scale;
const vec4 color = tileProps.is_halo ? halo_color : fill_color;
const float gamma = ((tileProps.is_halo ? (halo_blur * 1.19 / SDF_PX) : 0) + EDGE_GAMMA) / fontGamma;
const float buff = tileProps.is_halo ? (6.0 - halo_width / frag_font_scale) / SDF_PX : (256.0 - 64.0) / 256.0;
const float fillInnerEdge = (256.0 - 64.0) / 256.0;
const float haloInnerEdge = fillInnerEdge + haloGamma * frag_gamma_scale;
const float innerEdge = tileProps.is_halo ? haloInnerEdge : fillInnerEdge;
const float dist = texture(image0_sampler, frag_tex).a;
const float gamma_scaled = gamma * frag_gamma_scale;
const float alpha = smoothstep(buff - gamma_scaled, buff + gamma_scaled, dist);
float alpha = smoothstep(innerEdge - gammaScaled, innerEdge + gammaScaled, dist);
if (tileProps.is_halo) {
// When drawing halos, if the fill is translucent we want
// the inside of the halo to be translucent as well
const float haloEdge = (6.0 - halo_width / frag_font_scale) / SDF_PX;
alpha = min(smoothstep(haloEdge - gammaScaled, haloEdge + gammaScaled, dist), 1.0 - alpha);
}
out_color = color * (alpha * opacity * frag_fade_opacity);
}
@@ -795,12 +805,22 @@ void main() {
const float EDGE_GAMMA = 0.105 / DEVICE_PIXEL_RATIO;
const float fontGamma = frag_font_scale * tileProps.gamma_scale;
const float fillGamma = EDGE_GAMMA / fontGamma;
const float haloGamma = (halo_blur * 1.19 / SDF_PX + EDGE_GAMMA) / fontGamma;
const float gamma = tileProps.is_halo ? haloGamma : fillGamma;
const float gammaScaled = gamma * frag_gamma_scale;
const vec4 color = tileProps.is_halo ? halo_color : fill_color;
const float gamma = ((tileProps.is_halo ? (halo_blur * 1.19 / SDF_PX) : 0) + EDGE_GAMMA) / fontGamma;
const float buff = tileProps.is_halo ? (6.0 - halo_width / frag_font_scale) / SDF_PX : (256.0 - 64.0) / 256.0;
const float fillInnerEdge = (256.0 - 64.0) / 256.0;
const float haloInnerEdge = fillInnerEdge + haloGamma * frag_gamma_scale;
const float innerEdge = tileProps.is_halo ? haloInnerEdge : fillInnerEdge;
const float dist = texture(glyph_image, frag_tex).a;
const float gamma_scaled = gamma * frag_gamma_scale;
const float alpha = smoothstep(buff - gamma_scaled, buff + gamma_scaled, dist);
float alpha = smoothstep(innerEdge - gammaScaled, innerEdge + gammaScaled, dist);
if (tileProps.is_halo) {
// When drawing halos, if the fill is translucent we want
// the inside of the halo to be translucent as well
const float haloEdge = (6.0 - halo_width / frag_font_scale) / SDF_PX;
alpha = min(smoothstep(haloEdge - gammaScaled, haloEdge + gammaScaled, dist), 1.0 - alpha);
}
out_color = color * (alpha * opacity * frag_fade_opacity);
}

BIN
metrics/integration/render-tests/icon-halo-color/opacity/expected.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 515 B

After

Width:  |  Height:  |  Size: 630 B

BIN
metrics/integration/render-tests/text-color/translucent-icon/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

61
metrics/integration/render-tests/text-color/translucent-icon/style.json Normal file
View File

@@ -0,0 +1,61 @@
{
"version": 8,
"metadata": {
"test": {
"height": 256
}
},
"center": [
13.418056,
52.499167
],
"zoom": 14,
"sources": {
"mapbox": {
"type": "vector",
"maxzoom": 14,
"tiles": [
"local://tiles/{z}-{x}-{y}.mvt"
]
}
},
"glyphs": "local://glyphs/{fontstack}/{range}.pbf",
"sprite": "local://sprites/emerald@2x",
"layers": [
{
"id": "background",
"type": "background",
"paint": {
"background-color": "white"
}
},
{
"id": "text",
"type": "symbol",
"source": "mapbox",
"source-layer": "poi_label",
"filter": [
"==",
"maki",
"restaurant"
],
"layout": {
"symbol-placement": "point",
"text-allow-overlap": true,
"text-ignore-placement": true,
"text-field": ["format", "Test", ["image", "rer"]],
"text-size": 32,
"text-font": [
"Open Sans Semibold",
"Arial Unicode MS Bold"
]
},
"paint": {
"text-color": "blue",
"text-halo-color": "yellow",
"text-halo-width": 2,
"text-opacity": 0.5
}
}
]
}

BIN
metrics/integration/render-tests/text-color/translucent/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

60
metrics/integration/render-tests/text-color/translucent/style.json Normal file
View File

@@ -0,0 +1,60 @@
{
"version": 8,
"metadata": {
"test": {
"height": 256
}
},
"center": [
13.418056,
52.499167
],
"zoom": 14,
"sources": {
"mapbox": {
"type": "vector",
"maxzoom": 14,
"tiles": [
"local://tiles/{z}-{x}-{y}.mvt"
]
}
},
"glyphs": "local://glyphs/{fontstack}/{range}.pbf",
"layers": [
{
"id": "background",
"type": "background",
"paint": {
"background-color": "white"
}
},
{
"id": "text",
"type": "symbol",
"source": "mapbox",
"source-layer": "poi_label",
"filter": [
"==",
"maki",
"restaurant"
],
"layout": {
"symbol-placement": "point",
"text-allow-overlap": true,
"text-ignore-placement": true,
"text-field": "Test",
"text-size": 32,
"text-font": [
"Open Sans Semibold",
"Arial Unicode MS Bold"
]
},
"paint": {
"text-color": "blue",
"text-halo-color": "yellow",
"text-halo-width": 2,
"text-opacity": 0.5
}
}
]
}

BIN
metrics/integration/render-tests/text-color/transparent/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

59
metrics/integration/render-tests/text-color/transparent/style.json Normal file
View File

@@ -0,0 +1,59 @@
{
"version": 8,
"metadata": {
"test": {
"height": 256
}
},
"center": [
13.418056,
52.499167
],
"zoom": 14,
"sources": {
"mapbox": {
"type": "vector",
"maxzoom": 14,
"tiles": [
"local://tiles/{z}-{x}-{y}.mvt"
]
}
},
"glyphs": "local://glyphs/{fontstack}/{range}.pbf",
"layers": [
{
"id": "background",
"type": "background",
"paint": {
"background-color": "white"
}
},
{
"id": "text",
"type": "symbol",
"source": "mapbox",
"source-layer": "poi_label",
"filter": [
"==",
"maki",
"restaurant"
],
"layout": {
"symbol-placement": "point",
"text-allow-overlap": true,
"text-ignore-placement": true,
"text-field": "Test",
"text-size": 32,
"text-font": [
"Open Sans Semibold",
"Arial Unicode MS Bold"
]
},
"paint": {
"text-color": "transparent",
"text-halo-color": "black",
"text-halo-width": 1
}
}
]
}

12
shaders/symbol_sdf.fragment.glsl
View File

@@ -57,16 +57,22 @@ void main() {
lowp vec4 color = fill_color;
highp float gamma = EDGE_GAMMA / (fontScale * u_gamma_scale);
lowp float buff = (256.0 - 64.0) / 256.0;
lowp float inner_edge = (256.0 - 64.0) / 256.0;
if (u_is_halo) {
color = halo_color;
gamma = (halo_blur * 1.19 / SDF_PX + EDGE_GAMMA) / (fontScale * u_gamma_scale);
buff = (6.0 - halo_width / fontScale) / SDF_PX;
inner_edge = inner_edge + gamma * gamma_scale;
}
lowp float dist = texture(u_texture, tex).a;
highp float gamma_scaled = gamma * gamma_scale;
highp float alpha = smoothstep(buff - gamma_scaled, buff + gamma_scaled, dist);
highp float alpha = smoothstep(inner_edge - gamma_scaled, inner_edge + gamma_scaled, dist);
if (u_is_halo) {
// When drawing halos, we want the inside of the halo to be transparent as well
// in case the text fill is transparent.
lowp float halo_edge = (6.0 - halo_width / fontScale) / SDF_PX;
alpha = min(smoothstep(halo_edge - gamma_scaled, halo_edge + gamma_scaled, dist), 1.0 - alpha);
}
fragColor = color * (alpha * opacity * fade_opacity);

12
shaders/symbol_text_and_icon.fragment.glsl
View File

@@ -74,16 +74,22 @@ void main() {
lowp vec4 color = fill_color;
highp float gamma = EDGE_GAMMA / (fontScale * u_gamma_scale);
lowp float buff = (256.0 - 64.0) / 256.0;
lowp float inner_edge = (256.0 - 64.0) / 256.0;
if (u_is_halo) {
color = halo_color;
gamma = (halo_blur * 1.19 / SDF_PX + EDGE_GAMMA) / (fontScale * u_gamma_scale);
buff = (6.0 - halo_width / fontScale) / SDF_PX;
inner_edge = inner_edge + gamma * gamma_scale;
}
lowp float dist = texture(u_texture, tex).a;
highp float gamma_scaled = gamma * gamma_scale;
highp float alpha = smoothstep(buff - gamma_scaled, buff + gamma_scaled, dist);
highp float alpha = smoothstep(inner_edge - gamma_scaled, inner_edge + gamma_scaled, dist);
if (u_is_halo) {
// When drawing halos, we want the inside of the halo to be transparent as well
// in case the text fill is transparent.
lowp float halo_edge = (6.0 - halo_width / fontScale) / SDF_PX;
alpha = min(smoothstep(halo_edge - gamma_scaled, halo_edge + gamma_scaled, dist), 1.0 - alpha);
}
fragColor = color * (alpha * opacity * fade_opacity);