three-text 0.5.0 → 0.5.2

package/dist/vector/react.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import * as THREE from 'three';
-import { VectorTextResult, Text as Text$2 } from './index';
+import { VectorTextOptions, VectorResult, Text as Text$2 } from './index';
 
 interface HyphenationTrieNode {
     patterns: number[] | null;
@@ -255,6 +255,8 @@ declare class Text$1 {
     private static patternCache;
     private static hbInitPromise;
     private static fontCache;
+    private static fontLoadPromises;
+    private static fontRefCounts;
     private static fontCacheMemoryBytes;
     private static maxFontCacheMemoryBytes;
     private static fontIdCounter;
@@ -263,6 +265,7 @@ declare class Text$1 {
     private fontLoader;
     private loadedFont?;
     private currentFontId;
+    private currentFontCacheKey?;
     private textShaper?;
     private textLayout?;
     private constructor();
@@ -270,6 +273,8 @@ declare class Text$1 {
     static setHarfBuzzBuffer(wasmBuffer: ArrayBuffer): void;
     static init(): Promise<HarfBuzzInstance>;
     static create(options: TextOptions): Promise<TextLayoutHandle>;
+    private static retainFont;
+    private static releaseFont;
     private static resolveFont;
     private static loadAndCacheFont;
     private static trackFontCacheAdd;
@@ -277,6 +282,7 @@ declare class Text$1 {
     private static enforceFontCacheMemoryLimit;
     private static generateFontContentHash;
     private setLoadedFont;
+    private releaseCurrentFont;
     private loadFont;
     private createLayout;
     private prepareHyphenation;
@@ -293,14 +299,14 @@ declare class Text$1 {
     destroy(): void;
 }
 
-interface TextProps extends Omit<TextOptions, 'text' | 'color'> {
+interface TextProps extends Omit<VectorTextOptions, 'text' | 'color'> {
     children: string;
     font: string | ArrayBuffer;
     fillColor?: THREE.ColorRepresentation;
     position?: [number, number, number];
     rotation?: [number, number, number];
     scale?: [number, number, number];
-    onLoad?: (result: VectorTextResult) => void;
+    onLoad?: (result: VectorResult) => void;
     onError?: (error: Error) => void;
 }
 declare const Text: react.ForwardRefExoticComponent<TextProps & react.RefAttributes<THREE.Group<THREE.Object3DEventMap>>> & {

package/dist/vector/react.js

@@ -1,8 +1,6 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useRef, forwardRef, useState, useEffect } from 'react';
-import * as THREE from 'three';
 import { Text as Text$1 } from './index.js';
-import { createVectorMeshes } from './loopBlinnTSL.js';
 
 function deepEqual(a, b) {
     if (a === b)
@@ -45,59 +43,64 @@ function useDeepCompareMemo(value) {
     return ref.current;
 }
 
-const hasNodeMaterials = typeof THREE.MeshBasicNodeMaterial !== 'undefined';
 const TextInner = forwardRef(function TextInner(props, ref) {
-    const { children, font, fillColor = '#ffffff', position = [0, 0, 0], rotation = [0, 0, 0], scale = [1, 1, 1], onLoad, onError, ...restOptions } = props;
+    const { children, font, fillColor = '#ffffff', positionNode, colorNode, position = [0, 0, 0], rotation = [0, 0, 0], scale = [1, 1, 1], onLoad, onError, ...restOptions } = props;
     const memoizedTextOptions = useDeepCompareMemo(restOptions);
-    const [meshes, setMeshes] = useState(null);
+    const [group, setGroup] = useState(null);
     const [error, setError] = useState(null);
     const resultRef = useRef(null);
-    const meshesRef = useRef(null);
+    const opRef = useRef(Promise.resolve(null));
+    const onLoadRef = useRef(onLoad);
+    const onErrorRef = useRef(onError);
+    onLoadRef.current = onLoad;
+    onErrorRef.current = onError;
     useEffect(() => {
         let cancelled = false;
-        if (!hasNodeMaterials) {
-            const err = new Error('three-text/vector/react requires MeshBasicNodeMaterial (Three.js r170+ with node materials / WebGPU build)');
-            setError(err);
-            if (onError)
-                onError(err);
-            else
-                console.error(err.message);
-            return;
-        }
         async function setup() {
             try {
                 setError(null);
-                const result = await Text$1.create({
-                    text: children,
-                    font,
-                    ...memoizedTextOptions
+                const resultPromise = opRef.current.catch(() => null).then(() => {
+                    if (cancelled)
+                        return null;
+                    return resultRef.current
+                        ? resultRef.current.update({
+                            text: children,
+                            font,
+                            color: fillColor,
+                            positionNode,
+                            colorNode,
+                            ...memoizedTextOptions
+                        })
+                        : Text$1.create({
+                            text: children,
+                            font,
+                            color: fillColor,
+                            positionNode,
+                            colorNode,
+                            ...memoizedTextOptions
+                        });
                 });
+                opRef.current = resultPromise.catch(() => null);
+                const result = await resultPromise;
+                if (!result)
+                    return;
                 if (cancelled) {
                     result.dispose();
                     return;
                 }
-                resultRef.current?.dispose();
+                const prev = resultRef.current;
                 resultRef.current = result;
-                const bounds = result.geometryData.planeBounds;
-                const cx = (bounds.min.x + bounds.max.x) * 0.5;
-                const cy = (bounds.min.y + bounds.max.y) * 0.5;
-                const lb = createVectorMeshes(result.geometryData, fillColor);
-                lb.setOffset(-cx, -cy, 0);
-                lb.interiorMesh.renderOrder = 0;
-                lb.curveMesh.renderOrder = 1;
-                lb.fillMesh.renderOrder = 2;
-                meshesRef.current?.dispose();
-                meshesRef.current = lb;
-                setMeshes(lb);
-                if (onLoad)
-                    onLoad(result);
+                setGroup(result.group);
+                if (onLoadRef.current)
+                    onLoadRef.current(result);
+                requestAnimationFrame(() => prev?.dispose());
             }
             catch (err) {
                 const e = err;
                 if (!cancelled) {
                     setError(e);
-                    if (onError)
-                        onError(e);
+                    if (onErrorRef.current)
+                        onErrorRef.current(e);
                     else
                         console.error('three-text/vector/react:', e);
                 }
@@ -106,17 +109,18 @@ const TextInner = forwardRef(function TextInner(props, ref) {
         setup();
         return () => {
             cancelled = true;
-            meshesRef.current?.dispose();
-            meshesRef.current = null;
+        };
+    }, [children, font, memoizedTextOptions, fillColor, positionNode, colorNode]);
+    useEffect(() => {
+        return () => {
             resultRef.current?.dispose();
             resultRef.current = null;
-            setMeshes(null);
         };
-    }, [children, font, memoizedTextOptions, fillColor, onLoad, onError]);
-    if (error || !meshes) {
+    }, []);
+    if (error || !group) {
         return null;
     }
-    return (jsxs("group", { ref: ref, position: position, rotation: rotation, scale: scale, children: [jsx("primitive", { object: meshes.interiorMesh }), jsx("primitive", { object: meshes.curveMesh }), jsx("primitive", { object: meshes.fillMesh })] }));
+    return (jsx("group", { ref: ref, position: position, rotation: rotation, scale: scale, children: jsx("primitive", { object: group }) }));
 });
 const Text = Object.assign(TextInner, {
     setHarfBuzzPath: Text$1.setHarfBuzzPath,

package/dist/vector/webgl/index.cjs

@@ -185,7 +185,9 @@ void main() {
             gl.enable(gl.STENCIL_TEST);
             gl.stencilMask(0xff);
             gl.stencilFunc(gl.ALWAYS, 0, 0xff);
-            gl.stencilOp(gl.KEEP, gl.KEEP, gl.INVERT);
+            // Nonzero winding: front faces increment, back faces decrement
+            gl.stencilOpSeparate(gl.FRONT, gl.KEEP, gl.KEEP, gl.INCR_WRAP);
+            gl.stencilOpSeparate(gl.BACK, gl.KEEP, gl.KEEP, gl.DECR_WRAP);
             gl.colorMask(false, false, false, false);
             if (geometryResources.interiorIndexCount > 0) {
                 gl.useProgram(interiorProgram.program);

package/dist/vector/webgl/index.js

@@ -183,7 +183,9 @@ void main() {
             gl.enable(gl.STENCIL_TEST);
             gl.stencilMask(0xff);
             gl.stencilFunc(gl.ALWAYS, 0, 0xff);
-            gl.stencilOp(gl.KEEP, gl.KEEP, gl.INVERT);
+            // Nonzero winding: front faces increment, back faces decrement
+            gl.stencilOpSeparate(gl.FRONT, gl.KEEP, gl.KEEP, gl.INCR_WRAP);
+            gl.stencilOpSeparate(gl.BACK, gl.KEEP, gl.KEEP, gl.DECR_WRAP);
             gl.colorMask(false, false, false, false);
             if (geometryResources.interiorIndexCount > 0) {
                 gl.useProgram(interiorProgram.program);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "three-text",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "3D mesh font geometry and text layout engine for the web",
   "main": "dist/three/index.cjs",
   "module": "dist/three/index.js",