pixi-projection falling leaves

[onetrickwolf]

pixijs-intro-example.mp4

Hey I used pixi-projection and gsap to recreate a falling leaf codepen I found with PixiJS!

This was made to be for Twitch stream overlays and intros so it has Twitch integration too where when people type emotes it will make them fall as a leaf as well. It converts the GIFs to WebMs and uses them as video textures.

If you want to test it out here's GitHub page I put up and you can add ?channel=twitch_username if you'd like to test out the emote feature.

https://onetrickwolf.github.io/pixijs-intro-falling-leaves/?channel=onetrickwolf

Here's the source: https://github.com/onetrickwolf/pixijs-intro-falling-leaves/

Any feedback appreciated!

Still far from perfect but really happy with this initial test love working with PixiJS! I plan to make some more polished versions of these will post when I have more!

Also just some fun facts but it can handle about ten thousand leaves on my computer before I start to drop FPS which is pretty crazy. A lot of the performance drop seems to come from GSAP too as well not sure why, I tried writing my own tweening in a ticker and was able to get way better performance so I may do that in the future.

Here's the original codepen it is based off of but seems to be broken for some browsers: https://codepen.io/MAW/pen/KdmwMb

[domis86]

In firefox 92 i got this error in console:

Content Security Policy: Blocking insecure request ‘http://www.clipartqueen.com/image-files/red-lobed-fall-clipart-leaf.png’.

[onetrickwolf]

Hey @domis86 yeah that's the original codepen I based mine off of, I think it uses http for the image which some browsers now block. I just posted it for code reference but my actual demo should work: https://onetrickwolf.github.io/pixijs-intro-example?channel=onetrickwolf

[domis86]

ok that is working 👍

[domis86]

A lot of the performance drop seems to come from GSAP too as well not sure why

maybe you can try this one instead: https://animejs.com/documentation/#JSobject

[miltoncandelero]

If we are suggesting alternatives for tweens, tweedle.js

[onetrickwolf]

Just updated it to add some flickering lights with pixi-lights :) also updated the link: https://onetrickwolf.github.io/pixijs-intro-falling-leaves/

[miltoncandelero]

A bit of a tangent here, but do you have some documentation/tutorial on how to load up pixi inside an obs source/scene?

I know my pixi but I am a bit of a newbie with obs 😅

[onetrickwolf]

Oh yeah it's actually really easy, I am just using a browser source in OBS:

It's pretty much just Chrome 75 so it can run pixi really well.

[miltoncandelero]

Oh, I thought that it had some internal serving/running mechanism. 😅

Still cool nevertheless. Does it support transparency on the background of the Dom?

[onetrickwolf]

Oh, I thought that it had some internal serving/running mechanism. 😅

Yeah not that complicated haha

Does it support transparency on the background of the Dom?

Yes as long as you don't have any background set and give your pixi app backgroundAlpha: 0 it makes a really nice overlay.