Skip to content

GitLab

Closed
Created by Ming Jin@mjin_origen

Loading .vtp file after compiling with Emscripten

Hi,

I am trying to compile some code for loading and rendering .vtp files into WebAssembly. I have been experimenting on the following example:
https://vtk.org/Wiki/VTK/Examples/Cxx/IO/ReadPolyData
It's been adapted as following to work with WebGL.

ReadPolyData.cxx

#include "vtkXMLPolyDataReader.h"
#include "vtkSmartPointer.h"
#include "vtkPolyDataMapper.h"
#include "vtkActor.h"
#include "vtkRenderer.h"
#include "vtkSDL2OpenGLRenderWindow.h"
#include "vtkSDL2RenderWindowInteractor.h"

int main ( int argc, char *argv[] )
{
  using namespace std;
  string filename = "./Torso.vtp";

  // Read all the data from the file
  vtkSmartPointer<vtkXMLPolyDataReader> reader =
    vtkSmartPointer<vtkXMLPolyDataReader>::New();
  reader->SetFileName(filename.c_str());
  reader->Update();
  
  // Visualize
  vtkSmartPointer<vtkPolyDataMapper> mapper =
    vtkSmartPointer<vtkPolyDataMapper>::New();
  mapper->SetInputConnection(reader->GetOutputPort());

  vtkSmartPointer<vtkActor> actor =
    vtkSmartPointer<vtkActor>::New();
  actor->SetMapper(mapper);

  vtkSmartPointer<vtkRenderer> renderer =
    vtkSmartPointer<vtkRenderer>::New();
  vtkSmartPointer<vtkSDL2OpenGLRenderWindow> renderWindow =
    vtkSmartPointer<vtkSDL2OpenGLRenderWindow>::New();
  renderWindow->AddRenderer(renderer);
  vtkSmartPointer<vtkSDL2RenderWindowInteractor> renderWindowInteractor =
    vtkSmartPointer<vtkSDL2RenderWindowInteractor>::New();
  renderWindowInteractor->SetRenderWindow(renderWindow);

  renderer->AddActor(actor);
  renderer->SetBackground(.3, .6, .3); // Background color green

  renderWindow->Render();
  renderWindowInteractor->Start();

  return EXIT_SUCCESS;
}

The index.html and CMakeLists.txt are based on the example here: https://gitlab.kitware.com/vtk/vtk/-/tree/master/Examples/Emscripten/Cxx/Cone

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
    <canvas id="canvas" style="position: absolute; left: 0; top: 0;"></canvas>
    <script type="text/javascript" src="ReadPolyData.js"></script>
    <script type='text/javascript'>
      var Module = {
        canvas: (function() {
          var canvas = document.getElementById('canvas');
          canvas.addEventListener(
            "webglcontextlost",
            function(e) {
              console.error('WebGL context lost. You will need to reload the page.');
              e.preventDefault();
            },
            false
          );
          return canvas;
        })(),
        onRuntimeInitialized:  function() {
          console.log('initialized');
        },
      };

      // Use the export name to instantiate the app
      var app = ReadPolyData(Module);
      console.log('App created');
    </script>
  </body>
</html>

CMakeLists.txt

cmake_minimum_required(VERSION 3.13)
project(ReadPolyData)

# -----------------------------------------------------------------------------
# EMSCRIPTEN only
# -----------------------------------------------------------------------------

if (NOT EMSCRIPTEN)
  message("Skipping example: This needs to run inside an Emscripten build environment")
  return ()
endif ()

# -----------------------------------------------------------------------------
# Handle VTK dependency
# -----------------------------------------------------------------------------

find_package(VTK
  COMPONENTS
    IOXML               # vtkXMLPolyDataReader
    FiltersSources      # VTK pipeline
    InteractionStyle    # Mouse handling
    RenderingOpenGL2    # For Rendering
    RenderingUI         # For SDL2 Window
)

if (NOT VTK_FOUND)
  message("Skipping example: ${VTK_NOT_FOUND_MESSAGE}")
  return ()
endif ()

# -----------------------------------------------------------------------------
# WebAssembly build options
# (-s) https://github.com/emscripten-core/emscripten/blob/master/src/settings.js
# -----------------------------------------------------------------------------

set(emscripten_options)
list(APPEND emscripten_options
  "--bind"
  "-g3"
  "-O3"
  "SHELL:-s EXPORT_NAME=ReadPolyData"
  "SHELL:-s MODULARIZE=1"
  "SHELL:-s ALLOW_MEMORY_GROWTH=1"
  "SHELL:-s DEMANGLE_SUPPORT=1"
  "SHELL:-s EMULATE_FUNCTION_POINTER_CASTS=0"
  "SHELL:-s ERROR_ON_UNDEFINED_SYMBOLS=0"
  "SHELL:-s USE_PTHREADS=0"
  "SHELL:-s WASM=1"
  "SHELL:-s EXTRA_EXPORTED_RUNTIME_METHODS=\"['ccall', 'cwrap']\""
  "SHELL:-s ENVIRONMENT=web"
)

# -----------------------------------------------------------------------------
# Compile example code
# -----------------------------------------------------------------------------

add_executable(ReadPolyData ReadPolyData.cxx)

target_link_libraries(ReadPolyData
  PRIVATE
    VTK::FiltersSources
    VTK::InteractionStyle
    VTK::RenderingOpenGL2
    VTK::RenderingUI
    VTK::IOXML
)

target_compile_options(ReadPolyData
  PUBLIC
    ${emscripten_options}
)

target_link_options(ReadPolyData
  PUBLIC
    ${emscripten_options}
)

# -----------------------------------------------------------------------------
# VTK modules initialization
# -----------------------------------------------------------------------------

vtk_module_autoinit(
  TARGETS  ReadPolyData
  MODULES  ${VTK_LIBRARIES}
)

# -----------------------------------------------------------------------------
# Copy HTML to build directory
# -----------------------------------------------------------------------------

add_custom_command(
  TARGET ReadPolyData
  COMMAND
    ${CMAKE_COMMAND} -E copy_if_different
      "${CMAKE_CURRENT_SOURCE_DIR}/index.html"
      $<TARGET_FILE_DIR:ReadPolyData>
  COMMAND
    ${CMAKE_COMMAND} -E copy_if_different
      "${CMAKE_CURRENT_SOURCE_DIR}/Torso.vtp"
      $<TARGET_FILE_DIR:ReadPolyData>
)

Simply placing the .vtp file under the build folder doesn't work: the compiled module cannot find it. Do you have any suggestions as for how to handle this? Thanks!

Edited by Ming Jin