Performance issues when rendering 50 elements #1640

xILTx · 2023-06-08T16:27:35Z

xILTx
Jun 8, 2023

Hi everyone !

First of all I wanted to thank all the developers who contributed to this absolutely amazing library ! I'm still amazed by the capabilities and can't wait to see what people are going to do with it.

I was so excited in fact that I decided to use it on a side project. The idea of this project was to more or less mimic the apple watch UI.

For that I needed to render approximately 50 "AVATARS" on screen.

Everything works perfectly on iOS (of course), but I tested on an Samsung A41 (somewhat of low end device), and I found that the FPS where dropping by half :

Enregistrement.de.l.ecran.2023-06-08.a.17.56.48.mov

This recording was taken in release mode.

What I also don't understand is that a JS thread is also dropping frame and I'm really not sure why....

So I just wanted to ask you guys what is wrong with my code, and what could I do to improve those performance ?

My Canvas :

import React, {useEffect, useMemo, useState} from 'react';
import {Canvas, Group} from '@shopify/react-native-skia';
import {Dimensions, View, Text} from 'react-native';
import {EDGE, SkAvatar} from './SkAvatar';
import {Gesture, GestureDetector} from 'react-native-gesture-handler';
import {useSharedValue, withDecay} from 'react-native-reanimated';
import {AVATAR_SIZE} from './SkAvatar';
import HexGrid from '../utils/HexGrid';

const width = Dimensions.get('window').width;

export const AVATAR_NB = 50;

export const CLICKABLE_ZONE_SIZE = EDGE + AVATAR_SIZE / 2;

const AVATAR_ARRAY = [...new Array(AVATAR_NB)];

export const SkMainCanvas = () => {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  const [canvasHeight, setCanvasHeight] = useState(0);

  const [virtualizedCanvasDimensions, setVirtualizedCanvasDimensions] =
    useState<{width: number; height: number}>({width: 0, height: 0});

  const positions = useMemo(() => {
    const unshiftPositions = HexGrid(AVATAR_SIZE * 1.3).coords(AVATAR_NB);
    let minPositionX = 0;
    let minPositionY = 0;
    unshiftPositions.forEach(position => {
      minPositionX = Math.min(minPositionX, position.x);
      minPositionY = Math.min(minPositionY, position.y);
    });

    setVirtualizedCanvasDimensions({
      width: Math.abs(minPositionX) * 2 + AVATAR_SIZE * 4,
      height: Math.abs(minPositionY) * 2 + AVATAR_SIZE * 4,
    });
    return unshiftPositions.map(position => ({
      x: position.x + Math.abs(minPositionX) + AVATAR_SIZE * 2,
      y: position.y + Math.abs(minPositionY) + AVATAR_SIZE * 2,
    }));
  }, [AVATAR_SIZE, AVATAR_NB]);

  useEffect(() => {
    if (
      virtualizedCanvasDimensions.width !== 0 &&
      virtualizedCanvasDimensions.height !== 0 &&
      canvasHeight !== 0
    ) {
      translateX.value = -virtualizedCanvasDimensions.width / 2 + width / 2;
      translateY.value =
        -virtualizedCanvasDimensions.height / 2 + canvasHeight / 2;
    }
  }, [
    virtualizedCanvasDimensions.width,
    virtualizedCanvasDimensions.height,
    canvasHeight,
    translateX,
    translateY,
  ]);

  const panGesture = Gesture.Pan().onChange(e => {
    translateX.value += e.changeX;
    translateY.value += e.changeY;
  });

  const composedGesture = Gesture.Race(panGesture);

  return (
    <GestureDetector gesture={composedGesture}>
      <View style={{flex: 1}}>
        <Canvas
          style={{flex: 1}}
          onLayout={e => setCanvasHeight(e.nativeEvent.layout.height)}>
          <Group>
            {AVATAR_ARRAY.map((_, index) => (
              <SkAvatar
                key={index}
                x={translateX}
                y={translateY}
                index={index}
                color={'mediumPurple'}
                positions={positions}
                canvasHeight={canvasHeight}
              />
            ))}
          </Group>
        </Canvas>
      </View>
    </GestureDetector>
  );
};

And My "Avatar" :

import {Circle, Group} from '@shopify/react-native-skia';
import React from 'react';
import {Dimensions} from 'react-native';
import {
  SharedValue,
  interpolate,
  useDerivedValue,
  useSharedValue,
} from 'react-native-reanimated';
import {Extrapolation} from 'react-native-reanimated';

type SkAvatarProps = {
  x: SharedValue<number>;
  y: SharedValue<number>;
  color?: string;
  index: number;
  positions: {
    x: number;
    y: number;
  }[];
  canvasHeight: number;
};

export const AVATAR_SIZE = 40;

export const EDGE = AVATAR_SIZE + 8;

const CANVAS_WIDTH = Dimensions.get('window').width;

export const SkAvatar = ({
  x,
  y,
  color = 'mediumpurple',
  index,
  positions,
  canvasHeight,
}: SkAvatarProps) => {
  const CANVAS_HEIGHT = canvasHeight;

  const INNER_ZONE_X_RADIUS = CANVAS_WIDTH / 2 - EDGE;
  const INNER_ZONE_Y_RADIUS = CANVAS_HEIGHT / 2 - EDGE;

  const distanceFromEdge = useSharedValue(0);
  const isCornerRegion = useSharedValue(0);

  /////////// RADIUS
  const avatarRadius = useDerivedValue(() => {
    const avatarX = positions[index].x + x.value - CANVAS_WIDTH / 2;
    const avatarY = positions[index].y + y.value - CANVAS_HEIGHT / 2;

    // Check if bubble is in innerZonne
    if (
      Math.abs(avatarX) <= INNER_ZONE_X_RADIUS &&
      Math.abs(avatarY) <= INNER_ZONE_Y_RADIUS
    ) {
      // Check if bubble is in innerZonne
      isCornerRegion.value = 0;
      return AVATAR_SIZE;
    } else {
      // Check if bubble is in corner zone
      if (
        Math.abs(avatarX) > INNER_ZONE_X_RADIUS &&
        Math.abs(avatarY) > INNER_ZONE_Y_RADIUS
      ) {
        isCornerRegion.value = 1;
        distanceFromEdge.value = interpolate(
          Math.sqrt(
            Math.pow(Math.abs(avatarX) - INNER_ZONE_X_RADIUS, 2) +
              Math.pow(Math.abs(avatarY) - INNER_ZONE_Y_RADIUS, 2),
          ),
          [0, EDGE],
          [AVATAR_SIZE, 0],
          Extrapolation.CLAMP,
        );
        return distanceFromEdge.value;
      } else {
        isCornerRegion.value = 0;
        // Bubble not in corner zone
        distanceFromEdge.value = interpolate(
          Math.max(
            Math.abs(avatarX) - INNER_ZONE_X_RADIUS,
            Math.abs(avatarY) - INNER_ZONE_Y_RADIUS,
          ),
          [0, EDGE],
          [AVATAR_SIZE, 0],
          Extrapolation.CLAMP,
        );
        return distanceFromEdge.value;
      }
    }
  });

  ///////////////// TRANSFORM X
  const calculatedX = useDerivedValue(() => {
    const dx = x.value;
    const avatarX = positions[index].x + x.value - CANVAS_WIDTH / 2;
    const avatarY = positions[index].y + y.value - CANVAS_HEIGHT / 2;

    if (isCornerRegion.value) {
      const cornerDx = Math.abs(avatarX) - INNER_ZONE_X_RADIUS;
      const cornerDy = Math.abs(avatarY) - INNER_ZONE_Y_RADIUS;
      let theta = Math.atan(cornerDy / cornerDx);
      if (avatarX > 0) {
        if (avatarY > 0) {
          theta *= -1;
        }
      } else {
        if (avatarY > 0) {
          theta += Math.PI;
        } else {
          theta += Math.PI - 2 * theta;
        }
      }
      return dx - (AVATAR_SIZE - avatarRadius.value) * Math.cos(theta);
    } else if (Math.abs(avatarX) > INNER_ZONE_X_RADIUS) {
      return dx - (AVATAR_SIZE - avatarRadius.value) * Math.sign(avatarX);
    }
    return dx;
  });

  ///////////////// TRANSFORM Y
  const calculatedY = useDerivedValue(() => {
    const dy = y.value;
    const avatarX = positions[index].x + x.value - CANVAS_WIDTH / 2;
    const avatarY = positions[index].y + y.value - CANVAS_HEIGHT / 2;

    if (isCornerRegion.value) {
      const cornerDx = Math.abs(avatarX) - INNER_ZONE_X_RADIUS;
      const cornerDy = Math.abs(avatarY) - INNER_ZONE_Y_RADIUS;
      let theta = Math.atan(-cornerDy / cornerDx);
      if (avatarX > 0) {
        if (avatarY > 0) {
          theta *= -1;
        }
      } else {
        if (avatarY > 0) {
          theta += Math.PI;
        } else {
          theta += Math.PI - 2 * theta;
        }
      }
      return dy - (AVATAR_SIZE - avatarRadius.value) * Math.sin(theta);
    } else if (Math.abs(avatarY) > INNER_ZONE_Y_RADIUS) {
      return dy - (AVATAR_SIZE - avatarRadius.value) * Math.sign(avatarY);
    }
    return dy;
  });

  ///////////////// ORIGIN POINT
  const origin = useDerivedValue(() => {
    return {x: positions[index].x + x.value, y: positions[index].y + y.value};
  });

  const finalTransform = useDerivedValue(() => {
    return [{translateX: calculatedX.value}, {translateY: calculatedY.value}];
  });
  return (
    <Group origin={origin} transform={finalTransform}>
      <Circle
        cx={positions[index].x}
        cy={positions[index].y}
        r={avatarRadius}
        color={color}
      />
    </Group>
  );
};

you can also find the full repo here : repro

Once again thank you very much for all your work, and for even looking at my post 🫶 (first time ever posting on github what a milestone haha)

Best Regards,

wcandillon · 2023-06-13T08:39:07Z

wcandillon
Jun 13, 2023
Collaborator

Thanks you for the kind words 🙌🏼

This is kind of example we love investigate.

Glancing at the code, there seems like there is a lot happening on every single frame, there might be a way to reduce the number of instructions that need to be executed.
For instance, the circle has the radius and its transform animated (but there are some translation computed upstream). It should only be its transform. This would not only make things faster on the Skia level but also on your side as it might reduce the instructions you are running.

Let's make the logic of this example super simple. From there, there are other things we can do to optimize for such an example but first we need to work on a lean and clean example.

But this looks fun, happy hacking :)

1 reply

xILTx Jun 15, 2023
Author

Thank you @wcandillon for your quick response !

I'm going to try your recommendation and will get back to you ASAP 😍

xILTx · 2023-06-26T10:45:42Z

xILTx
Jun 26, 2023
Author

Hi @wcandillon !

I finaly found some time to refacto the avatar code following your suggestion.

As you can see now the logic is much more simpler, and only use 2 derivatedValues :

import {Circle, Group} from '@shopify/react-native-skia';
import React from 'react';
import {Dimensions} from 'react-native';
import {
  SharedValue,
  interpolate,
  useDerivedValue,
} from 'react-native-reanimated';
import {Extrapolation} from 'react-native-reanimated';

type SkAvatarProps = {
  x: SharedValue<number>;
  y: SharedValue<number>;
  color?: string;
  index: number;
  positions: {
    x: number;
    y: number;
  }[];
  canvasHeight: number;
};

export const AVATAR_SIZE = 40;

export const EDGE = AVATAR_SIZE + 8;

const CANVAS_WIDTH = Dimensions.get('window').width;

export const SkAvatar = ({
  x,
  y,
  color = 'mediumpurple',
  index,
  positions,
  canvasHeight,
}: SkAvatarProps) => {
  const CANVAS_HEIGHT = canvasHeight;

  const INNER_ZONE_X_RADIUS = CANVAS_WIDTH / 2 - EDGE;
  const INNER_ZONE_Y_RADIUS = CANVAS_HEIGHT / 2 - EDGE;

  /////////// CALCULATED TRANSFORM
  const calculatedTransform = useDerivedValue(() => {
    const dx = x.value;
    const dy = y.value;
    const avatarX = positions[index].x + x.value - CANVAS_WIDTH / 2;
    const avatarY = positions[index].y + y.value - CANVAS_HEIGHT / 2;

    let isCornerRegion = false;

    // parameters

    let avatarScale = 1;
    let translateX = dx;
    let translateY = dy;

    // Check if bubble is in innerZonne
    if (
      Math.abs(avatarX) <= INNER_ZONE_X_RADIUS &&
      Math.abs(avatarY) <= INNER_ZONE_Y_RADIUS
    ) {
      // Check if bubble is in innerZonne
      isCornerRegion = false;
      avatarScale = 1;
    } else {
      // Check if bubble is in corner zone
      if (
        Math.abs(avatarX) > INNER_ZONE_X_RADIUS &&
        Math.abs(avatarY) > INNER_ZONE_Y_RADIUS
      ) {
        isCornerRegion = true;
        avatarScale = interpolate(
          Math.sqrt(
            Math.pow(Math.abs(avatarX) - INNER_ZONE_X_RADIUS, 2) +
              Math.pow(Math.abs(avatarY) - INNER_ZONE_Y_RADIUS, 2),
          ),
          [0, EDGE],
          [1, 0],
          Extrapolation.CLAMP,
        );
      } else {
        // Bubble not in corner zone
        isCornerRegion = false;
        avatarScale = interpolate(
          Math.max(
            Math.abs(avatarX) - INNER_ZONE_X_RADIUS,
            Math.abs(avatarY) - INNER_ZONE_Y_RADIUS,
          ),
          [0, EDGE],
          [1, 0],
          Extrapolation.CLAMP,
        );
      }
    }
    if (isCornerRegion) {
      const cornerDx = Math.abs(avatarX) - INNER_ZONE_X_RADIUS;
      const cornerDy = Math.abs(avatarY) - INNER_ZONE_Y_RADIUS;
      let theta = Math.atan(-cornerDy / cornerDx);
      if (avatarX > 0) {
        if (avatarY > 0) {
          theta *= -1;
        }
      } else {
        if (avatarY > 0) {
          theta += Math.PI;
        } else {
          theta += Math.PI - 2 * theta;
        }
      }
      translateX -= AVATAR_SIZE * (1 - avatarScale) * Math.cos(theta);
      translateY -= AVATAR_SIZE * (1 - avatarScale) * Math.sin(theta);
    } else if (
      Math.abs(avatarX) > INNER_ZONE_X_RADIUS ||
      Math.abs(avatarY) > INNER_ZONE_X_RADIUS
    ) {
      if (Math.abs(avatarX) > INNER_ZONE_X_RADIUS) {
        translateX -= AVATAR_SIZE * (1 - avatarScale) * Math.sign(avatarX);
      } else {
        translateY -= AVATAR_SIZE * (1 - avatarScale) * Math.sign(avatarY);
      }
    }
    return [
      {scale: avatarScale},
      {translateX: translateX},
      {translateY: translateY},
    ];
  });

  ///////////////// ORIGIN POINT
  const origin = useDerivedValue(() => {
    return {
      x: positions[index].x + calculatedTransform.value[1].translateX!,
      y: positions[index].y + calculatedTransform.value[2].translateY!,
    };
  });

  return (
    <Group origin={origin} transform={calculatedTransform}>
      <Circle
        cx={positions[index].x}
        cy={positions[index].y}
        r={AVATAR_SIZE}
        color={color}
      />
    </Group>
  );
};

I couldn't find a real solution to calculate the origin point so I used kind of hacky solution, if you have a better way of doing this I'll be glad to hear it ☺️

Anyway the results are slightly better than the previous iterations, but unfortunately we are still below 30FPS :

Enregistrement.de.l.ecran.2023-06-26.a.12.33.08.mov

I don't see where I can reduce the number of instructions in a frame, do you see where I can improve the performance ?

Thank you again for your work and you support, best regards 🥰

4 replies

wcandillon Jun 28, 2023
Collaborator

If you can provide us with a standalone example, we could look into it. This looks interesting.

xILTx Jun 28, 2023
Author

Of course ! you can find the minimal repro here : https://github.com/xILTx/performance_issue_android

wcandillon Jul 25, 2023
Collaborator

Congrats, this looks fantastic! What kind of Android device are you testing this on? It runs pretty smoothly on my side. Can you write to animated a view (rounded or square) to have some sort of comparison?

xILTx Jul 26, 2023
Author

Hi @wcandillon ! I'm testing it on a samsung A41 from 2020. I'm going to try with animated views asap whenever I get the chance.

xILTx · 2023-07-27T09:36:57Z

xILTx
Jul 27, 2023
Author

Hi @wcandillon ! I tried this morning with animated views, which gives me a much worse result :

with_animated_view.mov

(has you can see I couldn't reproduce the exact effect but I don't think it's relevant)

I also tried to with the latest version of reanimated in the hope of some improvements :

with_reanimated_3.4.0.mov

Still I couldn't see a noticeable improvement.

But from what I can see skia is such an improvement for those type of animations, such a nice work 🙌

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Performance issues when rendering 50 elements #1640

{{title}}

Replies: 3 comments 5 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Performance issues when rendering 50 elements #1640

xILTx Jun 8, 2023

Replies: 3 comments · 5 replies

wcandillon Jun 13, 2023 Collaborator

xILTx Jun 15, 2023 Author

xILTx Jun 26, 2023 Author

wcandillon Jun 28, 2023 Collaborator

xILTx Jun 28, 2023 Author

wcandillon Jul 25, 2023 Collaborator

xILTx Jul 26, 2023 Author

xILTx Jul 27, 2023 Author

xILTx
Jun 8, 2023

Replies: 3 comments 5 replies

wcandillon
Jun 13, 2023
Collaborator

xILTx Jun 15, 2023
Author

xILTx
Jun 26, 2023
Author

wcandillon Jun 28, 2023
Collaborator

xILTx Jun 28, 2023
Author

wcandillon Jul 25, 2023
Collaborator

xILTx Jul 26, 2023
Author

xILTx
Jul 27, 2023
Author