VTK Unstructured Viewer JavaScript – VTU Parser & Unstructured Grid Toolkit

Pure‑JS toolkit for parsing, filtering, and exporting VTK Unstructured Grid (.vtu) data in Browser & Node.js.

✨ Features

• VTU parsing via vtkXMLUnstructuredGridReader (ASCII, binary, appended)
• VTK‑style classes for data processing: vtkThreshold, vtkImplicitCut, vtkClipByScalar, vtkCellDataToPointData
• Geometry extraction: extractBoundary(grid) → minimal polydata for WebGL
• Export: vtkUnstructuredGridToVTP for one‑call round‑trip back to ParaView
• Debugger utilities: VTKDebugger.analyzeUnstructuredGrid(grid), VTKDebugger.analyzePolyData(polydata)
• Serialization: serializeUnstructuredGrid / deserializeUnstructuredGrid and polydata equivalents
• Zero runtime deps (~12 kB gzip core + helpers)

📦 Installation

npm install vtk-unstructured-viewer

Requires Node.js 14+ or any evergreen browser (Chrome 60+, Firefox 55+, Safari 11+, Edge 79+).

🚀 Quick Start

1. Parse a VTU from an ArrayBuffer

import vtkXMLUnstructuredGridReader from 'vtk-unstructured-viewer/vtkUnstructuredGridReader.js';

// 1. Instantiate reader
const reader = new vtkXMLUnstructuredGridReader();

// 2. Load VTU file as ArrayBuffer
const buffer = await fetch('/data/mesh.vtu').then(r => r.arrayBuffer());

// 3. Parse binary content
await reader.parseAsArrayBuffer(buffer);

// 4. Access the unstructured grid
const grid = reader.grid;
console.log('Points:', grid.getPoints().getData().length / grid.getPoints().getNumberOfComponents());
console.log('Cells :', grid.getConnectivity().length);

Alternatively, you can fetch text and call await reader.parseAsText(xmlString) or await reader.setUrl(url) (fetch+parse).

🛠️ API Reference

vtkXMLUnstructuredGridReader

| Method | Description | | -------------------------------------- | --------------------------------- | | new vtkXMLUnstructuredGridReader() | Create reader instance | | await reader.parseAsArrayBuffer(buf) | Parse binary/appended VTU content | | await reader.parseAsText(text) | Parse ASCII VTU XML | | await reader.setUrl(url, opts) | Fetch & parse VTU from URL | | reader.grid | Instance of vtkUnstructuredGrid | | reader.setDataAccessHelper(helper) | Use custom fetch helper |

vtkUnstructuredGrid

| Method | Description | | ---------------------------------------------------------------------- | -------------------------------------------------------------- | | new vtkUnstructuredGrid() | Create empty grid | | setPoints({values,numberOfComponents,getData,getNumberOfComponents}) | Set vertex coordinates | | getPoints() | DataArray-like object (getData(), getNumberOfComponents()) | | setConnectivity(Uint32Array) | Cell‑to‑point connectivity | | getConnectivity() | Pair with getOffsets() and getTypes() | | setOffsets(Uint32Array) | Cell offsets | | getOffsets() | ― | | setTypes(Uint8Array) | VTK cell type codes | | getTypes() | ― | | setFacesConnectivity(Uint32Array) | Polyhedron face connectivity | | getFacesConnectivity() | ― | | setFacesOffsets(Uint32Array) | Face offsets | | getFacesOffsets() | ― | | setPolyhedronToFaces(Int32Array) | Map polyhedron→face IDs | | setPolyhedronOffsets(Uint32Array) | Polyhedron offsets | | getBounds(): [xmin,xmax,ymin,ymax,zmin,zmax] | Axis‑aligned bounding box | | toVTPString() | Serialize entire grid → VTP XML string |

Data Filters

vtkThreshold

const f = new vtkThreshold();
f.setScalarArrayName('pressure');
f.setLowerThreshold(0.0);
f.setUpperThreshold(1.0);
f.setInvert(false);
const filteredGrid = f.execute(grid);

vtkImplicitCut

const cutter = new vtkImplicitCut();
cutter.setScalarArrayName('velocity');
cutter.setCutFunction((x,y,z) => x+y-z);
cutter.setCutValue(0.5);
const slicePoly = cutter.execute(grid);

vtkClipByScalar

const clipper = new vtkClipByScalar();
clipper.setScalarArrayName('temperature');
clipper.setClipValue(300);
clipper.setInsideOut(true);
const isoPoly = clipper.execute(grid, { perfect: true });

vtkCellDataToPointData

const c2p = new vtkCellDataToPointData();
c2p.setInputArrayName('velocity');
c2p.setOutputArrayName('velocity_pt');
const gridWithPoints = c2p.execute(grid);

Geometry & Export

import { extractBoundary } from 'vtk-unstructured-viewer/vtkGeometryFilter.js';
import vtkUnstructuredGridToVTP from 'vtk-unstructured-viewer/vtkUnstructuredGridToVTP.js';

// Extract exterior faces
const polyData = extractBoundary(grid);

// Serialize / save VTP
const writer = new vtkUnstructuredGridToVTP();
writer.setExtractBoundaryCells(true);
writer.setPassPointData(true);
writer.setPassCellData(false);
const surfacePoly = writer.execute(grid);
const xml = writer.getVTPString(surfacePoly);
writer.saveVTP('output.vtp');

Debugging & Serialization

import VTKDebugger from 'vtk-unstructured-viewer/vtkDebugger.js';
import { serializeUnstructuredGrid, deserializeUnstructuredGrid } from 'vtk-unstructured-viewer/utils.js';

VTKDebugger.analyzeUnstructuredGrid(grid);
VTKDebugger.analyzePolyData(polyData);

const json = serializeUnstructuredGrid(grid);
const restoredGrid = deserializeUnstructuredGrid(json);

🔬 Example Workflow

async function processVtu(url) {
  const reader = new vtkXMLUnstructuredGridReader();
  const buffer = await fetch(url).then(r => r.arrayBuffer());
  await reader.parseAsArrayBuffer(buffer);
  let grid = reader.grid;

  // Threshold
  const thresh = new vtkThreshold();
  thresh.setScalarArrayName('alpha.water');
  thresh.setLowerThreshold(0.2);
  thresh.setUpperThreshold(1.0);
  grid = thresh.execute(grid);

  // Interpolate to points
  const c2p = new vtkCellDataToPointData();
  c2p.setInputArrayName('alpha.water');
  grid = c2p.execute(grid);

  // Clip
  const clipper = new vtkClipByScalar();
  clipper.setScalarArrayName('alpha.water');
  clipper.setClipValue(0.5);
  const surfacePoly = clipper.execute(grid);

  // Export
  const writer = new vtkUnstructuredGridToVTP();
  writer.setPassPointData(true);
  writer.saveVTP('phase.vtp');
}

📐 Supported VTK Cell Types

Supports all standard and higher‑order VTK cell types: triangles, quads, tets, hexes, wedges, pyramids, voxels, polygons, polyhedra, and their quadratic/Lagrange variants.

🚀 Performance

• Streaming XML parser – 1 M+ cells on mid‑range machines
• Typed arrays – zero‑copy math, GPU‑friendly layout
• 32/64‑bit floats – precision choice per dataset

🤝 Compatibility

| Environment | Requirement | | --------------- | ----------- | | Chrome | ≥ 60 | | Firefox | ≥ 55 | | Safari | ≥ 11 | | Edge (Chromium) | ≥ 79 | | Node.js | ≥ 14 (ESM) |

🛡️ Error Handling Example

try {
  const reader = new vtkXMLUnstructuredGridReader();
  const buf = await fetch('bad.vtu').then(r => r.arrayBuffer());
  await reader.parseAsArrayBuffer(buf);
} catch (err) {
  console.error('VTU parse error:', err.message);
}

© License & Support

This package is proprietary. See LICENSE.

• Docs & issues → https://github.com/sridhar-mani/vtk-unstructured-viewer
• Email support → [email protected]

🔎 SEO Keywords

VTK • VTU • unstructured grid • vtk.js • CFD • FEA • WebGL • JavaScript • mesh processing • iso‑surface • threshold filter • geometry filter • browser visualization • Node.js