Recreate 3D volume rendering from vtk python to vtk.js

Hello everyone,

I was able to render a 3d Volume from 2D png image stack using vtk python. I want to create the same thing with vtk.js. Can anyone please guide me how to do that. I would really appreciate any help.
Mostly i have issue understanding how can I do this in vtk.js

files=glob.glob(r"/filePath/vtk2-example"+r"/*.png")
filePath = vtk.vtkStringArray()
files.sort(key=lambda x: int(’’.join(filter(str.isdigit, x))))
filePath.SetNumberOfValues(len(files))
for i in range(0,len(files),1):
filePath.SetValue(i,files[i])
reader = vtk.vtkPNGReader()
reader.SetFileNames(filePath)
reader.SetDataSpacing(2,2,2)
reader.Update()

vtk.js mostly focus on rendering. So either you can pre-process your data and ship your 3D data as a 1D array to create and render a vtkImageData on the client side.

Another approach could be to use itk.js to read the png stack and convert it to a vtkImageData all on the client side (JS/wasm).

A third solution could be to create a WASM based application using a C++ code using VTK but compiled to run in a browser environment.

Hello Sebastien,

Thank you so much for your reply. Is it possible that I read the imgestack in python and write it to a .vti file. I am really sorry I am new to this. I also want to try the 1st approach. So current i have the 3D volume being rendered in python. So now how can I ship 3D data as a 1D array?
Here is the code snippet:
volume = vtk.vtkVolume()
volume.SetMapper(volumeMapper)
volume.SetProperty(volumeProperty)
ren = vtk.vtkRenderer()
ren.AddVolume(volume)
ren.SetBackground(0, 0, 0)
print(ren)
renWin = vtk.vtkRenderWindow()
renWin.AddRenderer(ren)
renWin.SetSize(900, 900)
More precisesly since the ren object has the information about the 3d volume data, do i use this object to write to the 1d Array. if you can show me a code snippet that would be really awesome.

Best Regards

Depending on what you plan to use as server, you can do something like this using dash-vtk or if you directly have a vtkImageData from the PNG stack, you can do that.

They are other solutions but as a beginner, that might be the simplest path.

Thank you Sebastien, let me try it!

Hello Sebastien, also I am using ruby on rails as server and have integrated webpack, so that I can integrate vtk.js on it for rendering. The only issue is reading the imagestack.