Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Overlay Color Blend in OpenGL ES / iOS / Cocos2d

I'm trying to apply BlendModes to a GreyScale image in order to have reusable static resources

I've been searching in the internet for hours and I did my own tests but I didn't find any solution.

I started with this image:

enter image description here

And the basic idea was to draw a rectangle over it in a certain color and apply a blending mode to the image only where the alpha is 1.0

Here is the Code (this is part of a Cocos2d project although I think it can be applied to generic OGL ES):

-(void)draw
{
    [super draw];

    glBlendColor(0,255,0,255);

    glBlendFunc(GL_ZERO, GL_SRC_COLOR);
    glColor4ub(255, 0, 255, 255);
    glLineWidth(2);
    CGPoint vertices2[] = { ccp(0,100), ccp(100,100), ccp(100,0) };
    [ DrawingHelper  drawPolygonWithPoints:vertices2 points:3 closePolygon:YES];

}

*Draw helper is the logic to draw the triangle.

+(void)drawPolygonWithPoints:(CGPoint *)poli points:(int)points closePolygon:(BOOL)closePolygon
{
    glDisable(GL_TEXTURE_2D);
    glDisableClientState(GL_TEXTURE_COORD_ARRAY);
    glDisableClientState(GL_COLOR_ARRAY);
    glVertexPointer(2, GL_FLOAT, 0, poli);

    if( closePolygon )
        glDrawArrays(GL_TRIANGLE_FAN, 0, points);
    else
        glDrawArrays(GL_LINE_STRIP, 0, points);

    glEnableClientState(GL_COLOR_ARRAY);
    glEnableClientState(GL_TEXTURE_COORD_ARRAY);
    glEnable(GL_TEXTURE_2D);
}

And here some results:

enter image description hereenter image description here

As you can see is a good approximation but this two images has error:

OpenGL error 0x0502 in -[EAGLView swapBuffers]

My Questions are:

  1. How can I remove or fix this error?
  2. How can keep only the alpha of the image (shield) and apply the blend overlay color?

[Update]This is an example of what I would like (with the correct blends):

enter image description here

like image 811
Mc- Avatar asked Jan 07 '12 17:01

Mc-


1 Answers

apply a blending mode to the image only where the alpha is 1.0

This sounds like an application for alpha testing. Only that I'd first draw the rectangle and then make the alpha test fail for equal 1.0 (or greater than 0.99 to allow for some margin). This doesn't require blending.


Edit for updated question

Desired results:

enter image description here

I think you mixed up Multiply and Overlay captions up there.

In all those cases this is done using either

  • glEnable(GL_ALPHA_TEST); glAlphaFunc(GL_GEQUAL, 0.995); // not using 1.0 for some margin

or

  • glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

The effects are not created by setting the blend function or mode, but by texture environment or shader.

The "Overlay" (actually multiply) effect corresponds to the GL_MODULATE texture environment mode. Or in terms of a shader gl_FragColor = texture2D(...) * color;.

"Lighten" is min(texture2D(...), color);

"Multiply" (actually overlay) is gl_FragColor = 1. - (1.-color*texture2D(...))*(1.-color);

"Soft Light" is gl_FragColor = (1. - (1.-texture2D(...))*(1.-color))*k + b; (k and b choosen parameters).

like image 59
datenwolf Avatar answered Nov 15 '22 12:11

datenwolf