feat(VectorText): add support for perLetterFaceColors

daker · sankhesh · commit 02a911a6ebdc · 2025-06-30T20:04:39.000Z
diff --git a/Sources/Rendering/Core/VectorText/Utils.js b/Sources/Rendering/Core/VectorText/Utils.js
@@ -426,8 +426,21 @@ function scalePoint(pt, vec, size) {
  * @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) {
+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]);
@@ -445,6 +458,9 @@ function addTriangle(layers, a, b, c, verticesArray, uvArray) {
   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]);
+  }
 }
 
 /**
@@ -456,8 +472,20 @@ function addTriangle(layers, a, b, c, verticesArray, uvArray) {
  * @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) {
+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])
@@ -482,6 +510,10 @@ function addQuad(layers, a, b, c, d, verticesArray, uvArray) {
   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]);
+  }
 }
 
 /**
@@ -503,7 +535,9 @@ function buildLidFaces(
   bevelEnabled,
   bevelSegments,
   verticesArray,
-  uvArray
+  uvArray,
+  colorArray,
+  color
 ) {
   if (bevelEnabled) {
     let layer = 0;
@@ -515,7 +549,9 @@ function buildLidFaces(
         b + offset,
         a + offset,
         verticesArray,
-        uvArray
+        uvArray,
+        colorArray,
+        color
       );
     });
 
@@ -530,13 +566,15 @@ function buildLidFaces(
         b + offset,
         c + offset,
         verticesArray,
-        uvArray
+        uvArray,
+        colorArray,
+        color
       );
     });
   } else {
     // Bottom faces
     faces.forEach(([a, b, c]) => {
-      addTriangle(layers, c, b, a, verticesArray, uvArray);
+      addTriangle(layers, c, b, a, verticesArray, uvArray, colorArray, color);
     });
 
     // Top faces
@@ -548,7 +586,9 @@ function buildLidFaces(
         b + offset,
         c + offset,
         verticesArray,
-        uvArray
+        uvArray,
+        colorArray,
+        color
       );
     });
   }
@@ -573,7 +613,9 @@ function buildWalls(
   steps,
   bevelSegments,
   verticesArray,
-  uvArray
+  uvArray,
+  colorArray,
+  color
 ) {
   const totalLayers = steps + bevelSegments * 2;
   for (let i = 0; i < contour.length; i++) {
@@ -589,7 +631,7 @@ function buildWalls(
       const c = layerOffset + k + slen2;
       const d = layerOffset + j + slen2;
 
-      addQuad(layers, a, b, c, d, verticesArray, uvArray);
+      addQuad(layers, a, b, c, d, verticesArray, uvArray, colorArray, color);
     }
   }
 }
@@ -613,7 +655,9 @@ function buildSideFaces(
   steps,
   bevelSegments,
   verticesArray,
-  uvArray
+  uvArray,
+  colorArray,
+  color
 ) {
   let layerOffset = 0;
   // Create contour walls
@@ -625,7 +669,9 @@ function buildSideFaces(
     steps,
     bevelSegments,
     verticesArray,
-    uvArray
+    uvArray,
+    colorArray,
+    color
   );
   layerOffset += contour.length;
 
@@ -640,7 +686,9 @@ function buildSideFaces(
       steps,
       bevelSegments,
       verticesArray,
-      uvArray
+      uvArray,
+      colorArray,
+      color
     );
     layerOffset += ahole.length;
   }
diff --git a/Sources/Rendering/Core/VectorText/example/index.js b/Sources/Rendering/Core/VectorText/example/index.js
@@ -47,6 +47,9 @@ fontKeys.forEach((key) => {
 });
 fontSelect.value = selectedFont;
 
+let text = 'I love VTK.js!';
+let size = 16;
+
 // ----------------------------------------------------------------------------
 // Add a cone source
 // ----------------------------------------------------------------------------
@@ -61,11 +64,20 @@ async function load() {
     .then((response) => response.arrayBuffer())
     .then((buffer) => {
       const font = fontModule.parse(buffer);
+      // Generate a random color based on the letter index
+      function perLetterFaceColors(letterIndex) {
+        const seed = letterIndex * 9301 + 49297;
+        const r = (Math.sin(seed) + 1) / 2;
+        const g = (Math.sin(seed + 1) + 1) / 2;
+        const b = (Math.sin(seed + 2) + 1) / 2;
+        return [r, g, b];
+      }
       pd = vtkVectorText.newInstance({
         font,
         bevelEnabled: bevelInput.checked,
-        text: 'I love VTK.js!',
-        size: 16,
+        text,
+        size,
+        perLetterFaceColors,
         earcut: earcutModule.default,
       });
       mapper.setInputConnection(pd.getOutputPort());
@@ -76,14 +88,14 @@ async function load() {
     });
 
   textInput.addEventListener('input', (event) => {
-    const text = event.target.value;
+    text = event.target.value;
     pd.setText(text);
     renderer.resetCamera();
     renderWindow.render();
   });
 
   fontSize.addEventListener('input', (event) => {
-    const size = event.target.value;
+    size = event.target.value;
     pd.setFontSize(size);
     renderer.resetCamera();
     renderWindow.render();
diff --git a/Sources/Rendering/Core/VectorText/index.d.ts b/Sources/Rendering/Core/VectorText/index.d.ts
@@ -1,4 +1,5 @@
 import { vtkAlgorithm, vtkObject } from '../../../interfaces';
+import { Nullable, RGBColor } from '../../../types';
 
 export interface IVectorTextInitialValues {
   fontSize?: number;
@@ -12,6 +13,8 @@ export interface IVectorTextInitialValues {
   bevelOffset?: number;
   bevelSegments?: number;
   font?: any;
+  earcut?: any; // Earcut module for triangulation
+  perLetterFaceColors?: (letterIndex: number) => [number, number, number];
 }
 
 type vtkVectorTextBase = vtkObject & vtkAlgorithm;
@@ -52,11 +55,6 @@ export interface vtkVectorText extends vtkVectorTextBase {
    */
   getDepth(): number;
 
-  /**
-   * Returns the font object used for rendering the text.
-   */
-  getFont(): any;
-
   /**
    * Returns the current font size.
    */
@@ -72,6 +70,12 @@ export interface vtkVectorText extends vtkVectorTextBase {
    */
   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.
@@ -138,6 +142,12 @@ export interface vtkVectorText extends vtkVectorTextBase {
    * @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;
 }
 
 /**
diff --git a/Sources/Rendering/Core/VectorText/index.js b/Sources/Rendering/Core/VectorText/index.js
