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

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

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);

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);

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));
}

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);
}