Issues with Lighting Filter

[Roomy]

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.
https://jsfiddle.net/roomyrooms/qfLa87t9/5/
^ 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.
https://jsfiddle.net/roomyrooms/py05jh94/4/

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

 

[ivan.popelyshev]

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 June 16, 2021 by ivan.popelyshev

[Roomy]

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.

[ivan.popelyshev]

vTextureCoord is normalized coord in that pow2 texture

"vTextureCoord * inputSize.xy" is pixel coord, and you can just take distances in pixels, I dont suggest to use it for anything else. Why doesnt it work for you?

Edited June 18, 2021 by ivan.popelyshev