Strong blur effect shader in a single-pass?

  blur, javascript, light, shader, webgl

I’m learning WebGL and I’m looking to create a strong blur effect that is efficient to produce. I’ve been looking around and it seems that the blur shaders I’ve found do a sort of flip-flop operation where they blur the image onto a frame buffer, then blur that frame buffer onto the original frame buffer, etc. and just keep blurring back and forth until the desired intensity is achieved.

This is pretty slow because you have to process the entire screen multiple times, and each pixel in each sampling requires grabbing many pixels around it, so it ends up being billions of texture lookups.

In my case, the blur doesn’t need to be that accurate, but it needs to be slightly powerful. Specifically, I’m going to be blurring my light map, such that I would like to turn this into this:

enter image description here

into this:

enter image description here

The main reason for this is so that I can smooth out the shadow edges, as currently they’re pretty hard. Does something like this exist? I do not need any dynamic blurring. That is, that radius for the blur should always be the same (around 15?), so I assume it should be possible to make something like this. Is this possible to do without flip-flopping and reprocessing the frame buffer multiple times?

Links for reference (the existing solutions I’ve found):

https://webglfundamentals.org/webgl/lessons/webgl-image-processing-continued.html

https://rastergrid.com/blog/2010/09/efficient-gaussian-blur-with-linear-sampling/

Source: Ask Javascript Questions

LEAVE A COMMENT