OpenGL ES2 + Blending Modes

I am trying to implement a Difference blend mode, but I haven’t been able to find a way to make it within ES2. The function necessary is:


The problem I am having is that gl clamps colours, so even if I could find out how to get “abs” to work somehow, I would need to have the built in clamping not happen.

I had a look at ofxPSBlend but unfortunately that won’t work with OpenGL ES2

Here is an image that shows a prototype of the colours in processing which has Difference:

The final piece will be compounded circles, so just calculating the resulting shape and colour and then drawing that as a seperate component would not work unfortunately.

Any thoughts on this would be really useful, thanks!

Hi @Miles,

Did you have a look at the blendingExample in /examples/graphics to see if any of those would work? If the Difference blend mode in Processing is different from the ones in oF, then you could port it.

It looks to me like the function ofGLProgrammableRenderer::setBlendMode() sets the blend mode in a switch statement with some gl function calls and arguments. You can find the function here starting on line 1021.

So creating a Difference mode for blending may be as simple as adding and calling a function (in ofApp) that makes the correct gl calls for the effect that you want. You’ll have to find the analogous gl calls specifically for the Difference blend mode in Processing though. I tried and failed, but I’m really unfamiliar with Processing. This ES2 reference page might be helpful. And the LearnOpenGL site has a nice description of how blending works.

Edit: Line 1021 and not 1821. Time to get reading glasses!


thanks so much for your response, I have checked through what you have linked to and unfortunately I’m hitting the same problem in that I can’t get a function that works like “abs” in OpenGL ES2 which completely stops the opportunity for Difference to work at all. I’m going to keep on looking for other possibilities.

This is a useful tool to check out different OpenGL equations

1 Like

Hey @Miles this might be part of the solution and worth a try:


glBlendEquation() has some “Advanced Mode” options, with names that are similar to the various blend mode options in Processing. I found a description of them here: glBlendEquation - OpenGL ES 3.2 Reference Pages.

You will probably still have to figure out which arguments are needed for glBlendFunc(). Also just double check and make sure you have called ofEnableAlphaBlending() somewhere relevant.

Also I edited my previous post; the oF code I cited above starts on line 1021 and not 1821. This general pattern is used to set a blend mode in oF:


Thanks Tim,

Unfortunately I think that the advanced blend modes are only supported in OpenGL ES 3 and up, and openFrameworks on iOS only currently supports ES2. I think I have seen someone implement ES3 with oF on iOS, so there’s a bit of fishing around to do.

Hey have you tried it though? The table titled “OpenGL ES API Version” in the OpenGL ES 3.2 Reference Pages says that 2.0 is supported. I think its worth trying it out if you haven’t. It could be that its in the specification, but not in the implementation, of OpenGL ES. Its worth a try if you haven’t tried it; you’ll get a compile error (?) if its not a valid function call.

Edit: Well I just tried the GL_DIFFERENCE argument on a Pi3 (legacy) and ES2 and it didn’t compile; I was so hopeful it would! But maybe these “Advanced Mode” options are available in ES3 or other.

Another Edit: You might be able to do something similar with a couple/few ofFbos and a shader. But I’ve no idea if iOS can run shaders, or if one would slow things down too much. ofFbo are kind of nice as you don’t have to draw into them every frame if you don’t need to.

Yeah, I had a go with it off the back of your last post. As you say unfortunately it didn’t compile.

I’m already using FBOs and have been playing around with shaders. I’ve been trying with both, but I really start getting performance issues quickly. I’m going to have a go at getting ES3 to work.

What is the problem you are having with abs() ? ES 2.0 uses GLSL 1.0 which has abs() in it I am pretty sure.

What platform are you working on? Do you have any code you could share re the performance issues? It should be pretty fast.

This is for iOS.

I haven’t been able to find a blendfunc within OpenGL ES2 which has abs(). This would be GL_DIFFERENCE, however that’s only available in ES3.2 I believe

Oh right I meant if you were DIY’ing it in a shader

yeah, that’s one of the ways that I could get into this. I’m not great with shaders though.
The objects I’m trying to blend are FBOs so I should be able to use a shader, but the quick tests I had reduced the frame rate

Yeah they can be a bit of an investment time wise to get up to speed with unfortunately.

If you have a poke around libs/openFrameworks/gl/ofGLProgrammableRenderer.cpp the default shaders oF uses are there towards the bottom of the file. Can be useful as a starting point or just to help understand what is going on.

Shadertoy is always a good place to check for shader stuff too, here is a difference one Shader - Shadertoy BETA

If you wanted to implement that in oF it is a fragment shader, you would pass in your src and dest fbo’s as uniforms.

Texture format and FBO dimensions can impact performance. Any modern iOS has float textures too, despite not strictly part of the ES2.0 spec. You can check for the OES_texture_float extension.

that’s useful, thank you. I’ve played around with bits on shader toy, and have implemented a couple in previous desktop projects.
As you say the speed impact is a bit of a problem. It’s a shame, it all feels so close with what can be built in in terms of blend modes, but it’s just that GL_DIFFERENCE isn’t available in this version

Yes it is a bit annoying, ES2 is ancient nowadays!

yeah for sure! I would happily pay for someone more knowledgable than me to spend a bit of time updating openframeworks on iOS