# How can I render volume with vtk webAssembly

**URL:** https://discourse.vtk.org/t/how-can-i-render-volume-with-vtk-webassembly/13737
**Category:** Support
**Tags:** vtkwasm
**Created:** [April 18, 2024, 9:48am UTC](https://discourse.vtk.org/t/how-can-i-render-volume-with-vtk-webassembly/13737 "2024-04-18T09:48:16Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![leo](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/l/c2a13f/32.png) [@leo](https://discourse.vtk.org/u/leo)
#### Post date: [April 18, 2024, 9:48am UTC](https://discourse.vtk.org/t/how-can-i-render-volume-with-vtk-webassembly/13737/1 "2024-04-18T09:48:16Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![jaswantp](https://discourse.vtk.org/user_avatar/discourse.vtk.org/jaswantp/32/10046_2.png) [@jaswantp](https://discourse.vtk.org/u/jaswantp)
#### Post date: [April 18, 2024, 12:19pm UTC](https://discourse.vtk.org/t/how-can-i-render-volume-with-vtk-webassembly/13737/2 "2024-04-18T12:19:18Z")

</div>

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

---

<div class="post-metadata">

### Author: ![jaswantp](https://discourse.vtk.org/user_avatar/discourse.vtk.org/jaswantp/32/10046_2.png) [@jaswantp](https://discourse.vtk.org/u/jaswantp)
#### Post date: [April 18, 2024, 12:20pm UTC](https://discourse.vtk.org/t/how-can-i-render-volume-with-vtk-webassembly/13737/3 "2024-04-18T12:20:54Z")

</div>

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

---

<div class="post-metadata">

### Author: ![leo](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/l/c2a13f/32.png) [@leo](https://discourse.vtk.org/u/leo)
#### Post date: [April 19, 2024, 2:12am UTC](https://discourse.vtk.org/t/how-can-i-render-volume-with-vtk-webassembly/13737/4 "2024-04-19T02:12:43Z")

</div>

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

```auto
#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](https://gitlab.kitware.com/vtk/vtk/-/tree/master/Examples/Emscripten/Cxx/Cone) ,and the different part like this.

```auto
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：

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

```

![image](https://discourse.vtk.org/uploads/default/original/2X/6/606bbe27ef42634433d9673c12e2cadd58244da2.png)

---

<div class="post-metadata">

### Author: ![leo](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/l/c2a13f/32.png) [@leo](https://discourse.vtk.org/u/leo)
#### Post date: [April 19, 2024, 2:14am UTC](https://discourse.vtk.org/t/how-can-i-render-volume-with-vtk-webassembly/13737/5 "2024-04-19T02:14:37Z")

</div>

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

---

<div class="post-metadata">

### Author: ![jaswantp](https://discourse.vtk.org/user_avatar/discourse.vtk.org/jaswantp/32/10046_2.png) [@jaswantp](https://discourse.vtk.org/u/jaswantp)
#### Post date: [April 19, 2024, 1:05pm UTC](https://discourse.vtk.org/t/how-can-i-render-volume-with-vtk-webassembly/13737/6 "2024-04-19T13:05:14Z")

</div>

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

Yes. Please see [Volume | vtk.js](https://kitware.github.io/vtk-js/api/Rendering_Core_Volume.html)

---

<div class="post-metadata">

### Author: ![leo](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/l/c2a13f/32.png) [@leo](https://discourse.vtk.org/u/leo)
#### Post date: [April 22, 2024, 2:53am UTC](https://discourse.vtk.org/t/how-can-i-render-volume-with-vtk-webassembly/13737/8 "2024-04-22T02:53:00Z")

</div>

Thank you. I’ll try it.

---

<div class="post-metadata">

### Author: ![LucasGandel](https://discourse.vtk.org/user_avatar/discourse.vtk.org/lucasgandel/32/1831_2.png) [@LucasGandel](https://discourse.vtk.org/u/LucasGandel)
#### Post date: [May 26, 2025, 11:59am UTC](https://discourse.vtk.org/t/how-can-i-render-volume-with-vtk-webassembly/13737/9 "2025-05-26T11:59:36Z")

</div>

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
