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.