I'm trying to apply one filter to a large number (~256) of small (32x32 px) sprites. Within the filter, I'm using vTextureCoord to get the current sprite's coordinates, to draw borders on it. vTextureCoord breaks, apparently referring to the containing canvas's coordinates instead of the individual sprites' coordinates.
BUT if I apply that same filter twice (two elements in .filters array), in one of the copies vTextureCoord actually does point to the sprite coordinates, and borders are drawn correctly. The other copy still points to the canvas coordinates, and the whole thing becomes laggy for some reason, and filters don't get removed when they should, too.
Live version (hover over the individual sprites to apply filter second time): http://uoowuo.github.io/cellulata/ All the sprites are white-tinted because of the first filter invocation, with incorrect vTextureCoord coordinates.
First filter application https://github.com/uoowuo/cellulata/blob/master/src/classes/cell.js#L42
Second filter application https://github.com/uoowuo/cellulata/blob/master/src/classes/cell.js#L83
Hover is just for the sake of illustration, if I apply filter twice statically to all sprites, the behavior is still the same.
Thanks for your time!