feat(SegmentedLineRepresentation): orient glyphs to next point

Author: PaulHax

Sources/Widgets/Representations/SegmentedLineRepresentation/example/index.js

@@ -34,8 +34,9 @@ const compositeState = vtkStateBuilder
 const z = -50;
 const points = [
   [0, 0, z],
-  [5, 0, z],
-  [5, 10, z],
+  [5, 5, z],
+  [3, 10, z],
+  [5, 15, z],
 ];
 points.forEach((point) => {
   const handle = compositeState.addHandle();
@@ -48,6 +49,7 @@ points.forEach((point) => {
 
 const widgetRep = vtkSegmentedLineRepresentation.newInstance({
   scaleInPixels: false,
+  // closePolyLine: true,
 });
 widgetRep.setInputData(compositeState);
 widgetRep.setLabels(['handles']);

Sources/Widgets/Representations/SegmentedLineRepresentation/index.js

@@ -1,64 +1,50 @@
 import macro from 'vtk.js/Sources/macros';
-import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
-import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';
 import * as vtkMath from 'vtk.js/Sources/Common/Core/Math';
 import vtkBoundingBox from 'vtk.js/Sources/Common/DataModel/BoundingBox';
-import vtkTubeFilter from 'vtk.js/Sources/Filters/General/TubeFilter';
 import { getPixelWorldHeightAtCoord } from 'vtk.js/Sources/Widgets/Core/WidgetManager';
 import vtkWidgetRepresentation, {
   allocateArray,
 } from 'vtk.js/Sources/Widgets/Representations/WidgetRepresentation';
 import { RenderingTypes } from 'vtk.js/Sources/Widgets/Core/WidgetManager/Constants';
 import vtkPolyData from 'vtk.js/Sources/Common/DataModel/PolyData';
+import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
+import vtkGlyph3DMapper from 'vtk.js/Sources/Rendering/Core/Glyph3DMapper';
+import { OrientationModes } from 'vtk.js/Sources/Rendering/Core/Glyph3DMapper/Constants';
+import vtkCylinderSource from 'vtk.js/Sources/Filters/Sources/CylinderSource';
 
 // ----------------------------------------------------------------------------
 // vtkPolyLineRepresentation methods
 // ----------------------------------------------------------------------------
 
 function vtkPolyLineRepresentation(publicAPI, model) {
-  // Set our className
   model.classHierarchy.push('vtkPolyLineRepresentation');
   const superClass = { ...publicAPI };
 
-  // --------------------------------------------------------------------------
-  // Internal polydata dataset
-  // --------------------------------------------------------------------------
   const internalPolyData = vtkPolyData.newInstance({ mtime: 0 });
 
   function allocateSize(polyData, size, closePolyLine = false) {
-    let points = null;
-    if (size < 2) {
-      // FIXME: Why 1 point and not 0 ?
-      points = allocateArray(polyData, 'points', 1).getData();
-      points.set([0, 0, 0]);
-      allocateArray(polyData, 'lines', 0).getData();
-    } else if (
-      !polyData.getPoints() ||
-      polyData.getPoints().length !== size * 3
+    if (!polyData.getPoints() || polyData.getPoints().length !== size * 3) {
+      allocateArray(polyData, 'points', size).getData();
+    }
+
+    const cellSize = size + (closePolyLine ? 1 : 0);
+    if (
+      polyData.getLines().getNumberOfCells() !== 1 ||
+      polyData.getLines().getCellSizes()[0] !== cellSize
     ) {
-      points = allocateArray(polyData, 'points', size).getData();
-      const cellSize = size + (closePolyLine ? 1 : 0);
-      if (
-        polyData.getLines().getNumberOfCells() !== 1 ||
-        polyData.getLines().getCellSizes()[0] !== cellSize
-      ) {
-        const lines = allocateArray(polyData, 'lines', cellSize + 1); // +1 for the number of points
-        const cellData = lines.getData();
-        cellData[0] = cellSize;
-        for (let i = 1; i <= cellSize; i++) {
-          cellData[i] = i - 1;
-        }
-        if (closePolyLine) {
-          cellData[cellSize] = 0;
-        }
-        lines.setData(cellData);
+      const lines = allocateArray(polyData, 'lines', cellSize + 1).getData(); // +1 for the number of points
+      lines[0] = cellSize;
+      for (let i = 1; i <= cellSize; i++) {
+        lines[i] = i - 1;
+      }
+      if (closePolyLine) {
+        lines[cellSize] = 0;
       }
     }
-    return points;
   }
 
   /**
-   * Change the line/tube thickness.
+   * Change the segments thickness.
    * @param {number} lineThickness
    */
   function applyLineThickness(lineThickness) {
@@ -70,35 +56,30 @@ function vtkPolyLineRepresentation(publicAPI, model) {
         model.displayScaleParams
       );
     }
-    model._pipelines.tubes.filter.setRadius(scaledLineThickness);
+    model._pipeline.glyph.setRadius(scaledLineThickness);
   }
 
-  // --------------------------------------------------------------------------
-  // Generic rendering pipeline
-  // --------------------------------------------------------------------------
-
-  model._pipelines = {
-    tubes: {
-      source: publicAPI,
-      filter: vtkTubeFilter.newInstance({
-        radius: model.lineThickness,
-        numberOfSides: 12,
-        capping: false,
-      }),
-      mapper: vtkMapper.newInstance(),
-      actor: vtkActor.newInstance({ parentProp: publicAPI }),
-    },
+  model._pipeline = {
+    source: publicAPI,
+    glyph: vtkCylinderSource.newInstance({
+      direction: [1, 0, 0],
+    }),
+    mapper: vtkGlyph3DMapper.newInstance({
+      orientationArray: 'directions',
+      orientationMode: OrientationModes.DIRECTION,
+    }),
+    actor: vtkActor.newInstance({ parentProp: publicAPI }),
   };
 
-  vtkWidgetRepresentation.connectPipeline(model._pipelines.tubes);
-  publicAPI.addActor(model._pipelines.tubes.actor);
+  vtkWidgetRepresentation.connectPipeline(model._pipeline);
+  publicAPI.addActor(model._pipeline.actor);
 
   // --------------------------------------------------------------------------
   publicAPI.requestData = (inData, outData) => {
     const state = inData[0];
     outData[0] = internalPolyData;
 
-    // Remove invalid and coincident points for tube filter.
+    // Remove invalid and coincident points.
     const list = publicAPI
       .getRepresentationStates(state)
       .reduce((subStates, subState) => {
@@ -120,23 +101,44 @@ function vtkPolyLineRepresentation(publicAPI, model) {
       }, []);
     const size = list.length;
 
-    const points = allocateSize(
-      outData[0],
-      size,
-      model.closePolyLine && size > 2
-    );
+    allocateSize(internalPolyData, size, model.closePolyLine && size > 2);
 
-    if (points) {
-      for (let i = 0; i < size; i++) {
-        const coords = list[i].getOrigin();
-        points[i * 3] = coords[0];
-        points[i * 3 + 1] = coords[1];
-        points[i * 3 + 2] = coords[2];
-      }
+    const points = internalPolyData.getPoints().getData();
+    const lines = internalPolyData.getLines().getData();
+
+    for (let i = 0; i < size; i++) {
+      const coords = list[i].getOrigin();
+      points[i * 3] = coords[0];
+      points[i * 3 + 1] = coords[1];
+      points[i * 3 + 2] = coords[2];
+    }
+
+    // Orient glyphs to next point.
+    const directions = allocateArray(
+      internalPolyData,
+      'directions',
+      lines.length - 1,
+      undefined,
+      3
+    ).getData();
+    for (let point = 1; point < lines.length - 1; point++) {
+      const eye = lines[point] * 3;
+      const eyePoint = [points[eye], points[eye + 1], points[eye + 2]];
+      const target = lines[point + 1] * 3;
+      const targetPoint = [
+        points[target],
+        points[target + 1],
+        points[target + 2],
+      ];
+      const direction = vtkMath.subtract(targetPoint, eyePoint, []);
+      const glyph = (point - 1) * 3;
+      directions[glyph] = direction[0];
+      directions[glyph + 1] = direction[1];
+      directions[glyph + 2] = direction[2];
     }
 
-    outData[0].getPoints().modified();
-    outData[0].modified();
+    internalPolyData.getPoints().modified();
+    internalPolyData.modified();
 
     const lineThickness = state.getLineThickness?.() ?? model.lineThickness;
     applyLineThickness(lineThickness);