visgl / visgl/deck.gl

[Feat] Add autoHighlightBlending prop to Layer

Open
#9,291 6 comments 0 reactions 1 assignee View on GitHub

@felixpalmer is already working on this.

Since Dec 11, 2024.

feature
Dominant language
TypeScript
Stars
14.6k
Forks
2.3k
Avg merge
2d 9h
Merged PRs (30d)
42

Description

Target Use Case

Currently the picking module always blends the alpha of autohighlightColor with the alpha of the fragment. Layers with partial transparency thus end up with an ugly aliased outline, in particular this is obvious with IconLayer (but also ScatterplotLayer)

https://github.com/user-attachments/assets/ec01155c-de89-492c-a0b8-ea09f96a0b6c

Proposal

The luma picking module is enhanced with a new prop, blendHighlightAlpha. It defaults to 'normal' to maintain existing behavior, but when it is 'src' the fragment color is blended as before, but the alpha is unchanged.

The Layer class adds a new prop, autoHighlightBlending (also defaulting to 'normal'), with select layers (like IconLayer) changing the default to 'src'.

Why add a new prop?

The highlightColor prop supports both RGB & RGBA colors, so in theory we could only apply 'normal' blending when an RGBA highlightColor is used, and use 'src' with RGB.

However there is value in allowing the user to explicitly use the autoHighlightBlending prop to support different behaviors:

highlightColor autoHighlightBlending behavior
[255, 0, 0, 255] 'normal' Replace all pixels with red (current behavior)
[255, 0, 0, 255] 'src' Tint all pixels red, while preserving transparency
[255, 255, 255, 128] 'src' Lighten all pixels, while preserving transparency
[0, 0, 0, 128] 'src' Darken all pixels, while preserving transparency

The prop is defined as a string constant in order to allow future expansion, for example 'multiply' could compute the output alpha as color.a * picking.highlightColor.a to allow for fading (not sure if this is useful).

Tint all pixels, while preserving transparency

https://github.com/user-attachments/assets/98cfb6ea-cf5c-4f33-9eee-ca3163e9a5f0

Lighten all pixels, while preserving transparency

https://github.com/user-attachments/assets/58ea0aa1-913d-4d94-b528-2c3478b8a0ad

Darken all pixels, while preserving transparency

https://github.com/user-attachments/assets/1728ee86-9102-4859-a2bf-c7421985ccf9

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.