feat(rendering): Implement MIP_LABELMAP_BLEND mode for enhanced labelmap visualization

[sedghi]

Context

This PR introduces a new blend mode for rendering labelmaps in the Maximum Intensity Projection (MIP) mode, called MIP_LABELMAP_BLEND. This mode renders the labelmap segment edges, making them visible in the MIP rendering. It's particularly beneficial for medical imaging applications.

The new blend mode leverages the recently implemented independent components feature in the volume rendering pipeline.

Here's a comparison of labelmap rendering in MIP:

Without the new blend mode:

With the new blend mode:

The new blend mode offers more compelling information for users, similar to advanced visualization softwares. I can privately provide videos demonstrating one such software rendering the same functionality.

Results

You can run the new example below

npm run example LabelmapMIP

And you can switch between blendmodes (at line 38) to see the above effect.

The new blend mode has been tested with labelmaps, rendering labelmap segment edges visible in MIP rendering.

Key points:

1. This blend mode only functions when:

   • The volume rendering pipeline uses independent components.
   • The labelmap is set as the second component.

2. Algorithm overview:

   • The fragment shader samples the labelmap texture.
   • It checks if the current fragment is on a labelmap segment edge.
   • Edge fragments are rendered with a distinct color.
   • Segment outline thickness is configurable via texture.
   • The algorithm is optimized to avoid unnecessary computations for non-edge fragments.

3. Implementation evolution:

   • Initially used a boolean array to track seen segments.
   • Encountered significant performance issues with dynamic indexing.
   • Switched to a bitmask for segment tracking, greatly improving performance.

Changes

• A new blend mode MIP_LABELMAP_BLEND was added to the constants

• A new path was added to the vtkVolumeFS shader to handle the new blend mode

• Documentation and TypeScript definitions were updated to match those changes

PR and Code Checklist

• semantic-release commit messages
• Run npm run reformat to have correctly formatted code

Testing

• This change adds or fixes unit tests
• Tested environment:
  • vtk.js: latest
  • OS: macOS 14.5 (23F79)
  • Browser: Version 126.0.6478.183 (Official Build) (arm64)

[finetjul]

From your screen shots, it seems that the name of the mode shouldnt be labelmap_blend but more labelmap_edge or labelmap_contour. No?

[bruyeret]

Hello, thank you for the contribution!
The rendering looks very nice
Most of my comments are about style / refactor

[bruyeret]

Thanks! LGTM! @finetjul

[finetjul]

That's great, thanks @sedghi .
Can you do one more thing: please add a (compressed and with similar image size ratio) screenshot (or video) in the VTK.js example galery (Documentation/content/examples/index.md)? We recently managed to be exhaustive with all our examples, let's keep it in-sync with the code !

[sedghi]

@finetjul I guess i did what you requested

[finetjul]

Please use this GIF instead:

[finetjul]

Thanks! However, the purpose of a smaller gif is to reduce the size of the git repository, please do not create a separate commit, but squash it with the commit that introduce the gif.

[sedghi]

@finetjul Done

[finetjul]

LGTM

[github-actions]

🎉 This PR is included in version 31.2.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀