fix(layers): disable depth writes for TextBackgroundLayer to fix transparency#9982
Closed
chrisgervang wants to merge 4 commits intomasterfrom
Closed
fix(layers): disable depth writes for TextBackgroundLayer to fix transparency#9982chrisgervang wants to merge 4 commits intomasterfrom
chrisgervang wants to merge 4 commits intomasterfrom
Conversation
…sparency Semi-transparent backgrounds in TextLayer were completely hiding text behind them instead of allowing proper color blending. This was caused by the TextBackgroundLayer writing to the depth buffer, which blocked subsequent rendering of content behind it. The fix disables depth writes (depthWriteEnabled: false) for the TextBackgroundLayer, allowing semi-transparent backgrounds to properly blend with content behind them while maintaining correct rendering order through depth testing. Fixes #9915 https://claude.ai/code/session_01W4vfTVgCXiCGwkb5beB4Sc
…ndering
Add an opt-in `backgroundDepthTest` prop to TextLayer that enables two-pass
rendering for backgrounds. When enabled:
- Pass 1: Writes to depth buffer only (colorMask: 0)
- Pass 2: Writes color with blending (depthWriteEnabled: false)
This provides correct depth-based occlusion for overlapping text labels
while maintaining proper transparency blending, at the cost of doubled
draw calls for the background layer.
Default behavior remains unchanged (single-pass with depth writes disabled)
for optimal performance in the common use case.
Usage:
```js
new TextLayer({
background: true,
backgroundDepthTest: true, // opt-in to two-pass rendering
getBackgroundColor: [255, 255, 0, 128],
...
})
```
https://claude.ai/code/session_01W4vfTVgCXiCGwkb5beB4Sc
Add two-pass rendering support for correct transparency with depth testing to IconLayer and SolidPolygonLayer, using the same pattern as TextBackgroundLayer. Changes: - Rename backgroundDepthTest to backgroundDepthPrepass in TextLayer for clarity - Rename depthTest to depthPrepass in TextBackgroundLayer - Add depthPrepass prop to IconLayer (fixes #7966, #7297) - Add depthPrepass prop to SolidPolygonLayer (for transparent extruded buildings) - Set depthWriteEnabled: false by default for all affected layers to fix basic transparency blending When depthPrepass is enabled, layers use two-pass rendering: - Pass 1: Write depth only (colorMask: 0) - Pass 2: Write color with blending (depthWriteEnabled: false) This fixes issues where semi-transparent objects incorrectly occlude content behind them due to draw order not matching depth order. Usage: ```js new IconLayer({ getColor: [255, 0, 0, 128], depthPrepass: true }) new SolidPolygonLayer({ getFillColor: [255, 0, 0, 128], extruded: true, depthPrepass: true }) ``` https://claude.ai/code/session_01W4vfTVgCXiCGwkb5beB4Sc
chrisgervang
commented
Feb 3, 2026
Comment on lines
-292
to
+333
| const parameters = | ||
| this.context.device.type === 'webgpu' | ||
| ? ({ | ||
| depthWriteEnabled: true, | ||
| depthCompare: 'less-equal' | ||
| } satisfies Parameters) | ||
| : undefined; | ||
| // Disable depth writes so that semi-transparent icons don't hide content behind them. | ||
| // This allows proper color blending when icons overlap. | ||
| const parameters: Parameters = { | ||
| depthWriteEnabled: false, | ||
| depthCompare: 'less-equal' | ||
| }; |
Collaborator
Author
There was a problem hiding this comment.
Test WebGPU and WebGL on this one
Collaborator
Author
|
This approach doesn't work, so closing for now. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Semi-transparent backgrounds in TextLayer were completely hiding text
behind them instead of allowing proper color blending. This was caused
by the TextBackgroundLayer writing to the depth buffer, which blocked
subsequent rendering of content behind it.
The fix disables depth writes (depthWriteEnabled: false) for the
TextBackgroundLayer, allowing semi-transparent backgrounds to properly
blend with content behind them while maintaining correct rendering
order through depth testing.
Fixes #9915
https://claude.ai/code/session_01W4vfTVgCXiCGwkb5beB4Sc
Note
Medium Risk
Changes default GPU depth-write state for multiple core layers and introduces conditional two-pass rendering, which may subtly change visual ordering and impact performance in existing scenes.
Overview
Fixes transparency-related occlusion issues by disabling depth writes by default for
IconLayer,SolidPolygonLayer(filled top/side), andTextBackgroundLayer, allowing semi-transparent geometry to blend instead of fully blocking content behind it.Adds an opt-in
depthPrepass(andTextLayer’sbackgroundDepthPrepass) that performs two-pass rendering (depth-only then color) to preserve correct depth testing when needed, at the cost of extra draw calls.Written by Cursor Bugbot for commit 04ebd9d. This will update automatically on new commits. Configure here.