three-text 0.2.11 → 0.2.12

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * three-text v0.2.11
+ * three-text v0.2.12
  * Copyright (C) 2025 Countertype LLC
  * 
  * This program is free software: you can redistribute it and/or modify
@@ -3776,7 +3776,7 @@
             this.fontId = fontId;
         }
         // Build instanced geometry from glyph contours
-        buildInstancedGeometry(clustersByLine, depth, removeOverlaps, isCFF, separateGlyphs = false) {
+        buildInstancedGeometry(clustersByLine, depth, removeOverlaps, isCFF, separateGlyphs = false, coloredTextIndices) {
             perfLogger.start('GlyphGeometryBuilder.buildInstancedGeometry', {
                 lineCount: clustersByLine.length,
                 wordCount: clustersByLine.flat().length,
@@ -3802,7 +3802,13 @@
                     // Step 2: Check for overlaps within the cluster
                     const relativePositions = cluster.glyphs.map((g) => new Vec3(g.x, g.y, 0));
                     const boundaryGroups = this.clusterer.cluster(clusterGlyphContours, relativePositions);
-                    const hasOverlaps = separateGlyphs
+                    const clusterHasColoredGlyphs = coloredTextIndices &&
+                        cluster.glyphs.some((g) => coloredTextIndices.has(g.absoluteTextIndex));
+                    // Force glyph-level caching if:
+                    // - separateGlyphs flag is set (for shader attributes), OR
+                    // - cluster contains selectively colored text (needs separate vertex ranges per glyph)
+                    const forceSeparate = separateGlyphs || clusterHasColoredGlyphs;
+                    const hasOverlaps = forceSeparate
                         ? false
                         : boundaryGroups.some((group) => group.length > 1);
                     if (hasOverlaps) {
@@ -4012,30 +4018,14 @@
             perfLogger.start('TextShaper.shapeLines', {
                 lineCount: lineInfos.length
             });
-            // Calculate color boundaries once for the entire text before line processing
-            const colorBoundaries = new Set();
-            if (color &&
-                typeof color === 'object' &&
-                'byText' in color &&
-                color.byText &&
-                originalText) {
-                for (const textToColor of Object.keys(color.byText)) {
-                    let index = 0;
-                    while ((index = originalText.indexOf(textToColor, index)) !== -1) {
-                        colorBoundaries.add(index);
-                        colorBoundaries.add(index + textToColor.length);
-                        index += textToColor.length;
-                    }
-                }
-            }
             const clustersByLine = [];
             lineInfos.forEach((lineInfo, lineIndex) => {
-                const clusters = this.shapeLineIntoClusters(lineInfo, lineIndex, scaledLineHeight, letterSpacing, align, direction, colorBoundaries);
+                const clusters = this.shapeLineIntoClusters(lineInfo, lineIndex, scaledLineHeight, letterSpacing, align, direction);
                 clustersByLine.push(clusters);
             });
             return clustersByLine;
         }
-        shapeLineIntoClusters(lineInfo, lineIndex, scaledLineHeight, letterSpacing, align, direction, colorBoundaries) {
+        shapeLineIntoClusters(lineInfo, lineIndex, scaledLineHeight, letterSpacing, align, direction) {
             const buffer = this.loadedFont.hb.createBuffer();
             if (direction === 'rtl') {
                 buffer.setDirection('rtl');
@@ -4068,8 +4058,9 @@
                     glyph.absoluteTextIndex = lineInfo.originalStart + glyph.cl;
                 }
                 glyph.lineIndex = lineIndex;
-                const isBoundary = colorBoundaries.has(glyph.absoluteTextIndex);
-                if (isWhitespace || isBoundary) {
+                // Cluster boundaries are based on whitespace only.
+                // Coloring is applied later via vertex colors and must never affect shaping/kerning.
+                if (isWhitespace) {
                     if (currentClusterGlyphs.length > 0) {
                         clusters.push({
                             text: currentClusterText,
@@ -5256,7 +5247,35 @@
                 // Allow manual override via options.removeOverlaps
                 const shouldRemoveOverlaps = options.removeOverlaps ?? this.loadedFont.isVariable ?? false;
                 const clustersByLine = this.textShaper.shapeLines(layoutData.lines, layoutData.scaledLineHeight, layoutData.letterSpacing, layoutData.align, layoutData.direction, options.color, options.text);
-                const shapedResult = this.geometryBuilder.buildInstancedGeometry(clustersByLine, layoutData.depth, shouldRemoveOverlaps, this.loadedFont.metrics.isCFF, options.separateGlyphsWithAttributes || false);
+                // Pre-compute which character indices will be colored. This allows geometry building
+                // to selectively use glyph-level caching (separate vertices) only for clusters containing
+                // colored text, while non-colored clusters can still use fast cluster-level merging
+                let coloredTextIndices;
+                if (options.color && typeof options.color === 'object' && !Array.isArray(options.color)) {
+                    if (options.color.byText || options.color.byCharRange) {
+                        // Build the set manually since glyphs don't exist yet
+                        coloredTextIndices = new Set();
+                        if (options.color.byText) {
+                            for (const pattern of Object.keys(options.color.byText)) {
+                                let index = 0;
+                                while ((index = options.text.indexOf(pattern, index)) !== -1) {
+                                    for (let i = index; i < index + pattern.length; i++) {
+                                        coloredTextIndices.add(i);
+                                    }
+                                    index += pattern.length;
+                                }
+                            }
+                        }
+                        if (options.color.byCharRange) {
+                            for (const range of options.color.byCharRange) {
+                                for (let i = range.start; i < range.end; i++) {
+                                    coloredTextIndices.add(i);
+                                }
+                            }
+                        }
+                    }
+                }
+                const shapedResult = this.geometryBuilder.buildInstancedGeometry(clustersByLine, layoutData.depth, shouldRemoveOverlaps, this.loadedFont.metrics.isCFF, options.separateGlyphsWithAttributes || false, coloredTextIndices);
                 const cacheStats = this.geometryBuilder.getCacheStats();
                 const result = this.finalizeGeometry(shapedResult.vertices, shapedResult.normals, shapedResult.indices, shapedResult.glyphInfos, shapedResult.planeBounds, options, cacheStats, options.text);
                 if (options.separateGlyphsWithAttributes) {