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">
    <a
      href="https://github.com/Kitware/vtk-wasm/blob/main/docs/public/demo/viewer-basic.html"
      target="_blank"
      rel="noopener noreferrer"
      style="position: fixed; top: 12px; right: 12px; z-index: 9999; padding: 6px 12px; background: #1a1a1a; color: #fff; font: 600 12px/1.4 -apple-system, system-ui, sans-serif; text-decoration: none; border-radius: 6px; border: 1px solid #333; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);"
      >View source on GitHub</a
    >
    <div id="viewer"></div>
    <script>
      vtkWASMViewer.createViewerAsync(
        "#viewer",
        "/vtk-wasm/data/bike-export.wazex",
        "https://raw.githack.com/Kitware/vtk-wasm/dist/latest/vtk-wasm32-emscripten.tar.gz",
        {
          rendering: "webgl", // 'webgpu'
        },
      );
    </script>
  </body>
</html>

The createViewerAsync 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