@kitware/vtk.js 34.0.0 → 34.2.0

package/Rendering/Core/VectorText/Utils.js

@@ -0,0 +1,520 @@
+import { D as areEquals } from '../../../Common/Core/Math/index.js';
+
+/**
+ * Computes UV coordinates for top/bottom faces
+ * @param {Array} vertices - The vertices array
+ * @param {Number} iA - First index
+ * @param {Number} iB - Second index
+ * @param {Number} iC - Third index
+ * @returns {Array} Array of UV coordinates
+ */
+function computeFacesUV(vertices, iA, iB, iC) {
+  const ax = vertices[iA * 3];
+  const ay = vertices[iA * 3 + 1];
+  const bx = vertices[iB * 3];
+  const by = vertices[iB * 3 + 1];
+  const cx = vertices[iC * 3];
+  const cy = vertices[iC * 3 + 1];
+  return [[ax, ay], [bx, by], [cx, cy]];
+}
+
+/**
+ * Computes UV coordinates for side walls
+ * @param {Array} vertices - The vertices array
+ * @param {Number} iA - First index
+ * @param {Number} iB - Second index
+ * @param {Number} iC - Third index
+ * @param {Number} iD - Fourth index
+ * @returns {Array} Array of UV coordinates
+ */
+function computeSidesUV(vertices, iA, iB, iC, iD) {
+  const ax = vertices[iA * 3];
+  const ay = vertices[iA * 3 + 1];
+  const az = vertices[iA * 3 + 2];
+  const bx = vertices[iB * 3];
+  const by = vertices[iB * 3 + 1];
+  const bz = vertices[iB * 3 + 2];
+  const cx = vertices[iC * 3];
+  const cy = vertices[iC * 3 + 1];
+  const cz = vertices[iC * 3 + 2];
+  const dx = vertices[iD * 3];
+  const dy = vertices[iD * 3 + 1];
+  const dz = vertices[iD * 3 + 2];
+
+  // Determine the best UV mapping direction based on geometry
+  if (Math.abs(ay - by) < Math.abs(ax - bx)) {
+    return [[ax, 1 - az], [bx, 1 - bz], [cx, 1 - cz], [dx, 1 - dz]];
+  }
+  return [[ay, 1 - az], [by, 1 - bz], [cy, 1 - cz], [dy, 1 - dz]];
+}
+
+/**
+ * Creates a shape path object with methods for path operations
+ * @returns {Object} A shape path object with methods for manipulating paths
+ */
+function createShapePath() {
+  const curves = [];
+  const currentPoint = [0, 0];
+  const holes = [];
+  return {
+    curves,
+    currentPoint,
+    holes,
+    moveTo(x, y) {
+      currentPoint[0] = x;
+      currentPoint[1] = y;
+    },
+    lineTo(x, y) {
+      const start = [...currentPoint];
+      const end = [x, y];
+      curves.push({
+        curveType: 'LineCurve',
+        start,
+        end,
+        getPointAt(t) {
+          return [start[0] + t * (end[0] - start[0]), start[1] + t * (end[1] - start[1])];
+        },
+        getPoints(resolution) {
+          const points = [];
+          for (let i = 0; i <= resolution; i++) {
+            points.push(this.getPointAt(i / resolution));
+          }
+          return points;
+        }
+      });
+      currentPoint[0] = x;
+      currentPoint[1] = y;
+    },
+    quadraticCurveTo(cpX, cpY, x, y) {
+      const start = [...currentPoint];
+      const end = [x, y];
+      const cp = [cpX, cpY];
+      curves.push({
+        curveType: 'QuadraticBezierCurve',
+        cp,
+        start,
+        end,
+        getPointAt(t) {
+          const oneMinusT = 1 - t;
+          return [oneMinusT * oneMinusT * start[0] + 2 * oneMinusT * t * cp[0] + t * t * end[0], oneMinusT * oneMinusT * start[1] + 2 * oneMinusT * t * cp[1] + t * t * end[1]];
+        },
+        getPoints(resolution) {
+          const points = [];
+          for (let i = 0; i <= resolution; i++) {
+            points.push(this.getPointAt(i / resolution));
+          }
+          return points;
+        }
+      });
+      currentPoint[0] = x;
+      currentPoint[1] = y;
+    },
+    bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y) {
+      const start = [...currentPoint];
+      const end = [x, y];
+      const cp1 = [cp1X, cp1Y];
+      const cp2 = [cp2X, cp2Y];
+      curves.push({
+        curveType: 'BezierCurve',
+        cp1,
+        cp2,
+        start,
+        end,
+        getPointAt(t) {
+          const oneMinusT = 1 - t;
+          return [oneMinusT * oneMinusT * oneMinusT * start[0] + 3 * oneMinusT * oneMinusT * t * cp1[0] + 3 * oneMinusT * t * t * cp2[0] + t * t * t * end[0], oneMinusT * oneMinusT * oneMinusT * start[1] + 3 * oneMinusT * oneMinusT * t * cp1[1] + 3 * oneMinusT * t * t * cp2[1] + t * t * t * end[1]];
+        },
+        getPoints(resolution) {
+          const points = [];
+          for (let i = 0; i <= resolution; i++) {
+            points.push(this.getPointAt(i / resolution));
+          }
+          return points;
+        }
+      });
+      currentPoint[0] = x;
+      currentPoint[1] = y;
+    },
+    /**
+     * Get points from the shape
+     * @param {*} divisions
+     * @returns
+     */
+    getPoints(divisions) {
+      let last;
+      const points = [];
+      for (let i = 0; i < curves.length; i++) {
+        const curve = curves[i];
+        let resolution = divisions;
+        if (curve.curveType === 'EllipseCurve') {
+          resolution = divisions * 2;
+        } else if (curve.curveType === 'LineCurve') {
+          resolution = 1;
+        }
+        const pts = curve.getPoints(resolution);
+        for (let j = 0; j < pts.length; j++) {
+          const point = pts[j];
+          // eslint-disable-next-line no-continue
+          if (last && areEquals(last, point)) continue;
+          points.push(point);
+          last = point;
+        }
+      }
+      return points;
+    },
+    /**
+     * Extract points from the shape
+     * @param {*} divisions
+     * @returns
+     */
+    extractPoints(divisions) {
+      const points = this.getPoints(divisions);
+      const holesPoints = this.holes.map(hole => hole.getPoints(divisions));
+      return {
+        shape: points,
+        holes: holesPoints
+      };
+    },
+    /**
+     * Defines if a given point is inside the polygon defines by the path
+     * @param {*} point
+     * @param {*} polygon
+     * @returns {boolean}
+     */
+    isPointInside(point, polygon) {
+      const x = point[0];
+      const y = point[1];
+      let isInside = false;
+      for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+        const xi = polygon[i][0];
+        const yi = polygon[i][1];
+        const xj = polygon[j][0];
+        const yj = polygon[j][1];
+        const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
+        if (intersect) isInside = !isInside;
+      }
+      return isInside;
+    },
+    isIntersect(path) {
+      const pathA = this.getPoints(1, curves, false);
+      const pathB = path.getPoints(1);
+      return this.isPointInside(pathB[0], pathA);
+    }
+  };
+}
+
+/**
+ * Calculates the bounding box size for a set of shapes
+ * @param {Array} shapes - Array of shape objects
+ * @param {Number} depth - Depth of the 3D text
+ * @param {Number} curveSegments - Number of segments for curved paths
+ * @returns {Object} Object with min and max point coordinates
+ */
+function getBoundingSize(shapes, depth, curveSegments) {
+  const minPoint = [Infinity, Infinity, depth > 0 ? 0 : depth];
+  const maxPoint = [-Infinity, -Infinity, depth < 0 ? 0 : depth];
+  for (let i = 0; i < shapes.length; i++) {
+    const shape = shapes[i];
+    const shapePoints = shape.extractPoints(curveSegments);
+    for (let j = 0; j < shapePoints.shape.length; j++) {
+      const p = shapePoints.shape[j];
+      if (p[0] < minPoint[0]) minPoint[0] = p[0];
+      if (p[1] < minPoint[1]) minPoint[1] = p[1];
+      if (p[0] > maxPoint[0]) maxPoint[0] = p[0];
+      if (p[1] > maxPoint[1]) maxPoint[1] = p[1];
+    }
+  }
+  return {
+    min: minPoint,
+    max: maxPoint
+  };
+}
+
+/**
+ * Removes duplicate end points in a points array
+ * @param {Array} points - Array of points
+ */
+function removeDupEndPoints(points) {
+  const l = points.length;
+  const isEqual = areEquals(points[l - 1], points[0]);
+  if (l > 2 && isEqual) {
+    points.pop();
+  }
+}
+
+/**
+ * Checks if the points are in a clockwise order
+ * @param {Array} points - Array of points [x, y]
+ * @returns {Boolean} True if points are in clockwise order
+ */
+function isClockWise(points) {
+  let sum = 0.0;
+  const n = points.length;
+  for (let p = n - 1, q = 0; q < n; p = q++) {
+    sum += points[p][0] * points[q][1] - points[q][0] * points[p][1];
+  }
+  // Positive signed area means counter-clockwise, so return true if area is negative
+  return sum * 0.5 < 0;
+}
+
+/**
+ * Computes the bevel vector for a point in a shape.
+ * @param {Array} pt - Current point [x, y]
+ * @param {Array} prev - Previous point [x, y]
+ * @param {Array} next - Next point [x, y]
+ * @returns {Array} Normalized bevel vector [x, y]
+ */
+function computeBevelVector(pt, prev, next) {
+  const vPrevX = pt[0] - prev[0];
+  const vPrevY = pt[1] - prev[1];
+  const vNextX = next[0] - pt[0];
+  const vNextY = next[1] - pt[1];
+
+  // Check collinearity
+  const cross = vPrevX * vNextY - vPrevY * vNextX;
+  let tx;
+  let ty;
+  let shrinkBy;
+  if (Math.abs(cross) > Number.EPSILON) {
+    // non‐collinear
+    const lenPrev = Math.hypot(vPrevX, vPrevY);
+    const lenNext = Math.hypot(vNextX, vNextY);
+
+    // shift prev and next perpendicular to themselves
+    const prevShiftX = prev[0] - vPrevY / lenPrev;
+    const prevShiftY = prev[1] + vPrevX / lenPrev;
+    const nextShiftX = next[0] - vNextY / lenNext;
+    const nextShiftY = next[1] + vNextX / lenNext;
+
+    // intersection factor
+    const sf = ((nextShiftX - prevShiftX) * vNextY - (nextShiftY - prevShiftY) * vNextX) / (vPrevX * vNextY - vPrevY * vNextX);
+    tx = prevShiftX + vPrevX * sf - pt[0];
+    ty = prevShiftY + vPrevY * sf - pt[1];
+    const lensq = tx * tx + ty * ty;
+    if (lensq <= 2) {
+      return [tx, ty];
+    }
+    shrinkBy = Math.sqrt(lensq / 2);
+  } else {
+    // collinear or opposing
+    const sameDir = vPrevX > 0 && vNextX > 0 || vPrevX < 0 && vNextX < 0 || Math.sign(vPrevY) === Math.sign(vNextY);
+    if (sameDir) {
+      // perpendicular to prev
+      tx = -vPrevY;
+      ty = vPrevX;
+      shrinkBy = Math.hypot(vPrevX, vPrevY);
+    } else {
+      // just offset along prev
+      tx = vPrevX;
+      ty = vPrevY;
+      shrinkBy = Math.sqrt((vPrevX * vPrevX + vPrevY * vPrevY) / 2);
+    }
+  }
+  return [tx / shrinkBy, ty / shrinkBy];
+}
+
+/**
+ * Triangulates a shape with holes
+ * @param {Array} contour - Array of contour points
+ * @param {Array} holes - Array of hole paths
+ * @returns {Array} Array of triangle faces as arrays of indices
+ */
+function triangulateShape(earcut, contour, holes) {
+  const faces = [];
+  const vertices = [];
+  const holeIndices = [];
+  removeDupEndPoints(contour);
+  for (let i = 0; i < contour.length; i++) {
+    vertices.push(contour[i][0], contour[i][1]);
+  }
+  let holeIndex = contour.length;
+  holes.forEach(removeDupEndPoints);
+  for (let i = 0; i < holes.length; i++) {
+    holeIndices.push(holeIndex);
+    const hole = holes[i];
+    holeIndex += hole.length;
+    for (let j = 0; j < hole.length; j++) {
+      vertices.push(hole[j][0], hole[j][1]);
+    }
+  }
+  const triangles = earcut(vertices, holeIndices);
+  for (let i = 0; i < triangles.length; i += 3) {
+    faces.push(triangles.slice(i, i + 3));
+  }
+  return faces;
+}
+
+/**
+ * Scales a point along a vector
+ * @param {Array} pt - Point to scale [x, y]
+ * @param {Array} vec - Direction vector [x, y]
+ * @param {Number} size - Scale amount
+ * @returns {Array} Scaled point [x, y]
+ */
+function scalePoint(pt, vec, size) {
+  const rt = [pt[0], pt[1]];
+  rt[0] += vec[0] * size;
+  rt[1] += vec[1] * size;
+  return rt;
+}
+
+/**
+ * Creates triangle faces with specified indices
+ * @param {Array} layers - The layers array with vertex positions
+ * @param {Number} a - First index
+ * @param {Number} b - Second index
+ * @param {Number} c - Third index
+ * @param {Array} verticesArray - The output vertices array
+ * @param {Array} uvArray - The output UV array
+ * @param {Array} colorArray - The output color array
+ * @param {Array} color - The color [r, g, b]
+ * @param {Boolean} perFaceUV - Flag for per-face UV mapping
+ * @param {Number} faceIndex - Index of the face for UV mapping
+ */
+function addTriangle(layers, a, b, c, verticesArray, uvArray, colorArray, color) {
+  const tri = [a, c, b];
+  tri.forEach(i => {
+    verticesArray.push(layers[i * 3], layers[i * 3 + 1], layers[i * 3 + 2]);
+  });
+  const nextIndex = verticesArray.length / 3;
+  const uvs = computeFacesUV(verticesArray, nextIndex - 3, nextIndex - 2, nextIndex - 1);
+
+  // Add each UV coordinate pair to the array
+  uvs.forEach(uv => {
+    uvArray.push(uv[0], uv[1]);
+  });
+  if (colorArray && color) {
+    for (let i = 0; i < 3; ++i) colorArray.push(color[0], color[1], color[2]);
+  }
+}
+
+/**
+ * Creates quad faces with specified indices
+ * @param {Array} layers - The layers array with vertex positions
+ * @param {Number} a - First index
+ * @param {Number} b - Second index
+ * @param {Number} c - Third index
+ * @param {Number} d - Fourth index
+ * @param {Array} verticesArray - The output vertices array
+ * @param {Array} uvArray - The output UV array
+ * @param {Array} colorArray - The output color array
+ * @param {Array} color - The color [r, g, b]
+ */
+function addQuad(layers, a, b, c, d, verticesArray, uvArray, colorArray, color) {
+  const quad = [a, d, b, b, d, c];
+  quad.forEach(i => verticesArray.push(layers[i * 3], layers[i * 3 + 1], layers[i * 3 + 2]));
+  const nextIndex = verticesArray.length / 3;
+  const uvs = computeSidesUV(verticesArray, nextIndex - 6, nextIndex - 3, nextIndex - 2, nextIndex - 1);
+
+  // UV coordinates for both triangles of the quad
+  // First triangle
+  uvArray.push(uvs[0][0], uvs[0][1]);
+  uvArray.push(uvs[1][0], uvs[1][1]);
+  uvArray.push(uvs[3][0], uvs[3][1]);
+
+  // Second triangle
+  uvArray.push(uvs[1][0], uvs[1][1]);
+  uvArray.push(uvs[2][0], uvs[2][1]);
+  uvArray.push(uvs[3][0], uvs[3][1]);
+  if (colorArray && color) {
+    for (let i = 0; i < 6; ++i) colorArray.push(color[0], color[1], color[2]);
+  }
+}
+
+/**
+ * Creates the faces for the top and bottom of the 3D text
+ * @param {Array} layers - The layers array with vertex positions
+ * @param {Array} faces - The triangulated faces
+ * @param {Number} vlen - The number of vertices
+ * @param {Number} steps - The number of steps
+ * @param {Boolean} bevelEnabled - Whether bevel is enabled
+ * @param {Number} bevelSegments - Number of bevel segments
+ * @param {Array} verticesArray - The output vertices array
+ * @param {Array} uvArray - The output UV array
+ */
+function buildLidFaces(layers, faces, vlen, steps, bevelEnabled, bevelSegments, verticesArray, uvArray, colorArray, color) {
+  if (bevelEnabled) {
+    let layer = 0;
+    let offset = vlen * layer; // Bottom faces
+    faces.forEach(_ref => {
+      let [a, b, c] = _ref;
+      addTriangle(layers, c + offset, b + offset, a + offset, verticesArray, uvArray, colorArray, color);
+    });
+    layer = steps + bevelSegments * 2;
+    offset = vlen * layer;
+
+    // Top faces
+    faces.forEach(_ref2 => {
+      let [a, b, c] = _ref2;
+      addTriangle(layers, a + offset, b + offset, c + offset, verticesArray, uvArray, colorArray, color);
+    });
+  } else {
+    // Bottom faces
+    faces.forEach(_ref3 => {
+      let [a, b, c] = _ref3;
+      addTriangle(layers, c, b, a, verticesArray, uvArray, colorArray, color);
+    });
+
+    // Top faces
+    const offset = vlen * steps;
+    faces.forEach(_ref4 => {
+      let [a, b, c] = _ref4;
+      addTriangle(layers, a + offset, b + offset, c + offset, verticesArray, uvArray, colorArray, color);
+    });
+  }
+}
+
+/**
+ * Creates side walls for contour or hole
+ * @param {Array} layers - The layers array
+ * @param {Array} contour - The contour points
+ * @param {Number} layerOffset - Offset for the layer
+ * @param {Number} vlen - The number of vertices
+ * @param {Number} steps - The number of steps
+ * @param {Number} bevelSegments - The number of bevel segments
+ * @param {Array} verticesArray - The output vertices array
+ * @param {Array} uvArray - The output UV array
+ */
+function buildWalls(layers, contour, layerOffset, vlen, steps, bevelSegments, verticesArray, uvArray, colorArray, color) {
+  const totalLayers = steps + bevelSegments * 2;
+  for (let i = 0; i < contour.length; i++) {
+    const j = i;
+    const k = i === 0 ? contour.length - 1 : i - 1;
+    for (let s = 0; s < totalLayers; s++) {
+      const slen1 = vlen * s;
+      const slen2 = vlen * (s + 1);
+      const a = layerOffset + j + slen1;
+      const b = layerOffset + k + slen1;
+      const c = layerOffset + k + slen2;
+      const d = layerOffset + j + slen2;
+      addQuad(layers, a, b, c, d, verticesArray, uvArray, colorArray, color);
+    }
+  }
+}
+
+/**
+ * Builds the side faces of the 3D text
+ * @param {Array} layers - The layers array
+ * @param {Array} contour - The contour points
+ * @param {Array} holes - The holes
+ * @param {Number} vlen - The number of vertices
+ * @param {Number} steps - The number of steps
+ * @param {Number} bevelSegments - The number of bevel segments
+ * @param {Array} verticesArray - The output vertices array
+ * @param {Array} uvArray - The output UV array
+ */
+function buildSideFaces(layers, contour, holes, vlen, steps, bevelSegments, verticesArray, uvArray, colorArray, color) {
+  let layerOffset = 0;
+  // Create contour walls
+  buildWalls(layers, contour, layerOffset, vlen, steps, bevelSegments, verticesArray, uvArray, colorArray, color);
+  layerOffset += contour.length;
+
+  // Create hole walls
+  for (let i = 0; i < holes.length; i++) {
+    const ahole = holes[i];
+    buildWalls(layers, ahole, layerOffset, vlen, steps, bevelSegments, verticesArray, uvArray, colorArray, color);
+    layerOffset += ahole.length;
+  }
+}
+
+export { addQuad, addTriangle, buildLidFaces, buildSideFaces, buildWalls, computeBevelVector, computeFacesUV, computeSidesUV, createShapePath, getBoundingSize, isClockWise, scalePoint, triangulateShape };

package/Rendering/Core/VectorText.d.ts

@@ -0,0 +1,183 @@
+import { vtkAlgorithm, vtkObject } from './../../interfaces';
+import { Nullable, RGBColor } from './../../types';
+
+export interface IVectorTextInitialValues {
+  fontSize?: number;
+  text?: string;
+  depth?: number;
+  steps?: number;
+  bevelEnabled?: boolean;
+  curveSegments?: number;
+  bevelThickness?: number;
+  bevelSize?: number;
+  bevelOffset?: number;
+  bevelSegments?: number;
+  font?: any;
+  earcut?: any; // Earcut module for triangulation
+  perLetterFaceColors?: (letterIndex: number) => [number, number, number];
+}
+
+type vtkVectorTextBase = vtkObject & vtkAlgorithm;
+
+export interface vtkVectorText extends vtkVectorTextBase {
+  /**
+   * Returns whether beveling is enabled.
+   */
+  getBevelEnabled(): boolean;
+
+  /**
+   * Returns the number of segments used for the bevel geometry.
+   */
+  getBevelSegments(): number;
+
+  /**
+   * Returns the size of the bevel.
+   */
+  getBevelSize(): number;
+
+  /**
+   * Returns the thickness of the bevel.
+   */
+  getBevelThickness(): number;
+
+  /**
+   * Returns the offset of the bevel.
+   */
+  getBevelOffset(): number;
+
+  /**
+   * Returns the number of curve segments used for the text geometry.
+   */
+  getCurveSegments(): number;
+
+  /**
+   * Returns the extrusion depth of the text.
+   */
+  getDepth(): number;
+
+  /**
+   * Returns the current font size.
+   */
+  getFontSize(): number;
+
+  /**
+   * Returns the number of steps used for the text geometry.
+   */
+  getSteps(): number;
+
+  /**
+   * Returns the current text string.
+   */
+  getText(): string;
+
+  /**
+   * Gets or sets the per-letter face color function.
+   * @param fn - Function mapping letter index to [r,g,b] color.
+   */
+  getPerLetterFaceColors(): Nullable<(letterIndex: number) => RGBColor>;
+
+  /**
+   * Enables or disables beveling.
+   * @param bevelEnabled - True to enable beveling, false to disable.
+   */
+  setBevelEnabled(bevelEnabled: boolean): boolean;
+
+  /**
+   * Sets the number of segments used for the bevel geometry.
+   * @param bevelSegments - The number of bevel segments.
+   */
+  setBevelSegments(bevelSegments: number): boolean;
+
+  /**
+   * Sets the size of the bevel.
+   * @param bevelSize - The bevel size.
+   */
+  setBevelSize(bevelSize: number): boolean;
+
+  /**
+   * Sets the thickness of the bevel.
+   * @param bevelThickness - The bevel thickness.
+   */
+  setBevelThickness(bevelThickness: number): boolean;
+
+  /**
+   * Sets the offset of the bevel.
+   * @param bevelOffset - The bevel offset.
+   */
+  setBevelOffset(bevelOffset: number): boolean;
+
+  /**
+   * Sets the number of curve segments used for the text geometry.
+   * @param curveSegments - The number of curve segments.
+   */
+  setCurveSegments(curveSegments: number): boolean;
+
+  /**
+   * Sets the extrusion depth of the text.
+   * @param depth - The new depth value.
+   */
+  setDepth(depth: number): boolean;
+
+  /**
+   * Sets the font object used for rendering the text.
+   * This should be a parsed font object from opentype.js.
+   * @param font - The font object.
+   */
+  setFont(font: any): boolean;
+
+  /**
+   * Sets the font size.
+   * @param fontSize - The new font size.
+   */
+  setFontSize(fontSize: number): boolean;
+
+  /**
+   * Sets the number of steps used for the text geometry.
+   * @param steps - The number of steps.
+   */
+  setSteps(steps: number): boolean;
+
+  /**
+   * Sets the text string.
+   * @param text - The new text to display.
+   */
+  setText(text: string): boolean;
+
+  /**
+   * Sets the per-letter face color function.
+   * @param fn - Function mapping letter index to [r,g,b] color.
+   */
+  setPerLetterFaceColors(fn: (letterIndex: number) => RGBColor): boolean;
+}
+
+/**
+ * Method use to decorate a given object (publicAPI+model) with vtkVectorText characteristics.
+ *
+ * @param publicAPI object on which methods will be bounds (public)
+ * @param model object on which data structure will be bounds (protected)
+ * @param {IVectorTextInitialValues} [initialValues] (default: {})
+ */
+export function extend(
+  publicAPI: object,
+  model: object,
+  initialValues?: IVectorTextInitialValues
+): void;
+
+/**
+ * Method use to create a new instance of vtkVectorText
+ * @param {IVectorTextInitialValues} [initialValues] for pre-setting some of its content
+ */
+export function newInstance(
+  initialValues?: IVectorTextInitialValues
+): vtkVectorText;
+
+/**
+ * vtkVectorText generates vtkPolyData from an input string.
+ * The TTF file needs to be parsed using opentype.js and then passed to
+ * vtkVectorText via the setFont method.
+ */
+export declare const vtkVectorText: {
+  newInstance: typeof newInstance;
+  extend: typeof extend;
+};
+export default vtkVectorText;

package/Rendering/Core/VectorText.js

@@ -0,0 +1,397 @@
+import { m as macro } from '../../macros2.js';
+import { s as subtract } from '../../Common/Core/Math/index.js';
+import vtkPolyData from '../../Common/DataModel/PolyData.js';
+import vtkDataArray from '../../Common/Core/DataArray.js';
+import vtkCellArray from '../../Common/Core/CellArray.js';
+import { isClockWise, getBoundingSize, triangulateShape, computeBevelVector, scalePoint, buildLidFaces, buildSideFaces, createShapePath } from './VectorText/Utils.js';
+
+const {
+  vtkErrorMacro,
+  vtkWarningMacro
+} = macro;
+
+// ----------------------------------------------------------------------------
+// vtkVectorText methods
+// ----------------------------------------------------------------------------
+
+function vtkVectorText(publicAPI, model) {
+  // Set our className
+  model.classHierarchy.push('vtkVectorText');
+
+  // -------------------------------------------------------------------------
+  // Private methods
+  // -------------------------------------------------------------------------
+
+  /**
+   * Process a shape into 3D geometry
+   * @param {Object} shape - The shape to process
+   * @param {Array} offsetSize - The offset size for positioning the shape
+   * @param {Array} letterColor - The color for the shape
+   */
+  function addShape(shape, offsetSize, letterColor) {
+    // extract contour + holes, offset them
+    const curveSegments = model.curveSegments;
+    const steps = model.steps;
+    const depth = model.depth;
+
+    // Calculate bevel parameters
+    const bevelEnabled = model.bevelEnabled;
+    let bevelThickness = model.bevelThickness;
+    let bevelSize = bevelThickness - 0.1;
+    let bevelOffset = model.bevelOffset;
+    let bevelSegments = model.bevelSegments;
+    if (!bevelEnabled) {
+      bevelSegments = 0;
+      bevelThickness = 0;
+      bevelSize = 0;
+      bevelOffset = 0;
+    }
+
+    // Extract points from shape
+    const shapePoints = shape.extractPoints(curveSegments);
+    let vertices = shapePoints.shape;
+    const holes = shapePoints.holes;
+
+    // Offset points to the correct position
+    vertices.forEach(p => {
+      p[0] += offsetSize[0];
+      p[1] += offsetSize[1];
+    });
+    holes.forEach(hole => {
+      hole.forEach(p => {
+        p[0] += offsetSize[0];
+        p[1] += offsetSize[1];
+      });
+    });
+
+    // Check if we have enough points to create a shape
+    if (vertices.length < 3) {
+      vtkWarningMacro('Not enough points to create a shape');
+      return;
+    }
+
+    // Triangulate the shape
+    const faces = triangulateShape(model.earcut, vertices, holes);
+    const contour = vertices;
+
+    // Combine all vertices (contour and holes)
+    vertices = [...vertices, ...holes.flat()];
+    const vlen = vertices.length;
+
+    // Calculate bevel vectors for the contour
+    const contourMovements = [];
+    for (let i = 0, j = contour.length - 1, k = i + 1; i < contour.length; i++, j++, k++) {
+      if (j === contour.length) j = 0;
+      if (k === contour.length) k = 0;
+      contourMovements[i] = computeBevelVector(contour[i], contour[j], contour[k]);
+    }
+
+    // Calculate bevel vectors for the holes
+    const holesMovements = [];
+    let oneHoleMovements;
+    let verticesMovements = [...contourMovements];
+    for (let h = 0, hl = holes.length; h < hl; h++) {
+      const ahole = holes[h];
+      oneHoleMovements = [];
+      for (let i = 0, j = ahole.length - 1, k = i + 1; i < ahole.length; i++, j++, k++) {
+        if (j === ahole.length) j = 0;
+        if (k === ahole.length) k = 0;
+        oneHoleMovements[i] = computeBevelVector(ahole[i], ahole[j], ahole[k]);
+      }
+      holesMovements.push(oneHoleMovements);
+      verticesMovements = [...verticesMovements, ...oneHoleMovements];
+    }
+
+    // Generate all the layers of points
+    const layers = [];
+
+    // Bottom bevel layers
+    for (let b = 0; b < bevelSegments; b++) {
+      const t = b / bevelSegments;
+      const z = bevelThickness * Math.cos(t * Math.PI / 2);
+      const bs = bevelSize * Math.sin(t * Math.PI / 2) + bevelOffset;
+
+      // Add points for contour and holes
+      for (let i = 0; i < contour.length; i++) {
+        const vert = scalePoint(contour[i], contourMovements[i], bs);
+        layers.push(vert[0], vert[1], -z + offsetSize[2]);
+      }
+      for (let h = 0, hl = holes.length; h < hl; h++) {
+        const ahole = holes[h];
+        oneHoleMovements = holesMovements[h];
+        for (let i = 0; i < ahole.length; i++) {
+          const vert = scalePoint(ahole[i], oneHoleMovements[i], bs);
+          layers.push(vert[0], vert[1], -z + offsetSize[2]);
+        }
+      }
+    }
+
+    // Base layer (z=0)
+    const bs = bevelSize + bevelOffset;
+    for (let i = 0; i < vlen; i++) {
+      const vert = bevelEnabled ? scalePoint(vertices[i], verticesMovements[i], bs) : vertices[i];
+      layers.push(vert[0], vert[1], 0 + offsetSize[2]);
+    }
+
+    // Middle layers
+    for (let s = 1; s <= steps; s++) {
+      for (let i = 0; i < vlen; i++) {
+        const vert = bevelEnabled ? scalePoint(vertices[i], verticesMovements[i], bs) : vertices[i];
+        layers.push(vert[0], vert[1], depth / steps * s + offsetSize[2]);
+      }
+    }
+
+    // Top bevel layers
+    for (let b = bevelSegments - 1; b >= 0; b--) {
+      const t = b / bevelSegments;
+      const z = bevelThickness * Math.cos(t * Math.PI / 2);
+      const topBevelSize = bevelSize * Math.sin(t * Math.PI / 2) + bevelOffset;
+      for (let i = 0, il = contour.length; i < il; i++) {
+        const vert = scalePoint(contour[i], contourMovements[i], topBevelSize);
+        layers.push(vert[0], vert[1], depth + z + offsetSize[2]);
+      }
+      for (let h = 0, hl = holes.length; h < hl; h++) {
+        const ahole = holes[h];
+        oneHoleMovements = holesMovements[h];
+        for (let i = 0, il = ahole.length; i < il; i++) {
+          const vert = scalePoint(ahole[i], oneHoleMovements[i], topBevelSize);
+          layers.push(vert[0], vert[1], depth + z + offsetSize[2]);
+        }
+      }
+    }
+
+    // Build all the faces
+    buildLidFaces(layers, faces, vlen, steps, bevelEnabled, bevelSegments, model.verticesArray, model.uvArray, model.colorArray, letterColor);
+    buildSideFaces(layers, contour, holes, vlen, steps, bevelSegments, model.verticesArray, model.uvArray, model.colorArray, letterColor);
+  }
+
+  /**
+   * Creates shape paths from the font and text
+   */
+  function buildShape() {
+    model.shapes = [];
+    if (!model.font || !model.text) {
+      return;
+    }
+    const path = model.font.getPath(model.text, 0, 0, model.fontSize);
+    if (!path || !path.commands || !path.commands.length) {
+      return;
+    }
+    let first;
+    let shapePath = createShapePath();
+    const commands = path.commands;
+    for (let i = 0; i < commands.length; i++) {
+      const command = commands[i];
+
+      // start a fresh shape if the previous one was closed
+      shapePath = shapePath || createShapePath();
+      switch (command.type) {
+        case 'M':
+          // Move to
+          shapePath.moveTo(command.x, -command.y);
+          first = command;
+          break;
+        case 'L':
+          // Line to
+          shapePath.lineTo(command.x, -command.y);
+          break;
+        case 'C':
+          // Cubic bezier curve
+          shapePath.bezierCurveTo(command.x1, -command.y1, command.x2, -command.y2, command.x, -command.y);
+          break;
+        case 'Q':
+          // Quadratic bezier curve
+          shapePath.quadraticCurveTo(command.x1, -command.y1, command.x, -command.y);
+          break;
+        case 'Z':
+          // Close path
+          // Close the contour
+          shapePath.lineTo(first.x, -first.y);
+
+          // Determine if this path is a clockwise contour (shape) or a counter-clockwise hole
+          if (isClockWise(shapePath.getPoints(1))) {
+            model.shapes.push(shapePath);
+          } else {
+            // Find which shape this hole belongs to
+            for (let j = 0; j < model.shapes.length; j++) {
+              const shape = model.shapes[j];
+              if (shape.isIntersect(shapePath)) {
+                shape.holes.push(shapePath);
+                break;
+              }
+            }
+          }
+
+          // Mark for restart on next iteration
+          shapePath = null;
+          break;
+        default:
+          console.warn(`Unknown path command: ${command.type}`);
+          break;
+      }
+    }
+
+    // If there's an unclosed shape, add it
+    if (shapePath) {
+      model.shapes.push(shapePath);
+    }
+  }
+
+  /**
+   * Creates a vtkPolyData from the processed shapes
+   * @returns {Object} vtkPolyData instance
+   */
+  function buildPolyData() {
+    model.verticesArray = [];
+    model.uvArray = [];
+    model.colorArray = [];
+    const polyData = vtkPolyData.newInstance();
+    const cells = vtkCellArray.newInstance();
+    const pointData = polyData.getPointData();
+
+    // Calculate the bounding box to center the text
+    const boundingSize = getBoundingSize(model.shapes, model.depth, model.curveSegments);
+    const offsetSize = [0, 0, 0];
+    subtract(boundingSize.min, boundingSize.max, offsetSize);
+
+    // Process each shape
+    let letterIndex = 0;
+    model.shapes.forEach(shape => {
+      let color = null;
+      if (typeof model.perLetterFaceColors === 'function') {
+        color = model.perLetterFaceColors(letterIndex) || [1, 1, 1];
+      }
+      addShape(shape, offsetSize, color);
+      letterIndex++;
+    });
+
+    // Create triangle indices
+    const vertexCount = model.verticesArray.length / 3;
+    const indices = [];
+
+    // Generate indices for triangles
+    for (let i = 0; i < vertexCount; i += 3) {
+      indices.push(i, i + 2, i + 1);
+    }
+
+    // Create cells for polydata
+    const cellSize = indices.length;
+    cells.resize(cellSize + cellSize / 3); // Allocate space for cells (+1 for size per cell)
+
+    // Add triangles to cells
+    for (let i = 0; i < indices.length; i += 3) {
+      cells.insertNextCell([indices[i], indices[i + 1], indices[i + 2]]);
+    }
+    polyData.setPolys(cells);
+
+    // Set points (vertices)
+    polyData.getPoints().setData(new Float32Array(model.verticesArray), 3);
+
+    // Set texture coordinates
+    const da = vtkDataArray.newInstance({
+      numberOfComponents: 2,
+      values: new Float32Array(model.uvArray),
+      name: 'TEXCOORD_0'
+    });
+    pointData.addArray(da);
+    pointData.setActiveTCoords(da.getName());
+
+    // Set color array if present
+    if (model.colorArray && model.colorArray.length) {
+      const ca = vtkDataArray.newInstance({
+        numberOfComponents: 3,
+        values: new Float32Array(model.colorArray),
+        name: 'Colors'
+      });
+      pointData.addArray(ca);
+      pointData.setActiveScalars(ca.getName());
+    }
+    return polyData;
+  }
+
+  // -------------------------------------------------------------------------
+  // Public methods
+  // -------------------------------------------------------------------------
+
+  /**
+   * Handles the request to generate vector text data
+   * @param {Object} inData - Input data (not used)
+   * @param {Object} outData - Output data target
+   */
+  publicAPI.requestData = (inData, outData) => {
+    if (!model.font) {
+      vtkErrorMacro('Font object not set, make sure the TTF file is parsed using opentype.js.');
+      return;
+    }
+    if (!model.text) {
+      vtkErrorMacro('Text not set. Cannot generate vector text.');
+      return;
+    }
+    buildShape();
+    outData[0] = buildPolyData();
+  };
+}
+
+// ----------------------------------------------------------------------------
+// Object factory
+// ----------------------------------------------------------------------------
+
+/**
+ * Default values for the VectorText model
+ * shapes: Array to store shape paths
+ * verticesArray: Array of vertex coordinates
+ * uvArray: Array of texture coordinates
+ * font: Font object (from opentype.js)
+ * earcut: Earcut module for triangulation
+ * fontSize: Font size in points
+ * depth: Depth of the extruded text
+ * steps: Number of steps in extrusion (for curved surfaces)
+ * bevelEnabled: Whether to add beveled edges
+ * curveSegments: Number of segments for curved paths
+ * bevelThickness: Thickness of the bevel
+ * bevelSize: Size of the bevel
+ * bevelOffset: Offset of the bevel
+ * bevelSegments: Number of segments in the bevel
+ * text: The text to render
+ * perLetterFaceColors: Function to get per-letter face colors
+ */
+const DEFAULT_VALUES = {
+  shapes: [],
+  verticesArray: [],
+  uvArray: [],
+  font: null,
+  earcut: null,
+  // Earcut module for triangulation
+  fontSize: 10,
+  depth: 1,
+  steps: 1,
+  bevelEnabled: false,
+  curveSegments: 12,
+  bevelThickness: 0.2,
+  bevelSize: 0.1,
+  bevelOffset: 0,
+  bevelSegments: 1,
+  text: null,
+  perLetterFaceColors: null // (letterIndex: number) => [r,g,b]
+};
+
+function extend(publicAPI, model) {
+  let initialValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  Object.assign(model, DEFAULT_VALUES, initialValues);
+
+  // Object methods
+  macro.obj(publicAPI, model);
+  macro.algo(publicAPI, model, 0, 1);
+
+  // Build VTK API with automatic getters/setters
+  macro.setGet(publicAPI, model, ['fontSize', 'text', 'depth', 'steps', 'bevelEnabled', 'curveSegments', 'bevelThickness', 'bevelSize', 'bevelOffset', 'bevelSegments', 'perLetterFaceColors']);
+  macro.set(publicAPI, model, ['font']);
+  vtkVectorText(publicAPI, model);
+}
+const newInstance = macro.newInstance(extend, 'vtkVectorText');
+var vtkVector = {
+  newInstance,
+  extend
+};
+
+export { vtkVector as default, extend, newInstance };

package/Rendering/Core.js

@@ -38,6 +38,7 @@ import vtkSkybox from './Core/Skybox.js';
 import vtkSphereMapper from './Core/SphereMapper.js';
 import vtkStickMapper from './Core/StickMapper.js';
 import vtkTexture from './Core/Texture.js';
+import vtkVector from './Core/VectorText.js';
 import vtkViewport from './Core/Viewport.js';
 import vtkVolume from './Core/Volume.js';
 import vtkVolumeMapper from './Core/VolumeMapper.js';
@@ -87,6 +88,7 @@ var Core = {
   vtkSphereMapper,
   vtkStickMapper,
   vtkTexture,
+  vtkVector,
   vtkViewport,
   vtkVolume,
   vtkVolumeMapper,

package/Rendering/OpenGL/Texture.d.ts

@@ -246,7 +246,14 @@ export interface vtkOpenGLTexture extends vtkViewNode {
    * @param image The image to use for the texture.
    * @returns {boolean} True if the texture was successfully created, false otherwise.
    */
-  create2DFromImage(image: any): boolean;
+  create2DFromImage(image: HTMLImageElement): boolean;
+
+  /**
+   * Creates a 2D texture from an ImageBitmap.
+   * @param imageBitmap  The ImageBitmap to use for the texture.
+   *  @returns {boolean} True if the texture was successfully created, false otherwise.
+   */
+  create2DFromImageBitmap(imageBitmap: ImageBitmap): boolean;
 
   /**
    * Creates a 2D filterable texture from raw data, with a preference for size over accuracy if necessary.

package/Rendering/OpenGL/Texture.js

@@ -75,6 +75,19 @@ function vtkOpenGLTexture(publicAPI, model) {
     }
     // create the texture if it is not done already
     if (!model.handle || model.renderable.getMTime() > model.textureBuildTime.getMTime()) {
+      if (model.renderable.getImageBitmap() !== null) {
+        if (model.renderable.getInterpolate()) {
+          model.generateMipmap = true;
+          publicAPI.setMinificationFilter(Filter.LINEAR_MIPMAP_LINEAR);
+        }
+        // Have an Image which may not be complete
+        if (model.renderable.getImageBitmap() && model.renderable.getImageLoaded()) {
+          publicAPI.create2DFromImageBitmap(model.renderable.getImageBitmap());
+          publicAPI.activate();
+          publicAPI.sendParameters();
+          model.textureBuildTime.modified();
+        }
+      }
       // if we have an Image
       if (model.renderable.getImage() !== null) {
         if (model.renderable.getInterpolate()) {
@@ -1013,7 +1026,7 @@ function vtkOpenGLTexture(publicAPI, model) {
 
   //----------------------------------------------------------------------------
   publicAPI.create2DFromImage = image => {
-    // Now determine the texture parameters using the arguments.
+    // Determine the texture parameters using the arguments.
     publicAPI.getOpenGLDataType(VtkDataTypes.UNSIGNED_CHAR);
     publicAPI.getInternalFormat(VtkDataTypes.UNSIGNED_CHAR, 4);
     publicAPI.getFormat(VtkDataTypes.UNSIGNED_CHAR, 4);
@@ -1028,30 +1041,79 @@ function vtkOpenGLTexture(publicAPI, model) {
     model._openGLRenderWindow.activateTexture(publicAPI);
     publicAPI.createTexture();
     publicAPI.bind();
+    const needNearestPowerOfTwo = !model._openGLRenderWindow.getWebgl2() && (!isPowerOfTwo(image.width) || !isPowerOfTwo(image.height));
+    let textureSource = image;
+    let targetWidth = image.width;
+    let targetHeight = image.height;
+    let flipY = true;
+
+    // For WebGL1, we need to scale the image to the nearest power of two
+    // dimensions if the image is not already a power of two. For WebGL2, we can
+    // use the image as is. Note: Chrome has a perf issue where the path
+    // HTMLImageElement -> Canvas -> texSubImage2D is faster than
+    // HTMLImageElement -> texSubImage2D directly. See
+    // https://issues.chromium.org/issues/41311312#comment7
+    // Tested on Chrome 137.0.7151.104 Windows 11
+    const isChrome = window.chrome;
+    if (needNearestPowerOfTwo || isChrome) {
+      const canvas = new OffscreenCanvas(nearestPowerOfTwo(image.width), nearestPowerOfTwo(image.height));
+      targetWidth = canvas.width;
+      targetHeight = canvas.height;
+      const ctx = canvas.getContext('2d');
+      ctx.translate(0, canvas.height);
+      ctx.scale(1, -1);
+      ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
+      textureSource = canvas;
+      flipY = false; // we are flipping the image manually using translate/scale
+    }
+
+    model.width = targetWidth;
+    model.height = targetHeight;
 
     // Source texture data from the PBO.
-    // model.context.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+    model.context.pixelStorei(model.context.UNPACK_FLIP_Y_WEBGL, flipY);
     model.context.pixelStorei(model.context.UNPACK_ALIGNMENT, 1);
+    if (useTexStorage(VtkDataTypes.UNSIGNED_CHAR)) {
+      model.context.texStorage2D(model.target, 1, model.internalFormat, model.width, model.height);
+      model.context.texSubImage2D(model.target, 0, 0, 0, model.width, model.height, model.format, model.openGLDataType, textureSource);
+    } else {
+      model.context.texImage2D(model.target, 0, model.internalFormat, model.width, model.height, 0, model.format, model.openGLDataType, textureSource);
+    }
+    if (model.generateMipmap) {
+      model.context.generateMipmap(model.target);
+    }
+    model.allocatedGPUMemoryInBytes = model.width * model.height * model.depth * model.components * model._openGLRenderWindow.getDefaultTextureByteSize(VtkDataTypes.UNSIGNED_CHAR, getNorm16Ext(), publicAPI.useHalfFloat());
+    publicAPI.deactivate();
+    return true;
+  };
 
-    // Scale up the texture to the next highest power of two dimensions (if needed) and flip y.
-    const needNearestPowerOfTwo = !model._openGLRenderWindow.getWebgl2() && (!isPowerOfTwo(image.width) || !isPowerOfTwo(image.height));
-    const canvas = document.createElement('canvas');
-    canvas.width = needNearestPowerOfTwo ? nearestPowerOfTwo(image.width) : image.width;
-    canvas.height = needNearestPowerOfTwo ? nearestPowerOfTwo(image.height) : image.height;
-    model.width = canvas.width;
-    model.height = canvas.height;
-    const ctx = canvas.getContext('2d');
-    ctx.translate(0, canvas.height);
-    ctx.scale(1, -1);
-    ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
-    const safeImage = canvas;
+  //----------------------------------------------------------------------------
+  publicAPI.create2DFromImageBitmap = imageBitmap => {
+    // Determine the texture parameters.
+    publicAPI.getOpenGLDataType(VtkDataTypes.UNSIGNED_CHAR);
+    publicAPI.getInternalFormat(VtkDataTypes.UNSIGNED_CHAR, 4);
+    publicAPI.getFormat(VtkDataTypes.UNSIGNED_CHAR, 4);
+    if (!model.internalFormat || !model.format || !model.openGLDataType) {
+      vtkErrorMacro('Failed to determine texture parameters.');
+      return false;
+    }
+    model.target = model.context.TEXTURE_2D;
+    model.components = 4;
+    model.depth = 1;
+    model.numberOfDimensions = 2;
+    model._openGLRenderWindow.activateTexture(publicAPI);
+    publicAPI.createTexture();
+    publicAPI.bind();
+
+    // Prepare texture unpack alignment
+    model.context.pixelStorei(model.context.UNPACK_ALIGNMENT, 1);
+    model.width = imageBitmap.width;
+    model.height = imageBitmap.height;
     if (useTexStorage(VtkDataTypes.UNSIGNED_CHAR)) {
       model.context.texStorage2D(model.target, 1, model.internalFormat, model.width, model.height);
-      if (safeImage != null) {
-        model.context.texSubImage2D(model.target, 0, 0, 0, model.width, model.height, model.format, model.openGLDataType, safeImage);
-      }
+      model.context.texSubImage2D(model.target, 0, 0, 0, model.width, model.height, model.format, model.openGLDataType, imageBitmap);
     } else {
-      model.context.texImage2D(model.target, 0, model.internalFormat, model.width, model.height, 0, model.format, model.openGLDataType, safeImage);
+      model.context.texImage2D(model.target, 0, model.internalFormat, model.width, model.height, 0, model.format, model.openGLDataType, imageBitmap);
     }
     if (model.generateMipmap) {
       model.context.generateMipmap(model.target);

package/index.d.ts

@@ -206,6 +206,7 @@
 /// <reference path="./Rendering/Core/SphereMapper.d.ts" />
 /// <reference path="./Rendering/Core/StickMapper.d.ts" />
 /// <reference path="./Rendering/Core/Texture.d.ts" />
+/// <reference path="./Rendering/Core/VectorText.d.ts" />
 /// <reference path="./Rendering/Core/Viewport.d.ts" />
 /// <reference path="./Rendering/Core/Volume.d.ts" />
 /// <reference path="./Rendering/Core/VolumeMapper/Constants.d.ts" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitware/vtk.js",
-  "version": "34.0.0",
+  "version": "34.2.0",
   "description": "Visualization Toolkit for the Web",
   "keywords": [
     "3d",