Help with Normalized Sprite coords within Filters

[gizmodude4]

Hi all,

I'm pretty new to shaders, so this question may be a complete lack of understanding and if so, feel free to let me know. I'm trying to use a shader to pixelate a part of a specific image by passing in a normalized x/y coordinate, height, and width and using a conditional in the shader to determine whether or not to pixelate. This isn't the ideal solution as conditionals in shaders aren't great, but I wanted a really simple demo.

The problem I'm having now is the normalized coordinates I'm passing in aren't relative to the sprite, but seem tied to the window size (world space?). I have a function to resize the sprite as the window resizes as well which is probably affecting things as well as the area applied in the shader moves about the screen not in line with the resizing. I'm trying to find a way to basically pass in some normalized coordinates and have the shader apply only at those coordinates on the texture without having to do the math upfront.

Side note: every nonfiltered area also has the quality significantly lowered -- if the frag shader is just a passthrough that looks like this

gl_FragColor = texture2D(uSampler, vTextureCoord);

the quality still takes a significant drop from just applying that shader. Here's a fiddle example of what I'm talking about, though to see the resize functionality, popping it in a browser makes sense. https://jsfiddle.net/0ma58bsj/12/

[gizmodude4]

I've been working on this off an on the past week and still haven't gotten anywhere. Any tips would be super appreciated!

[ivan.popelyshev]

You can just take parts from https://pixijs.io/examples/#/plugin-picture/pixelate.js , right? 

"vec2 mapCoord( vec2 coord )" gives you screen pixel coord . if you remove "+ outputFrame.xy" you'll get filter pixel coord

"vec2 unmapCoord" converts back to normalized input coord

"pixelate" is the same what you are doing with that pixel

 

Also, if its an image and not a container with number of images, you can use https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js as a base, instead of filter

[ivan.popelyshev]

conversion functions: https://github.com/pixijs/pixijs/wiki/v5-Creating-filters#conversion-functions

[gizmodude4]

Ahh, that's the key I was missing -- I had tried using filter pixel coords, but I was using them for everything including the vTextureCoord. Using them to just tell where the filter should start and stop is the correct thing to do.

 

Also thanks for the example! I'd been looking for something similar, but Google didn't surface this page well enough. i like the implementation here better than what I have too. Thanks so much for the help!