Photoshop blending mode to OpenGL ES without shaders

Question

I need to imitate Photoshop blending modes ("multiply", "screen" etc.) in my OpenGL ES 1.1 code (without shaders).

There are some docs on how to do this with HLSL:

• http://www.nathanm.com/photoshop-blending-math/ (archive)
• http://mouaif.wordpress.com/2009/01/05/photoshop-math-with-glsl-shaders/

I need at least working Screen mode.

Are there any implementations on fixed pipeline I may look at?

Answer 1

Most photoshop blend-modes are based upon the Porter-Duff blendmodes.

These requires that all your images (textures, renderbuffer) are in premultiplied color-space. This is usually done by multiplying all pixel-values with the alpha-value before storing them in a texture. E.g. a full transparent pixel will look like black in non-premultiplied color space. If you're unfamiliar with this color-space spend an hour or two reading about it on the web. It's a neat and good concept and required for photoshop-like compositions.

Anyway - once you have your images in that format you can enable SCREEN using:

glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_COLOR)

The full MULTIPLY mode is not possible with the OpenGL|ES pipeline. If you only work with full opaque pixels you can fake it using:

glBlendFunc(GL_ZERO, GL_SRC_COLOR)

The results for transparent pixels either in your texture and your framebuffer will be wrong though.

Answer 2

you should try this:

glBlendFunc(GL_DST_COLOR, GL_ONE_MINUS_SRC_ALPHA)

This looks like multiplying to me on the iPhone / OpenGL ES

Answer 3

Your best place to start is to pick up a copy of the Red Book and read through the chapters on on materials and blending modes. It has a very comprehensive and clear explanation of how the 'classic' OpenGL blending functions work.

Answer 4

I have found that using this:

glDepthFun( GL_LEQUAL);

was all need to get a screen effect, at least it worked well on my project.

I am not sure why this works, but if someone knows please share.