WebGL glow effect

2
votes

I started learning shaders, playing around on ShaderToy.com. For a project I want to make, I need to create an arbitrary glow filter on WebGL (not Bloom). I want to calculate alpha that I can then use to draw a color glow or use for some animated texture like fire etc.

So far I thought of a few ideas:

  1. Averaging alpha across some area near each pixel - obviously slow
  2. Going in circle around each pixel in one loop then over distance in another to calculate alpha based on how close the shape is to this pixel - probably just as slow
  3. Blur entire shape - sounds like an overkill since I just need the alpha

Are there other ideas for approaching this? All I can find are gaussian blur techniques from bloom-like filters.

1
glslwebglshaderfragment-shader
Your question is not very clear. What is (are) your input(s), what is your output ? You want to calculate an alpha from what ? And what do you want at the end ? A blurred alpha texture ? The average alpha value for an image ? Something else ? Please clarify your question - Zouch
@Zouch, I want to create a glow around arbitrary object that I could customize (color, distance, intensity, etc). After spending a whole day googling and reading some articles I figured I will try this approach: xissburg.com/faster-gaussian-blur-in-glsl Will probably answer my own question with a Codepen once I have time to make it but thanks for your interest. - waterplea

1 Answers

4
votes

Please find this nvidia document for the simple glow effect. The basic idea is to

  1. render the scene in the back buffer
  2. activate the effect
  3. render some elements of the scene in a FBO
  4. compute the Glow effect
  5. bind the final FBO as a texture and blend this effect with the previously rendered scene in the backbuffer