Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
454 views
in Technique[技术] by (71.8m points)

iphone - 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 here enter 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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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).


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...