Segmentation is not running smoothly (lag, pauses, jumps), maybe because of Garbage Collection or requestAnimationFrame

[vsaase]

Prerequisites

using the example https://tools.cornerstonejs.org/examples/tools/circle-scissors.html

Description

See this peformance issue:

Steps to Reproduce the issue

1. create some segmentation
2. hold the mouse pressed down and draw a second circle

Expected behavior: (What you expected to happen) smooth drawing

Actual behavior: (What actually happened) pauses, about half a second on my machine This is a real problem because if I am drawing a segmentation and a pause happens the segmentation is not done correctly and has to be corrected. This happens with all segmentation tools and is aggravated when there is already some segmentation on the screen.

[vsaase]

on investigating this I found two things that are inefficient :

• getLabelmapCanvas is called for every draw and allocates a new image which is then garbage collected. It should be possible to save this pixel array somewhere and reuse it. What would be the best object to store this in?
• renderSegmentationOutline does a lot of computations which could be optimised, maybe even in a wasm module. outlines could also be computed while iterating the array in the getLabelmapCanvas.

[vsaase]

here is an example of how to speed up the segmentation drawing with caching the canvas element: https://github.com/vsaase/cornerstoneTools/tree/vsaase_segmentationlag This is not ready to be merged, at the moment it breaks the brush tool and does not work with segmentation outlines. Similar caching could be done with the outlines. Any suggestions? Are there preferred ways to implement it?

[faustmann]

@vsaase Thank you for investigating this issue. I also depend on it. Although I started to use this library just recently if there is anything I can help please let me know.