Design Proposal: `fill-pattern-background-color` for SDF fill patterns
# Design Proposal: `fill-pattern-background-color` for SDF fill patterns
## Motivation
MapLibre supports SDF rendering for symbol icons (sdf: true on addImage()), which allows for runtime recoloring and less overhead (don't have to server-color and load a different symbol image for every color). Fill patterns don't have this even though they are also styled by images and theoretically could be styled by SDF images. Trying to style by an sdf image just draws the raw distance field.
Adding SDF support for fill patterns would enable runtime recoloring without regenerating assets, and data-driven per-feature pattern colors.
## Proposed Change
Add `fill-pattern-background-color` to fill layers. When a fill pattern image has `sdf: true`:
- fill-color is used for the foreground color (inside the pattern shape)
- fill-pattern-background-color is used for the background color (outside the pattern shape)
The shader reads the distance from the alpha channel, applies smoothstep() at the standard SDF threshold (192/256), and mixes between the two colors.
Example layer:
```
{
"id": "hatched-zones",
"type": "fill",
"source": "zones",
"paint": {
"fill-pattern": "sdf-crosshatch",
"fill-color": ["get", "zone_color"],
"fill-pattern-background-color": "rgba(0, 0, 0, 0)"
}
}
```
## API Modifications
- New: `fill-pattern-background-color` (color, default transparent, data-driven, requires fill-pattern)
- Modified: `fill-color` removes its `requires: [{"!": "fill-pattern"}]` constraint since SDF patterns use it as foreground
## Migration Plan and Compatibility
This change is backwards compatible. Non-SDF fill patterns would be unaffected - the SDF path only activates in maplibre when the image has `sdf: true`. `fill-color` that is provided when the `fill-pattern` is used for a non sdf image (which previously would have thrown a style validation error), will no longer throw a style validation error, but will just ignore `fill-color` value.
If your proposal replaces existing functionality, write a migration plan how users can get to the new functionality.
## Rejected Alternatives
- Separate `fill-pattern-foreground-color`: Feels unnecessary, when `fill-color` already exists and can be repurposed pretty easily.
- Non data-driven styling using uniforms. This wouldn't be enough configurability to be useful.
2 条评论