Jump to content

Issues with Lighting Filter


Recommended Posts

Hey there! I know there are tons of posts about this stuff so I'll try to keep it short and simple.

I'm trying to make a lighting filter where I pass a list of points (e.g. 0.5,0.5) to a filter and it "punches out" holes in a darkness layer, which has the filter. That part is all well and good. Unfortunately-

If I want the lightmap holes to be circular, they end up misaligned.
^ They are perfectly shaped and will stay the same size under any dimension, but 0,0 0.5,0.5 1,1<- these points are very clearly not in the right places. This is because of the filter vs. input normalization thing Ivan has posted about so much (I've read so many threads in pursuit of this)

If I follow that guideline though, while it does fix the misalignment, and while the 0,0 0.5,0.5 1,1<- points are in the perfect spots, the circles are more like ovals and get distorted with height/width, since I can't (to my knowledge) also scale them to pixels while de-normalizing the filter coords.

I'm open to any suggestions, been at this for 10+ hours now! Really close to the finish line, just don't know how to cross it :)


Link to comment
Share on other sites

I recommend to use pixel coords to measure distances, that way they will be circles. Just "vTextureCoord * inputSize.xy" (https://github.com/pixijs/pixijs/wiki/v5-Creating-filters#conversion-functions)

What also can help you:

1. all colors are premultiplied, do remember that when you mixing rgb's or subtracting those alphas http://www.adriancourreges.com/blog/2017/05/09/beware-of-transparent-pixels/

2. pixi-picture https://github.com/pixijs/pixi-picture now allows to just look into background. https://pixijs.io/examples/#/plugin-picture/displacement.js . You can draw lights in container with mesh-shader or just simple texture sprites, and then apply filter to it - take color from backdrop and mix it with your light.

3. My big demo with filters that take two layers and mix them : https://codesandbox.io/s/tender-franklin-iycmu also might help. Through its using https://github.com/pixijs/pixi-layers

Welcome to the layering club!

Edited by ivan.popelyshev
Link to comment
Share on other sites

Hey Ivan, thanks for the tips & advice!

I appreciate the links, especially #1 about the premultiplied colors. I genuinely had no idea this was a thing, so that's a huge help.

I took a look at the other links, but I think I'm still a little bit lost on how to fix my issue. I'm currently using pixel coordinates as you said in the first jsfiddle link, but that results in them being misaligned due to the power of two rule with textures & filters.

Is it possible to simultaneously check for distance based on pixels, while also factoring in the power of two thing with "vTextureCoord * inputSize.xy / outputFrame.zw"? Based on my research, my assumption is no- but I think I could just make the parent texture's size round up to the nearest power of two if necessary.

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...