CODEWITHSUNDEEP
2dwebgltransparencyalphablending
Sebastian Frederick
Sebastian Frederick

Reputation: 147

Why are the transparent pixels not blending correctly in WebGL

Result of my code: Weird

Basically, what the issue is, the transparent part of my image are not blending correctly with what is drawn before it. I know I can do a 

if(alpha<=0){discard;}

in the fragment shader, the only issue is I plan on having a ton of fragments and don't want the if statement for each fragment on mobile devices.

Here is my code related to alpha, and depth testing:

var gl = canvas.getContext("webgl2",
{
    antialias : false,
    alpha : false,
    premultipliedAlpha: false,
}
);

gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.GREATER);

Also, these are textured gl.POINTS I am drawing. If I change the order the two images are drawn in the buffer, the problem doesn't exist. They will be dynamically rotating during the program's runtime so this is not an option.

Upvotes: 4

Views: 814

Answers (1)

user128511
user128511

Reputation:

It's not clear what your issue is without more code but it looks like a depth test issue.

enter image description here

Assuming I understand correctly you're drawing 2 rectangles? If you draw the red one before the blue one then depending on how you have the depth test setup the blue one will fail the depth test when the X area is drawn.

You generally solve this by sorting what you draw, making sure to draw things further away first.

For a grid of "tiles" you can generally sort by walking the grid itself in the correct direction instead of "sorting"

On the other hand, if all of your transparency is 100% draw or not draw then discard has its advantages and you can draw front to back. The reason is because in that case drawing front to back, the pixel drawn (not discarded) by the red quad will be rejected when drawing the blue quad by the depth test. The depth test is usually optimized to happen before running the fragment shader for a certain pixel. If the depth test says the pixel will not be drawn then no reason to even run the fragment shader for that pixel, time saved. Unfortunately as soon as you have any transparency that is not 100% opaque or 100% transparent then you need to sort and draw back to front. Some of these issues are covered in this article

A few notes:

  1. you mentioned mobile devices and you mentioned WebGL2 in your code sample. There is no WebGL2 on iOS

  2. you said you're drawing with POINTS. The spec says only POINTS of 1 pixel in size are required. It looks like you're safe up to points of size 60 but to be safe it's generally best to draw with triangles as there are other isses with points

  3. you might also be interested in sprites with depth

Upvotes: 4

Related Questions