0

I'm trying to create a glow effect. I'm using OpenGL ES 3.0. I can create an outline of my object (a cube) using the stencil buffer, so I have no trouble with that. I can also render this outline to texture using a FBO, and achieve a blur effect using a box blur or Gaussian blur. However, the part that I'm have trouble with is in combining the resultant blurred glow outline (i.e the post-processed image) back with my original object, so that it lines the edges of the cube. I can blit the blurred texture onto the screen--but that copies the low-resolution blur over my high-resolution cube--meaning that I can no longer see my cube, just the blurred outline texture.

Question: How do I combine both into one image on the screen?

I want to make a composite image that consists of both images.

It's probably something simple, but I can't think of a way to do it. Pseudo code would be helpful.

Thanks

Mark
  • 311
  • 1
  • 8

1 Answers1

1

I think you want additive blending of those two images, correct?. Two approaches come to mind. Note that when using additive blend, you automatically get brighter colors as the values are summed.

1) If you have both the original cube and the blurred cube in textures, render a single screen-size quad with a fragment shader like this:

#version 300 es

precision mediump float;

uniform sampler2D originalTexture;
uniform sampler2D blurTexture;

in vec2 texCoord;

void main()
{
    vec4 originalColor = texture(originalTexture, texCoord);
    vec4 blurColor     = texture(blurTexture,     texCoord);
    gl_FragColor = originalColor+blurColor;
}

The advantage with this approach is you can easily add multipliers to the colors to fine-tune the effect, e.g. tone down the glow if it's too much.

Alternatively, you can render your cube normally from geometry. In that case, just add the texture lookup from the blur texture to your fragment shader, and add the color values.

2) You could leverage the fixed-function blending. First render the original cube as you would normally, then set the blend mode:

glEnable(GL_BLEND);
glBlendEquation(GL_FUNC_ADD);
glBlendFunc(GL_ONE, GL_ONE);

Now, when you bind the blur texture and render to the same render target, those should overlap and give you your effect. This gives an equivalent result to the above shader. You can try using glBlendFunc(GL_ONE_MINUS_DST_COLOR, GL_ONE) too to reduce the result brightness. This approach should be faster than the shader approach.

I'm unsure if blending works with glBlitFramebuffer, but it's worth a shot I guess. Hope some of this works!

Arttu Peltonen
  • 1,250
  • 14
  • 18