grainy/fuzzy/watery effect on moving scaled sprites

[brokedRobot]

Hey, I'm working with a simple moving sprite (albeit large and being scaled down by pixi.)  I remember running into this effect with three.js sometimes, and I thought it had something to do with scale modes or antialiasing, but now I'm confused because I don't seem to be able to remedy the effect in pixi.  

 

You can take a look at it here: http://www.naomitraynor.com/

 

I was hoping someone could just visually inspect it (the moving image behind the rotating mask) and let me know what's going on or possibly a solution.  I've played with the values for scale modes and antialiasing quite a bit but it doesn't seem to help at all.  Of course, it's worse when you scale your browser to certain sizes...so I assume it is scale modes, but neither linear nor nearest seem to help.  Is it that this effect can't be removed in pixi?  Thanks!

 

I forgot to mention I'm viewing with Windows 10 on Chrome 47.

[brokedRobot]

Ah, I see now that this effect is only present on a moving image behind a mask...why is that?  Is there any additional filter I can apply to fix this or any way to mask without this happening?

[ivan.popelyshev]

Your image is very big (3000x2300) and you're drawing something like 3 times smaller. Either you resize it so it will be closer to the size, either turn mipmapping on.

 

But you need 2048x2048 or 4096x4096 to enable it, it requires powers of two.

texture.mipmap=true

[brokedRobot]

Ok, I set the scaling back to 1x1 (100%, you can look at it by following the link in my earlier post again), but...I don't know, it still looks like it's there.  Does the image have to be a power of two to fix it no matter what?  Or are my eyes playing tricks on me at this point?  I can experiment with mipmapping, but at this point I could just as easily change the size of the image, but if the effect is still there at 100% then that won't help much...

Also thanks for taking a look at it.  It has helped me at least take a step forward.

[ivan.popelyshev]

And now its a real problem. I'll investigate it

[brokedRobot]

Ok I've set up a simpler example where it doesn't seem to be occurring: http://brokedrobot.com/resources/dev/masking/

 

I'll try to figure out what is causing it...it could be because I'm scaling the canvas I guess...or something like that...other than scaling the canvas...I'm not sure I'm doing anything differently.


edit: I've set up another one for testing: http://brokedrobot.com/resources/dev/masking2/ but I'm having a really hard time getting it to occur even after scaling the canvas and setting things like the renderer's resolution and antialias values...but I can keep comparing things til I find it.  It has to be something I'm doing.  I'll find it.

[brokedRobot]

I found what was causing it.  I was changing the scale of the container holding the masking sprite to match the window size (although looking at it now I don't think this was even necessary), so it seems strange that it causes it, or perhaps not, but this made me notice that the containers have no scaleMode...so I'm not sure, maybe this will cause some sort of issue where someone won't be able to do something because they'll need to scale a container, but for now I think I can work around it.  Thanks again.