basically, the idea is to perform two passes — first blur horizontally, then vertically — storing the intermediate image in a PGraphics. the issue i’m running into is that the second pass fails with the following error:
GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 0
this seems to be caused by using the same blur_shader twice. if i load a second instance of the same shader and use that for the second pass, it works as expected.
ultimately, i’m hoping to do even more passes to increase the blur effect, and it seems like there has to be a better way than loading a copy of the same shader for every single pass. any suggestions?
I have only done this in Processing and it works fine. There I have two shaders anyway, one horizontal, one vertical, so I don’t need to specify the direction.
What if you try have more passes? Maybe the issue is when reusing the same shader with different graphics, but it works fine when if the shader is not reused across graphics? My point is, maybe it doesn’t work with just one shader, but with two shader it works even for many passes? It is a possibility…
If it doesn’t work, maybe you can write a minimal example (with a plain color shader) and post it as a bug in GitHub?
I tried reusing the shader as you did in Processing with a multipass x/y blur shader and it works fine…
you were right, the issue only appears when reusing the shader with different graphics. i was able to make a working implementation by just avoiding that: https://github.com/ahihi/p5js-blur
Great! I didn’t check the p5js code, but I assumed that maybe currently the shader can not be bound to two graphics simultaneously. Maybe other environments check for this situation and first unbind the old binding when a new one is requested? Just a random theory
