VTK.wasm viewer

Thanks to VTK.wasm we are getting close to full parity with what is available in VTK C++ and therefore we can create viewers that display scenes equivalent to what you can produce with ParaView or VTK.

The code snippet available below show you how you can embed a static 3D scene inside a web page.

html

<html>
  <head>
    <link
      rel="stylesheet"
      href="https://unpkg.com/@kitware/vtk-wasm/viewer.css"
    />
    <script src="https://unpkg.com/@kitware/vtk-wasm/viewer-umd.js"></script>
  </head>
  <body style="margin: 0">
    <div id="viewer"></div>
    <script>
      vtkWASMViewer.createViewer(
        "#viewer",
        "/vtk-wasm/data/bike-export.wazex",
        "https://gitlab.kitware.com/api/v4/projects/13/packages/generic/vtk-wasm32-emscripten/9.5.20251215/vtk-9.5.20251215-wasm32-emscripten.tar.gz",
        {
          rendering: "webgl", // 'webgpu'
        },
      );
    </script>
  </body>
</html>

The createViewer method give you the opportunity to fill a DOM element using a selector and the path of the data to load. Additionally, you can provide the path to the WASM library to load unless it is imported as a script. Finally, you can configure your running by setting the rendering backend and execution mode.

Below is the result of the code above.

VTK.wasm viewer ​

VTK.wasm viewer