KhronosGroup / KhronosGroup/WebGL

WebGL alpha composition issue causes color-bleeding

Open
#3,152 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
HTML
Stars
2.9k
Forks
703
Avg merge
2d 9h
Merged PRs (30d)
4

Description

I have been having problems with WebGL's alpha compositing in which colors appear to bleed.
In OpenGL 4 I cannot reproduce these same results, so I am not sure what is going on.

I am rendering to a empty texture attached to a framebuffer in my example pictures, the same issue occurs on a black framebuffer with alpha set to 1 (opaque).

What I have been trying to achieve is a gradient, like of a soft brush, where the soft brush is stamped and has very low spacing between said stamps. These soft brush stamps are low opacity and have a 0-1 alpha gradient from centre to edge (radius).

All the stamps are rendered sequentially by WebGL using an attribute array of quads.
The issue also occurs for square stamps, the overall alpha is 0.1 per stamp but the alpha is of course lessened internally of the soft brush which reduces in alpha towards the edges where the most bleeding happens. I have also tried clamping the alpha between 0-1 without difference.

In this operation, I use, with blending enabled and depth-testing disabled:
gl.blendFuncEquation(gl.FUNC_ADD)
gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA)

Which I believe translates to the equation used for Normal blending that is pre-multiplied.
I then later divide the pre-multiplied alpha away, but that has nothing to do with what I am seeing I believe because the pre-multiplied version shows the issue itself.

In the soft brush gradient, edges appear stair-stepped and fluctuate to a cyan before proceeding to mix more properly in lower alpha values, which seems strange and creates problematic halos.

Less spacing between stamps:
![image](https://user-images.githubusercontent.com/25067779/94089803-f6630000-fe0b-11ea-87ed-3cd112f10f12.png)

Moderate spacing:
![image](https://user-images.githubusercontent.com/25067779/94090679-21e6ea00-fe0e-11ea-9bc5-7b89490907b0.png)

Very low spacing:
![image](https://user-images.githubusercontent.com/25067779/94090695-2d3a1580-fe0e-11ea-956a-9a4ca19a02d2.png)

Non-soft brush, when opacity is low, shows colour bleeding, too:
![image](https://user-images.githubusercontent.com/25067779/94090756-53f84c00-fe0e-11ea-9049-43579c6b089f.png)

Contributor guide

Open the contributing guide

Research direction

No repository file, test, or minimal reproduction is identified in the issue. Start by reproducing the framebuffer and empty-texture setup with the stated blend equation and sequential brush-stamp rendering, then compare the premultiplied output at different stamp spacings. Done would require isolating the cause of the cyan bleeding and documenting a confirmed fix or a precise reproduction and diagnosis.

Written by the indexing model from the issue text.

Assessment

Domain
computer-graphics
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.