Is there a way to apply gamma correction in VTK.js?

Hi all,
I am wondering if there is a way to apply the gamma correction function in VTK.js? and also trying to figure out whether it is possible to apply a z-axis plane slider for the 3D viewer.

I mean to say, I have successfully built a 3D volume viewer with the help of the vtk.js library now I was thinking to add x, y, and z slice sliders inside the same viewer to manipulate the 3D rendered image. Is it possible? And hint?

For your slice sliders in the 3D view, you can look at the MultiSliceImageMapper example.

As for gamma correction, what are you looking to do exactly?

When you say x, y, z slice sliders, do you mean sliders for cropping the rendered volume? or to render 2D slice planes in the same 3D view? In case of the latter, note that currently vtk-js doesn’t have depth peeling (order independent transparency) and so the mixing of slices and the semi-transparent volume may not blend correctly.

I was trying to do something like this one, but after reading your above comment I think currently, it’s not possible to implement that feature right?

Thank you!

That looks like what @jadh4v mentioned with the sliders cropping the rendered volume. You can look at the VolumeClipPlane example to achieve this functionality, or the ImageCropFilter.


Thank you for the reply. Yeah, I think I can use ImageCropFilter to achieve that feature :grinning:.

In an earlier post, you asked me what I am looking to do with gamma correction. I will share with you another two small videos one from napari and another from the viewer which I am building.

napari_4_CLSM_image (2.9 MB)

As you can see in the above napari video, where I can play with gamma to adjust the light in the rendered image and the image becomes super sharp which I want. Therefore, I was wondering whether I can apply the same in web viewer using vtk.js or not.

I also have another question, when I load the same image in napari the image is so dynamic/sharp and when I load the same image in my viewer it seems that the color is not intensified properly? Or it’s related to color transfer function? Currently, I am passing Color_map_vol.js (1.6 MB) this color map (which I took from matplotlib) to color transfer function.

Do you have any suggestions to improve the above-rendered image or to make the image sharp?

Thank you!

1 Like

vtk.js does not have gamma correction, but it appears that napari implements this by applying the gamma correction to a linear colormap. This can be done in vtk.js by updating the colormap with gamma-corrected color channels.

As for sharpness and color, that would depend on whether you are using the same colormap, the sample distance, opacity function, and potentially other properties.