glfx.js | An image effects library for JavaScript using WebGL | Graphics library

I do not know much about Ionic, but loading an img in Angular could cause an UnsafeUrl Exception.

Maybe you need to use a Dom Sanitizer.

DomSanitizer using example:

Inject it:

As you probably know I can't post a runnable snippet because of cross origin security restrictions, hence I only post my source code. It works and I'm able to apply "ink" and "sepia" effects together. Notice that there is only one call to draw and update for all effects. Check by yourself and tell me whether it is helpful or not.

THREE.EffectComposer has a .reset function that you could use to wipe it, and then add the new filters you want. So just load the different filters you want to cycle through into an array, then reset and add passes from that array.

EDIT I thought you were talking about changing shaders in the composer. To change shaders on an object, you can create multiple shadermaterials with different shaders but referencing the same texture, and swap the materials out on the object. So you can write a shader that reinterprets the texture colorspace to sepia, one that reinterprets the texture colorspace to bnw, or swizzles hue and saturation with r,g, or b.

Then you swap multiple materials out on the fly. These effects are basic glsl, but if you have trouble writing the shaders, just post another thread with specific problems. If you're a glsl novice, I highly recommend the book of shaders. It's a great, fast, interactive crash course on glsl.

But the solution to your problem is to create multiple shadermaterials, or create one shader material that does everything and then use uniforms to enable/lerp between the different effects.

There is no cover all solution. This is because when you convert from 2D to 3D the size of the projected image can possibly approch infinity (near clipping prevents infinity) so no matter how large you make the image output there is always the possibility of some clipping being applied.

With that caveat out of the way there is a solution for most situations that can avoid clipping. It is very simple, just expand the canvas to hold the additional content.

To simplify the calculations I have changed the after array to a set of normalised points (they represent the after coords as a scale factor of the image size). I then use the image size to convert to real pixel coordinates. Then from that I workout the min size a texture needs to be to hold both the original image and the projection.

With that info I just create the texture (as a canvas) draw the image. Adjust the befor array if needed (in case some projection points are in negative space) and apply the filter.

So we have an image object that has a width and a height. And you have the projection of those points.