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