pixelated scale-down GSAP & Pixi.js

[processprocess 11 Likes (Newbie)]

I'm getting pixelation when using pixi.js sprites with gsap.

 

I doubt this is a gsap or pixi problem, I'm sure it has to do with how I'm combining them.

 

in the codepen example:

pixiBug on left is pixi.js & gsap and we're getting pixelation on scale down

domBug on right is DOM & gsap and edges are smooth no matter the scale.

 

What am I missing here? 

 

Thanks!

 

 

 

See the Pen EmKqrG by philipbell (@philipbell) on CodePen

[GreenSock 8,117 Likes (Superhero)]

I'm not very familiar with Pixi, but that sure sounds/looks like something that you'd probably want to ask the pixi folks. OSUblake is really good with it too, so he may chime in here. 

 

Oh, and feel free to kick the tires of this PixiPlugin (the one you're using is from another developer and has some issues with overwriting): 

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/PixiPlugin.min.js

 

We're considering putting that in the next official GSAP release. Please let us know if it works well for you. Here's the post where I talk about the improvements this plugin makes: https://greensock.com/forums/topic/16263-staggerto-on-master-timeline-with-nested-tweenmax/?p=71686 (though none of this has anything to do with the blurriness issue you originally brought up)

[processprocess 11 Likes (Newbie)]

Thanks Jack!

 

I implemented your plugin and it appears to be running a little faster. 

 

It's also helpful to see how you're re-factoring the pixi plugin. 

 

the pixelation is still an issue but this was a big help for other things.

 

Thank you!

[OSUblake 9,990 Likes (Superhero)]

How scaling behaves in Pixi is kind of in the hands of the user as a lot it of will be determined by the type of textures you are using. Pixi does linear scaling by default. However, bicubic scaling will be done on the GPU if you're using WebGL and the base texture is a power of 2 in size, 16, 32, 64, 128, 256, 512, etc. That will enable mipmaps, which can speed things up and reduce artifacts.

 

Notice the difference here. The first butterfly is 200x200. The second butterfly is 256x256. And the third butterfly is a DOM element.

 

See the Pen PmGBJe by osublake (@osublake) on CodePen