GLSL Image-Blend-Mode Samples Available

kevin.bjo..

GLSL Image-Blend-Mode Samples Available

in Library and Tool Development • 3 years ago

Sketch at http://www.botzilla.com/blog/archives/pix2010/GLBlendModes.zip

The data folder includes GLSL for most common blend modes, set up to use via GLGraphics's GLTexture class.

The sketch will advance by itself through various modes, or hit the space key to jump from one to the next.

kb, http://www.riftgame.com/

Replies(9)

andres

Re: GLSL Image-Blend-Mode Samples Available

3 years ago

hey kevin, thanks! this is great!

question: which of these blending modes can be implementing without shaders, i.e. restricting yourself to use glBlendEquation, glBlendFunc, etc.?

owaunandr..

Re: GLSL Image-Blend-Mode Samples Available

3 years ago

I have to check this out; but you can create some awesome sketches with various blending modes. The only drawback is that each filter slows down the frameRate.. so you use them sparingly.

kevin.bjo..

Re: GLSL Image-Blend-Mode Samples Available

3 years ago

@Andres: The normal modes, Add, Subtract, Darken, Lighten, and Multiply. You could do some others at the expense of quality or speed and memory by running multiple passes (e.g. difference(A,B) == add(sub(A,B),sub(B,A) but you have to watch out for range clipping when doing anything more complex). And none of them with independent opacity control.

(btw, if you are a Photoshop junkie and like using "split-tone blending" on layers (aka "blend-if"), I have code for that too but left it out for the sake of simplicity)

@owaunandrew: in general these should be faster than doing the same thing without them. If you have a complex layer stack that's fixed -- e.g., normal layer on top of color layer on top of grayscale copy of the first layer blended 30 percent to lighten... this sort of thing... it could get gnarly, but at that point since you have this source, just collapse the whole layer stack into a single-pass filter.

kb, http://www.riftgame.com/

sixswitch

Re: GLSL Image-Blend-Mode Samples Available

2 years ago

Hey there,

I think this implementation may be triggering the same problem described here:

http://forum.processing.org/topic/gltexture

I'm essentially chaining two filters and consistently getting the error message "Invalid memory access of location 00000000 eip=95a7246b".

More FYI, but I would really appreciate any advice...

Thanks,

Jacob

jeff_g

Re: GLSL Image-Blend-Mode Samples Available

2 years ago

I get this error when I run it on OSX 10.6.5.

GLGraphics VERSION: 0.9.4.1
Fragment shader BlendOverlay.glsl compilation:
ERROR: 0:32: 'lerp' : no matching overloaded function found
ERROR: 0:32: 'final_mix' : no matching overloaded function found
ERROR: 0:32: '=' : cannot convert from 'const float' to '4-component vector of float'
GLSL program validation:
ERROR: One or more attached shaders not successfully compiled
Validation Failed: Program is not successfully linked.
Fragment shader BlendHardLight.glsl compilation:
ERROR: 0:32: 'lerp' : no matching overloaded function found
ERROR: 0:32: 'final_mix' : no matching overloaded function found
ERROR: 0:32: '=' : cannot convert from 'const float' to '4-component vector of float'
GLSL program validation:
ERROR: One or more attached shaders not successfully compiled
Validation Failed: Program is not successfully linked.
OpenGL error 1282 at top endDraw(): invalid operation
Error in filter parameter Opacity: no valid opengl ID.
OpenGL error 1282 at render_triangles in: invalid operation
Error in filter parameter Opacity: no valid opengl ID.
Error in filter parameter Opacity: no valid opengl ID.
Error in filter parameter Opacity: no valid opengl ID.
Error in filter parameter Opacity: no valid opengl ID.
Error in filter parameter Opacity: no valid opengl ID.
Error in filter parameter Opacity: no valid opengl ID.
Error in filter parameter Opacity: no valid opengl ID.
Error in filter parameter Opacity: no valid opengl ID.
Error in filter parameter Opacity: no valid opengl ID.
Error in filter parameter Opacity: no valid opengl ID.
Error in filter parameter Opacity: no valid opengl ID.
Error in filter parameter Opacity: no valid opengl ID.
Error in filter parameter Opacity: no valid opengl ID.
Error in filter parameter Opacity: no valid opengl ID.
Error in filter parameter Opacity: no valid opengl ID.

andres

Re: GLSL Image-Blend-Mode Samples Available

2 years ago

In the shader code, replace lerp() by mix().

kevin.bjo..

Re: Re: GLSL Image-Blend-Mode Samples Available

2 years ago

Ahhhhh..... $%^#%!!! GLSL deliberately randomizing identifiers (NVIDIA windows driver accepts lerp() ) (and #include too)

kb, http://www.riftgame.com/

kristoffe..

Re: GLSL Image-Blend-Mode Samples Available

1 years ago

Hi Kevin,

great example - but a perhaps little complex for a noob like me - So i've got what probably amounts to a pretty stupid questions:
I am trying something like this inside draw:

resultLayer.filter(BlendAdd, new GLTexture[]{topLayer, bottomLayer}, 0.5);

resultLayer.render(0, 0, width, height);

with this in Setup

BlendAdd = new GLTextureFilter(this, "BlendAdd.xml");

But I just get a blank screen?

What am I doing wrong?

Kristoffer

(yay my first post - at least I think so)

andres

Re: GLSL Image-Blend-Mode Samples Available

1 years ago

I think the right way to set the (opacity) parameter of the blend filter would be:

BlendAdd.setParameterValue("Opacity",0.5);

Top Reply