Why the quality of volume rendering in vtk.js is so much worse than in native vtk?


I really appreciate the work done in porting vtk to the web and I hope vtk.js project will flourish in the future. However, currently, there is a great gap in the quality of volume rendering between native vtk and vtk.js. The same volume with the same preset rendered in Slicer3D

and vtk.js vtkjs-webgl.

So I have the following questions. Is it still a work in progress in improving the quality of volume rendering in vtk.js? Are there any WebGL API limitations so that it wouldn’t be possible to achieve comparable quality? Does the WebGPU have similar limitations to WebGL?

Best regards,

It was also my mistake. I double-checked the code and now I enabled shade in vtk.js: vtkjs-webgl-with-shade

For completeness image from Slicer without shade:

Still, there are some weird dots artefacts in vtk.js. Is there any way to minimize it?

Best regards,

The dot artifacts likely have to do with sampling distance. Check out the sampleDistance property on the VolumeMapper.

That’s right, thank you very much! I chose 0.2 sampling distance and got much better quality. As far as I understood vtk.js mapper supports adaptive quality (sample distance, maybe?), but now I feel slightly some lag when rotating a volume. Is there any way I can set expected fps for interactions?

Best regards,

I believe there is some downsampling (i.e. higher sampling distance) that can occur on interaction, which can help with rendering while interacting. I’m not sure how to set it explicitly. I would let @ken-martin on that if needed.

You can set the desiredUpdateRate and desiredStillUpdateRate as desired. vtk.js will downsample to try to maintain the desiredupdaterate when interacting. You can play with those settings and the sample distance some to see the tradeoffs.

Those rates are on the renderWIndowInteractor.

Great, thank you for your help!