Discussion on: Jetpack Compose Desktop rendering performances

[Romain Guy]

You may be able to improve the performance of the diamond case in Compose by building a single path that doesn't depend on x and y, and instead position it using a translation transform on the Canvas.

[Gaetan Zoritchak]

@romainguy Thanks for the proposal.

But applying a translation leads to another drop of FPS.

New implementation:

RenderingWith.Diamond -> drawPath(Path().apply {
    moveTo(0f, 5f)
    lineTo(5f, 0f)
    lineTo(0f, -5f)
    lineTo(-5f, 0f)
    close()
    translate(Offset(x,y))
}, color)

Results:

Compose	3000	10 000	30 000	100 000
Square	60 FPS	60 FPS	28 FPS	8 FPS
Circle	60 FPS	60 FPS	31 FPS	9 FPS
Diamond	60 FPS	25 FPS	8 FPS	2 FPS

[Romain Guy]

Repeating what I mentioned on Slack: my suggestion was not to apply a translation to the Path object itself. Instead create one instance of the Path, and before drawing, translate the Canvas: canvas.withTranslate { drawPath(…) } or equivalent.

[Gaetan Zoritchak]

Sorry for the mistake; I read your message too fast.

I tried your suggestion with one path and moving the canvas before drawing it. It’s still a little bit under the first implementation performances but more stable (no more freezing).

RenderingWith.Diamond -> {
    canvas.translate(x,y)
    drawPath(diamond, color)
    canvas.translate(-x,-y)
}