How can I render volume with vtk webAssembly

Support
1

I’m trying to render a volume using vtk webAssembly, but it doesn’t work. I would like to know if vtk webAssembly supports volume rendering, and if not, do I have any alternatives?

2

Yup, that doesn’t work right now. We expect to fix the shaders, soon.

3

Can you share any errors/example code so as to help a developer contribute a fix?

4

Thanks for your reply. Here’s my code, hope that helps!
example code:

#include <vtkCamera.h>
#include <vtkNIFTIImageReader.h>
#include <vtkProperty.h>
#include <vtkRenderWindow.h>
#include <vtkRenderWindowInteractor.h>
#include <vtkRenderer.h>
#include <vtkSmartVolumeMapper.h>
#include <vtkVolume.h>
#include <vtkVolumeProperty.h>
#include <vtkAutoInit.h>
#include <vtkSmartPointer.h>
#include <vtkImageData.h>

VTK_MODULE_INIT(vtkRenderingOpenGL2)
VTK_MODULE_INIT(vtkInteractionStyle)
VTK_MODULE_INIT(vtkRenderingFreeType)
VTK_MODULE_INIT(vtkRenderingVolumeOpenGL2)

int main(int argc, char* argv[])
{
    vtkRenderer *renderer = vtkRenderer::New();
    vtkRenderWindow *renWin = vtkRenderWindow::New();
    vtkRenderWindowInteractor *iren = vtkRenderWindowInteractor::New();

    renWin->AddRenderer(renderer);
    iren->SetRenderWindow(renWin);

    vtkVolume *prop = vtkVolume::New();
    vtkSmartVolumeMapper *mapper = vtkSmartVolumeMapper::New();
    vtkVolumeProperty *volumeProperty = vtkVolumeProperty::New();

    mapper->SetBlendModeToComposite();

    prop->SetMapper(mapper);
    prop->SetProperty(volumeProperty);

    vtkNIFTIImageReader *reader = vtkNIFTIImageReader::New();
    reader->SetFileName("/dataTest/test.nii");
    reader->Update();

    mapper->SetInputData(reader->GetOutput());
    mapper->Modified();

    renderer->AddVolume(prop);
    renderer->ResetCamera();
    renderer->GetRenderWindow()->Render();

    iren->Initialize();
    iren->Start();

    return 0;
}

The cmake file comes from https://gitlab.kitware.com/vtk/vtk/-/tree/master/Examples/Emscripten/Cxx/Cone ,and the different part like this.

project(VR)

# -----------------------------------------------------------------------------
# Handle VTK dependency
# -----------------------------------------------------------------------------

find_package(VTK
  COMPONENTS
    FiltersSources      # VTK pipeline
    InteractionStyle    # Mouse handling
    RenderingOpenGL2    # For Rendering
    RenderingUI         # For SDL2 Window
    InteractionWidgets
    RenderingVolume
    RenderingVolumeOpenGL2
    RenderingFreeType
    RenderingCore
    InteractionStyle
)



if (NOT VTK_FOUND)
  message("Skipping example: ${VTK_NOT_FOUND_MESSAGE}")
  return ()
endif ()

# -----------------------------------------------------------------------------
# Compile example code
# -----------------------------------------------------------------------------

add_executable(VR VR.cxx)

target_link_libraries(VR
  PRIVATE
    VTK::FiltersSources
    VTK::InteractionStyle
    VTK::RenderingOpenGL2
    VTK::RenderingUI
    VTK::InteractionWidgets
    VTK::RenderingVolume
    VTK::RenderingVolumeOpenGL2
    VTK::RenderingFreeType
    VTK::RenderingCore
)

# -----------------------------------------------------------------------------
# WebAssembly build options
# -----------------------------------------------------------------------------
set(emscripten_link_options)
set(emscripten_compile_options)

list(APPEND emscripten_link_options
  "-lembind"
  "SHELL:-s WASM=1"
  "SHELL:-s MODULARIZE=1"
  "--preload-file=em-preloaded-data@/dataTest"
)

Now I can compile successfully, but the rendering failed，and gives the following error：

[.WebGL-00000A3C0A8D8000] GL_INVALID_OPERATION: Invalid combination of format, type and internalFormat.

image

5

Is there any other way I can render volume on a web?

6

Is there any other way I can render volume on a web?

Yes. Please see Volume | vtk.js

8

Thank you. I’ll try it.

9

GLES/WebGL is very strict about the combination of formats but VTK’s TextureInternalFormats conversion table is not. For now converting the input image data type to float (e.g. using vtkImageCast) should work.
I’ll try to extend TextureInternalFormats to support wasm when I find time. If anyone wants to help please ping me