What is the most performant way to render confetti/snow.

[bendgk]

I'm currently making a ConfettiPopper component which spawns a variable amount of ConfettiPiece child components

The purpose of such a component is to create a confetti/snow type of animation where various "particles" are spawned in and rain from the top. Something similar to party.js (but a little different.)

Right now I'm able to get decent performance (60 fps compiled for release with low thermals on the app) using the following strategies:

• ConfettiPopper is responsible for spawning ConfettiPiece
• data and dom are handled separately to minimize the amount of re-renders
• confetti objects are reused when re-spawning to prevent a re-render
• useFrameCallback for custom animation logic
• using runtime constructed shapes using Skia.Path.Make()
• using a SharedValue path and path.rewind() to minimize allocations

It seems that the task can be broken down into the following steps:

1. Spawn confetti
2. Update confetti state on useFrameCallback
3. re-draw the scene each frame

To me it seems that the order of how taxing each step is from a performance perspective is as follows:
3 -> 2 -> 1 (ordered from most exhausting to least exhausting.)

My current code looks like the following:

function drawPath(shape: ConfettiShape, path: SkPath, x: number, y: number, r: number) {
  'worklet'

  path.rewind()

  switch (shape) {
    case 'confettiCircle':
      path.addCircle(x, y, r)
      path.close()
      break;
    case 'confettiHeart':
      r = r * 0.75
      path.moveTo(x + 2*r, y)
      //rest of the 'confettiHeart' path...
      path.close()
      break;
    case 'confettiSquiggle':
      path.moveTo(x - r, y + r)
      path.cubicTo(x - r, y - r, x + r, y + r, x + r, y - r)
      path.close()
      break;
    case 'confettiX':
      path.moveTo(x - r, y - r)
      //rest of the 'confettiX' path...
      path.close()
      break;
    case 'confettiDollar':
      path.moveTo(x, y)
      //rest of the 'confettiDollar' path...
      path.close()
      break;
  }
}

function ConfettiPiece(props: ConfettiPieceProps) {
    //this is a small subset of shared value props that the confetti piece has
    //some other available properties are velocity, opacity, and other various animation settings
    const x = useSharedValue(props.x)
    const y = useSharedValue(props.y)

    const animation = useFrameCallback(() => { /*Animation logic here...*/ })

    const path = useSharedValue(Skia.Path.Make())

    useDerivedValue(() => {
      drawPath(props.shape, path.value, x.value, y.value, props.size)
    })
 
  return <Path path={path} color={props.color} opacity={opacity}/>
}

I want to point out that I tried many different strategies, however the best performance in both debug and release was achieved by the above solution.

Some other ideas I tried:

• Using the Offset component (performed pretty poorly and its not really flexible)
• Using groups transform prop (poor performance from my testing but not really sure why)
• Caching the creation of the svg paths using Skia.Path.MakeFromSVG() and transforming them using path.transfrom
  • I actually tried this idea both with usePathValue and without, usePathValue performed disappointingly poorly.

Most of the aforementioned ideas struggled to maintain 60fps in Debug, and while maintaining 60fps in Release, would heat up my phone a lot.

So I'm left wondering two things:

1. Why is redrawing the paths on the cpu faster than calling path.transform with a cached path representation?
2. What are some ideas you may have to improve on the current solution?

[bendgk]

I'd like to mention the provided particles video is the current implementation that I mentioned with optimizations applied.

[wcandillon]

This is very cool, based on the demo you shared, I expect you to get very descent performance even on low-end device using one component per confetti and each confetti is using https://shopify.github.io/react-native-skia/docs/animations/hooks#usepathvalue.
If I look at your use case it makes me think that usePathValue should allow you to specificy an init path if needed: https://github.com/Shopify/react-native-skia/blob/main/package/src/external/reanimated/interpolators.ts#L27
Here you do need to give you initPath and then in the modifier just copy it an apply the props.

Now we're exposing a new API that would allow you to do all of this in a single draw call: #2134 but you won't see performance improvements there. We only identified this new API to be faster in an handful of use-cases.

[iarmankhan]

@bendgk will it be possible to share the code for this effect? I am trying to make similar one but having issues with performant animation. Thank you.

[bendgk]

Sure thing,

If you haven't figured it out yet:
https://github.com/GambitLLC/quip-app/blob/main/src/lib/confetti/ConfettiPopper.tsx
You may only want to use that as a refrence, some of the logic can 100% be cleaned up