Appearance
VTK.wasm viewer data format
While the viewer provides a convinient solution for sharing visualizations, it is also important to provide a simple approach for capturing such a scene into a standalone file.
The trame.widget.vtklocal.VtkLocal widget provides a save(file_name) helper method that will ease such file creation. You can even see its usage within our trame examples. Once things stabilize, we may promote such method on the vtkObjectManager directly to ease access.
py
import sys
app = Clip()
if "--export" in sys.argv:
app.ctx.wasm_view.save("star-fighter.wazex")
app.server.start()html
<html>
<head>
<script src="https://unpkg.com/@kitware/trame-vtklocal@1.1.1/dist/umd/viewer.umd.js"></script>
</head>
<body style="margin: 0">
<div id="viewer"></div>
<script>
vtkWASMViewer.createViewer(
"#viewer",
"/vtk-wasm/data/star-fighter.wazex",
"/vtk-wasm/wasm32/latest",
{
rendering: "webgl",
},
);
</script>
</body>
</html>py
import sys
app = Pick()
if "--export" in sys.argv:
app.ctx.wasm_view.save("porsche.wazex")
# Print ids
print(f"render_window:", app.ctx.wasm_view.get_wasm_id(app.render_window))
print(f"renderer:", app.ctx.wasm_view.get_wasm_id(app.renderer))
print(f"property:", app.ctx.wasm_view.get_wasm_id(app.last_picked_property))
print(f"picker:", app.ctx.wasm_view.get_wasm_id(app.picker))
print(f"interactor:", app.ctx.wasm_view.get_wasm_id(app.interactor))
app.server.start()html
<html>
<head>
<script src="https://unpkg.com/@kitware/trame-vtklocal@1.1.1/dist/umd/viewer.umd.js"></script>
</head>
<body style="margin: 0">
<div id="viewer"></div>
<script>
vtkWASMViewer
.createViewer(
"#viewer",
"/vtk-wasm/data/porsche.wazex",
"/vtk-wasm/wasm32/latest",
{
rendering: "webgl",
},
)
.then((viewer) => {
// ------------------------------------------------------------
// enable picking in pure JS
// ------------------------------------------------------------
const renderWindow = viewer.remoting.getVtkObject(1);
const renderer = viewer.remoting.getVtkObject(3);
const property = viewer.remoting.getVtkObject(515);
const picker = viewer.remoting.getVtkObject(513);
const interactor = viewer.remoting.getVtkObject(509);
// ------------------------------------------------------------
let pickingPending = false;
let lastActor = null;
async function pick() {
if (pickingPending) {
return;
}
try {
pickingPending = true;
const pos = interactor.state.eventPosition;
const found = await picker.pick(
[...pos, 0],
renderer,
);
if (found) {
if (lastActor) {
(await lastActor.getProperty()).deepCopy(
property,
);
}
lastActor = await picker.getActor();
const actorProp = await lastActor.getProperty();
await property.deepCopy(actorProp);
await actorProp.setColor(1, 0, 1);
await actorProp.edgeVisibilityOn();
}
await renderWindow.render();
} finally {
pickingPending = false;
}
}
interactor.observe("MouseMoveEvent", pick);
});
</script>
</body>
</html>