Learning vtkjs之TubeFilter

过滤器沿着线生成管道

介绍

vtkTubeFilter - 一个在每条输入线周围生成管的过滤器

vtkTubeFilter是一个在每条输入线周围生成管的过滤器。管由三角形条带组成，并随着线法线的旋转而旋转。如果没有法线存在，它们会自动计算。管的半径可以根据标量或向量值进行调整。如果半径随标量值变化，则半径会线性调整。如果半径随向量值变化，则使用质量通量保持变化。还可以指定管的侧面数。您还可以指定哪些侧面是可见的。这对于生成有趣的条纹效果很有用。其他选项包括能够封闭管并生成纹理坐标。纹理坐标可以与相关纹理映射一起使用，以创建有趣的视觉效果，例如用与长度或时间相对应的条纹标记管。

这个过滤器通常用于创建粗或戏剧性的线条。另一个常见的用途是将其与vtkStreamTracer结合使用以生成流管。

!!! warning
管的侧面数必须大于3。

!!! warning
输入线不能有重复的点，或者点的法线与进出线段平行。如果一条线不符合这个标准，那么这条线就不会被管化。

效果

在这里插入图片描述

核心代码

线数据生成

function initializePolyData(dType) {let pointType = VtkDataTypes.FLOAT;if (dType === DesiredOutputPrecision.SINGLE) {pointType = VtkDataTypes.FLOAT;} else if (dType === DesiredOutputPrecision.DOUBLE) {pointType = VtkDataTypes.DOUBLE;}const polyData = vtkPolyData.newInstance();const points = vtkPoints.newInstance({ dataType: pointType });points.setNumberOfPoints(numSegments + 1);const pointData = new Float32Array(3 * (numSegments + 1));const verts = new Uint32Array(2 * (numSegments + 1));const lines = new Uint32Array(numSegments + 2);lines[0] = numSegments + 1;const scalarsData = new Float32Array(numSegments + 1);const scalars = vtkDataArray.newInstance({name: "Scalars",values: scalarsData,});for (let i = 0; i < numSegments + 1; ++i) {for (let j = 0; j < 3; ++j) {pointData[3 * i + j] = vtkMath.random();}scalarsData[i] = i * 0.1;verts[i] = 1;verts[i + 1] = i;lines[i + 1] = i;}points.setData(pointData);polyData.setPoints(points);polyData.getVerts().setData(verts);polyData.getLines().setData(lines);polyData.getPointData().setScalars(scalars);return polyData;}

主要流程

	const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({background: [0, 0, 0],rootContainer: vtkContainerRef.current,});const renderer = fullScreenRenderer.getRenderer();const renderWindow = fullScreenRenderer.getRenderWindow();const polyData = initializePolyData(DesiredOutputPrecision.DOUBLE);const tubeFilter = vtkTubeFilter.newInstance();tubeFilter.setCapping(false);tubeFilter.setNumberOfSides(50);tubeFilter.setRadius(0.1);tubeFilter.setInputData(polyData);tubeFilter.setInputArrayToProcess(0, "Scalars", "PointData", "Scalars");context.current = {tubeFilter,renderer,renderWindow,};addRepresentation(polyData, {});const tubeFilterActor = addRepresentation(tubeFilter, {});context.current["tubeFilterActor"] = tubeFilterActor;renderer.resetCamera();renderWindow.render();