Unable to Load big VTI files in VTK.JS

Hi, I’m trying to load VTI files with size around 700MB. The error screenshot is attached for reference. The loading is tried with online VolumeViewer example (https://kitware.github.io/vtk-js/examples/VolumeViewer/VolumeViewer.html) and another one locally developed following the online example. The browser used is Chrome (Version 97.0.4692.71).

image

Can you share your data? What is the dimensions (512 x 512 x 512) of your volume and type of field (float32, float64, …)?

Hi, my volume dimensions are 690 x 550 x 990 and the field type is unsigned int32. It’ll not be possible for sharing the data. Now I’m able to load it in Mozilla Firefox browser. Chrome is still having issue. However, with firefox as well I’m facing issue with volume files of size greater than ~850MB. Any suggestions what can I do here ?

Did you try various version of vti encoding to reduce some decoding burden to see if that helps?

The issue is most likely a browser limitation. Other format can maybe offer ways to reduce any overhead that could lead to allocation issue within browser.

HTH,

Seb

Hi Seb, actually the vti file source is not in my control. I have to handle the data whatever is received. If it’s a browser limitation which most likely is then can I do something on implementation to render big images ?

If you are getting close to the browser limit, the only thing you can do, is to prevent unnecessary data conversion and reallocation. That’s why I was asking if you could change the format to something with less overhead for the web.

I tried to reduce the object copies in my application but not much improvement. One thing I observed is that during that image loading the application takes up to 6 times memory of the size of the vti file and after few minutes it got stable to 2.5 to 3 times memory usage of vti file size. Same was observed with the online VolumeViewer example application. I’m still exploring what is consuming this much memory.

Just for update on last status. We are rewriting the XML reader API as per our requirement as there were multiple data copies were created. Till now we are able to load 1GB of image with our XML reader. It’s not complete replacement of internal VTK XML reader but includes only the functionalities required by us.

I’m glad you managed to streamline the XML reader for your usage to remove as much overhead as you could.

If what you are trying to do client side is becoming too limiting, you might be interested at looking at trame to allow either server side processing and/or rendering.

Thanks @Sebastien_Jourdain will try that.

I tried trame and able to load and render images. I wanted to know if I can merge existing VTK.JS bases application with it. We had created one application there and then moved to trame for POC. Instead of developing whole application again we are planning if merging is possible. I found this link but getting error in importing “js_call” module.

I have following queries:

  1. Should we merge VTK.JS with trame
  2. If yes then can anyone refer to some guide for same

How is your current vtk.js application built?

  1. Vanilla JavaScript
  2. Vue.js version 2
  3. React, Angular, Vue3…

How much GUI do you have? Which widget library are you using? What kind of visualization were you doing with vtk.js? …

With little to no knowledge of your code base it is hard to advice one way or another. All of the paths are possible. It is just a matter of finding the one that make sense.

Are you sure that trame is the way to go for you? Do you understand the deployment constraints?

If need be Kitware can help in those decisions and even development. Between an NDA and a support contract we can really help you to choose the best path for your needs while properly understanding the possible drawback or limitations of those choices.

I’m using Vanilla JavaScript for developing a reusable library for our application. On the GUI side I will be doing rendering with other common operations like zooming, panning, measurements, cropping, color filtering etc. I had implemented various functionalities in JavaScript but faced issue with big images and image quality. So. I tried trame as per suggestion for PoC. I’m still analyzing the difference to decide the way ahead.

It is still hard to tell with the information provided but it sounds like it won’t be a smooth transition as things will start shifting to the server side and your JS code will be useless at that point.

Thanks for help. Will be checking more details of both framework i.e. VTK.JS and VTK Trame to decide which will be more suitable for me.