What’s New in VTK-wasm

Scientific and engineering visualization workflows have increasingly moved to the web. Developers are building applications with frameworks such as trame, Jupyter, and Panel that allow users to explore data directly in the browser while computationally intensive processing remains on the server.

As these workflows continue to evolve, developers need efficient ways to deliver responsive 3D visualization without redesigning their applications from the ground up. VTK-wasm addresses this challenge by bringing the VTK C++ library to the browser through WebAssembly. It supports standalone applications where data and rendering live entirely on the client. It also supports client-server architectures where rendering happens locally in the browser while data is streamed from remote compute resources.

Why Bring VTK to the Browser?

VTK-wasm makes it possible to deliver complex visualization applications through a URL. Applications can be portable, sandboxed, and run without requiring users to install a desktop application.

vtk.js is a reimplementation of VTK in JavaScript. VTK-wasm takes a different approach by using the VTK C++ library. Filters, readers, and rendering capabilities are compiled with Emscripten so they can run in the browser through WebAssembly.

VTK-wasm supports two types of sessions. In a standalone session, VTK objects live entirely in the browser and no server is involved. In a remote session, VTK objects in the browser mirror a server-side pipeline such as one built with trame.

Starting with VTK 9.6+, VTK_WRAP_SERIALIZATION can generate serialization helpers for VTK C++ classes, including custom classes.

Watch VTK-wasm in Action

The What’s New in VTK-wasm webinar explores the core architecture behind VTK-wasm and demonstrates several ways to use it for browser-based visualization. Jaswant Panchumarti and Alessandro Genova cover standalone browser applications, client-side rendering with trame, and bringing VTK C++ applications to the browser.

The webinar also includes live demonstrations and a look at the VTK-wasm roadmap.

Build Standalone Applications with TypeScript

VTK-wasm provides a JavaScript and TypeScript entry point for building standalone web applications.

These applications use full VTK class names and a pipeline model similar to C++ and Python. They run entirely on the client and can be deployed as static sites.

Developers can install VTK-wasm with npm i @kitware/vtk-wasm. The pre-built WebAssembly binary is fetched at runtime and cached by the browser. The binary is approximately 12–15 MB.

VTK-wasm also supports generating TypeScript definitions for the WebAssembly bundle used by an application. The gen-types command creates a TypeScript module-augmentation file that makes session.vtk fully typed for the exact VTK-wasm binary being loaded.

Using the same bundle for type generation and runtime keeps the generated types aligned with the VTK version and architecture in use. IDEs with IntelliSense can also suggest possible method names.

Move trame Rendering to the Client

Python and trame developers can use VTK-wasm through trame-vtklocal.

The vtklocal.LocalView component mirrors a server-side vtkRenderWindow and the pipeline attached to it. Instead of sending pixels to the client, the application sends the geometry and state of the pipeline.

Rendering then happens in the browser. The server processes geometry and synchronizes state but does not need a GPU.

Developers can get started with pip install trame-vtklocal.

Use wasm64 for Larger Datasets

The addressable memory limit of wasm32 is 4 GB. For larger datasets, trame can be configured to use wasm64.

LocalView accepts either wasm32 or wasm64 as its mode.

Use WebGPU for Scenes with Many Actors

When a scene contains many actors, trame can be configured to use WebGPU by setting the rendering option to webgpu. Developers can also use webgl to force the WebGL2 backend.

Additional improvements include support for WebXR and synchronization progress. Client-side memory reporting is available through the emit_memory=True flag for the LocalView constructor. VTK objects can also be accessed and modified in JavaScript using the getVtkObject method.

Bring VTK C++ Applications to the Browser

VTK-wasm also provides a path for bringing VTK C++ applications to the web.

The vtk-wasm-sdk now provides wasm32 and wasm64 libraries and headers in one Docker image. Image tags are versioned for weekly builds and official releases.

Source builds are also easier with CMake presets for:

• wasm32
• wasm64
• wasm32-testing
• wasm64-testing

These options support building VTK applications for both wasm32 and wasm64.

What’s Next for VTK-wasm?

The VTK-wasm roadmap includes broader module coverage. Data processing and I/O are joining rendering and 3D widgets in the marshalling infrastructure.

Shared libraries are another area of development. Dynamic module loading is planned for lighter WebAssembly bundles that ship only the VTK libraries an application needs.

Work is also continuing on the WebGPU rendering backend. Volume rendering, ambient occlusion, depth peeling, and shadow maps are being ported to use WebGPU.

Bring VTK-wasm to Your Application

If you are interested in using VTK-wasm for your application, contact Kitware to discuss how to get the best of VTK-wasm for your application.