Jump to content

Help with Normalized Sprite coords within Filters


Recommended Posts

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/

Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...