Skip to content

Draft: Automatically generate JavaScript wrappers

Addresses #19008

Here are the sizes for fully optimized binaries:

image

This MR uses automated wrapping infrastructure of the VTK::WrappingTools module to programatically generate javascript wrappers for all wasm-able VTK C++ modules. The generated wrappers use embind (the wrapping component of Emscripten). See vtkModuleWrapJavaScriptExclusions.cmake for header files and modules that are excluded from the automated wrapping process. A majority of Common, Domains, Filters, IO, Imaging, Interaction and Rendering modules are wrapped.

See Examples/JavaScript for usage. It shows how to use VTK C++ readers in JS and sets up a rendering pipeline.

Needs work:

  1. Some C++ classes are not derived from vtkObject and do not have public destructor. These are listed in vtkModuleWrapJavaScriptExclusions.cmake.
  2. Templated classes like vtkColor, vtkTuple, vtkVector.
  3. All function overloads with the same number of arguments are not exposed. Currently the most recently declared signature takes precedence. See !10282 (comment 1388407)
  4. Virtual and pure virtual functions. (If a use case arises)

All of the above are addressable. Need more time.

Usage:

  1. WebGL rendering
import { initializeVTKForRenderingWithWebGL } from './vtkWasmCanvas.js'
import VTKWebAssemblyModule from './vtkweb.js'
// Acquire a VTK WebGL configuration.
let vtkCfg = await initializeVTKForRenderingWithWebGL();
// Stream and compile VTK.wasm binary
let vtk = await VTKWebAssemblyModule(vtkCfg);
// Access vtk symbols through vtk.
let actor = new vtk.vtkActor();
  1. WebGPU rendering
import { initializeVTKForRenderingWithWebGPU } from './vtkWasmCanvas.js'
import VTKWebAssemblyModule from './vtkweb.js'
// Acquire a VTK WebGPU configuration.
let vtkCfg = await initializeVTKForRenderingWithWebGPU(
  /*powerPreference=*/null,
  /*deviceDescriptor=*/{ requiredLimits: { maxBufferSize: 1024000000 } }
);
// Stream and compile VTK.wasm binary
let vtk = await VTKWebAssemblyModule(vtkCfg);
// Access vtk symbols through vtk.
let actor = new vtk.vtkActor();
  1. No rendering
import VTKWebAssemblyModule from './vtkweb.js'
// Stream and compile VTK.wasm binary
let vtk = await VTKWebAssemblyModule(
{
  // pipes stdout to info in dev console.
  print: (text) => { console.info(text); },
  // pipes stderr to error in dev console.
  printErr: (text) => { console.error(text); },
});
// Access vtk symbols through vtk.
let polydataCleaner = new vtk.vtkCleanPolyData();
Edited by Jaswant Panchumarti (Kitware)

Merge request reports