VTK for LiaScript: 3D Scientific Visualization Powered by VTK.js

Scientific and engineering visualization often requires three dimensions. Volume rendering, isosurfaces, 3D mesh views, medical imaging data — these cannot be adequately represented in 2D plots.

The VTK template brings VTK.js to LiaScript. VTK.js (Visualization Toolkit JavaScript) is a WebGL-based port of the industry-standard Visualization Toolkit by Kitware. It allows rendering of 3D geometries, volume data, and interactive scientific scenes directly in the browser.

Quick Start

<!--
import: https://raw.githubusercontent.com/liaTemplates/vtk/master/README.md
-->

Four macros cover editable code blocks (@VTK.eval), run-only blocks (@VTK.run), and dataset loading (@VTK.load, @VTK.loadIframe).

Macro 1: @VTK.eval(divId) — Editable VTK Code

@VTK.eval(divId) is attached at the end of a JavaScript code block. The block is rendered in a 500px-tall 3D canvas, identified by the divId. Students can modify the code and re-run.

The key pattern: use document.getElementById("divId") to get the container, then build a VTK scene using the vtk.* namespace.

```js
var view = document.getElementById("demo_cone");
var renderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance({
    rootContainer: view,
    containerStyle: { height: '100%', overflow: 'hidden' },
    background: [0.1, 0.1, 0.2]
});

var actor  = vtk.Rendering.Core.vtkActor.newInstance();
var mapper = vtk.Rendering.Core.vtkMapper.newInstance();
var source = vtk.Filters.Sources.vtkConeSource.newInstance({ resolution: 60 });

actor.setMapper(mapper);
mapper.setInputConnection(source.getOutputPort());
actor.getProperty().setColor(0.4, 0.7, 1.0);

var r = renderer.getRenderer();
r.addActor(actor);
r.resetCamera();
renderer.getRenderWindow().render();
```
@VTK.eval(demo_cone)

Macro 2: @VTK.run(divId) — Static Rendering

@VTK.run(divId) is used in the fence opener. The code block is not shown to students — only the 3D canvas appears. Use this for illustrations that students observe rather than modify.

```js @VTK.run(sphere_demo)
var view = document.getElementById("sphere_demo");
var renderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance({
    rootContainer: view,
    background: [0.05, 0.05, 0.1]
});

var actor  = vtk.Rendering.Core.vtkActor.newInstance();
var mapper = vtk.Rendering.Core.vtkMapper.newInstance();
var sphere = vtk.Filters.Sources.vtkSphereSource.newInstance({ thetaResolution: 60, phiResolution: 60 });

actor.setMapper(mapper);
mapper.setInputConnection(sphere.getOutputPort());
actor.getProperty().setColor(0.9, 0.5, 0.2);

renderer.getRenderer().addActor(actor);
renderer.getRenderer().resetCamera();
renderer.getRenderWindow().render();
```

Macro 3: @VTK.load(url) — Load a VTI Dataset

@VTK.load(url) loads a VTK Image Data (.vti) file and renders it as a volume. This is the macro for medical imaging, CT scan, and scientific volume data visualization.

@VTK.load(https://data.kitware.com/api/v1/file/58e665158d777f16d095fc2e/download)

The volume is rendered with a transfer function (color and opacity mapping) that maps data values to visual properties.

Macro 4: @VTK.loadIframe(url) — Embed a VTK Viewer

@VTK.loadIframe(url) embeds the Kitware VolumeViewer application in an iframe with a given dataset URL.

@VTK.loadIframe(https://kitware.github.io/vtk-js-datasets/data/vti/head-binary-zlib.vti)

Available VTK.js Primitives

VTK.js exposes the full VTK pipeline model via the vtk.* namespace:

Full Template Demo

Use Cases

Engineering education — Visualize 3D mechanical parts, stress tensors, and flow fields. The VTK pipeline model (source → filter → mapper → actor) mirrors how professional engineering visualization tools work.

Medical and bioscience courses — Render volumetric CT or MRI data with @VTK.load. Students see 3D anatomical structures and explore transfer functions interactively.

Computer graphics courses — Teach rendering pipelines, shading, actor properties, and camera positioning using a real-world 3D visualization API.

Scientific computing — Visualize simulation results: temperature fields, pressure distributions, particle trajectories.

Technical Facts

Try It

Related Templates

• JSCAD — parametric 3D CAD modeling with JavaScript
• p5js — 2D canvas-based creative coding
• Vega — 2D data charts and statistical visualizations
• mec2 — 2D mechanical linkage and physics simulation