GLSL Iterative Dilation Demo

<- Return to Experimental GLSL Image Processing

Many image processing filters require iterative execution, with the result from the previous iteration serving as the input to the next iteration. Here, we use morphological dilation as an exemplar for algorithms that iterate to produce a final filtered image. This GLSL example uses multiple framebuffers and multiple textures to manage the iteration.

The management of framebuffers and textures in this example is modeled off of this work on chaining filters.

Source Image

Processed Image

Move pointer over the lower image. As you move the mouse, the left side of the image is unfiltered, the right side is grayscale dilated 2 times.

Check out the source code.

This demo uses WebGL. Not all devices and browsers are supported.