Blend problems in WebGL using CCRenderTexture and non-black background

Blend problems in WebGL using CCRenderTexture and non-black background
0.0 0


I’ve run into a problem using WebGL that I can’t seem to pinpoint a solution. If I have an image with soft edges (semi-transparent pixels) and then tint it using SetColor(), and if the background (canvas or other element behind RenderTexture) is filled with a non-black color, the sprite when drawn to RenderTexture on top ends up soaking in the background even when it shouldn’t. If I tint it red and use a green background, the translucent pixels eventually morph to yellow. See these pictures for illustration:

Here’s an example of drawing the same circle sprite at 100% opacity across a render texture in front of the default template background image in WebGL.

And here’s how it looks when I simply load in many sprites and draw them to the screen outside of a render texture (this is the desired effect):

Final Edit: Even if I fill the render texture in with a solid color, when I draw to it the background still ends up showing through as shown below:

I assume it’s a blend mode issue but don’t know enough about WebGL to find how to solve. Any thoughts? Here’s the original sprite (but any sprite does this even ones with crisp but anti aliased edges).


Hy, i don’t know if you still have this problem or if you still need a solution.
on webgl i had similar problems with the blend function.

I have changed the setBlendFunc in CCGLStateCache.js to the following
cc.setBlending = function (sfactor, dfactor) {
var ctx = cc._renderContext;
if ((sfactor === ctx.ONE) && (dfactor === ctx.ZERO)) {
} else {
// cc._renderContext.blendFunc(sfactor, dfactor);
cc._renderContext.blendFuncSeparate(sfactor, dfactor, ctx.ONE, dfactor);

I use the blendFuncSeparate and it seems to work well now.