three-text 0.5.2 → 0.6.0

package/dist/vector/index2.cjs

@@ -0,0 +1,287 @@
+'use strict';
+
+var core = require('./core/index.cjs');
+var THREE = require('three');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
+
+// Restructures the tightly-packed vertex buffer from SlugPacker into
+// separate per-attribute arrays for GPU attribute binding
+const FLOATS_PER_VERT = 20;
+function unpackSlugVertices(gpuData) {
+    const vertCount = gpuData.shapeCount * 4;
+    const positions = new Float32Array(vertCount * 3);
+    const texcoords = new Float32Array(vertCount * 2);
+    const bandings = new Float32Array(vertCount * 4);
+    const glyphData = new Float32Array(vertCount * 4);
+    const colors = new Float32Array(vertCount * 4);
+    const srcF = gpuData.vertices;
+    const srcU = new Uint32Array(srcF.buffer, srcF.byteOffset, srcF.length);
+    for (let i = 0; i < vertCount; i++) {
+        const s = i * FLOATS_PER_VERT;
+        positions[i * 3] = srcF[s];
+        positions[i * 3 + 1] = srcF[s + 1];
+        positions[i * 3 + 2] = 0;
+        texcoords[i * 2] = srcF[s + 4];
+        texcoords[i * 2 + 1] = srcF[s + 5];
+        bandings[i * 4] = srcF[s + 12];
+        bandings[i * 4 + 1] = srcF[s + 13];
+        bandings[i * 4 + 2] = srcF[s + 14];
+        bandings[i * 4 + 3] = srcF[s + 15];
+        // Unpack glyph location and band metadata from bit-packed fields
+        const g0 = srcU[s + 6];
+        const g1 = srcU[s + 7];
+        glyphData[i * 4] = g0 & 0xFFFF;
+        glyphData[i * 4 + 1] = (g0 >>> 16) & 0xFFFF;
+        glyphData[i * 4 + 2] = g1 & 0xFFFF;
+        glyphData[i * 4 + 3] = (g1 >>> 16) & 0xFFFF;
+        colors[i * 4] = srcF[s + 16];
+        colors[i * 4 + 1] = srcF[s + 17];
+        colors[i * 4 + 2] = srcF[s + 18];
+        colors[i * 4 + 3] = srcF[s + 19];
+    }
+    // Per-glyph center: average of quad corner positions
+    const glyphCenters = new Float32Array(vertCount * 3);
+    const glyphIndices = new Float32Array(vertCount);
+    for (let g = 0; g < gpuData.shapeCount; g++) {
+        const base = g * 4;
+        let cx = 0, cy = 0;
+        for (let v = 0; v < 4; v++) {
+            cx += positions[(base + v) * 3];
+            cy += positions[(base + v) * 3 + 1];
+        }
+        cx *= 0.25;
+        cy *= 0.25;
+        for (let v = 0; v < 4; v++) {
+            const idx = base + v;
+            glyphCenters[idx * 3] = cx;
+            glyphCenters[idx * 3 + 1] = cy;
+            glyphCenters[idx * 3 + 2] = 0;
+            glyphIndices[idx] = g;
+        }
+    }
+    return { positions, texcoords, bandings, glyphData, colors, glyphCenters, glyphIndices };
+}
+
+var fragGLSL = "#version 300 es\n// GLSL 300 es port of the Slug fragment shader\n// Eric Lengyel, MIT License, 2017\n\nprecision highp float;\nprecision highp int;\n\n#define kLogBandTextureWidth 12\n\nin vec4 v_color;\nin vec2 v_texcoord;\nflat in vec4 v_banding;\nflat in ivec4 v_glyph;\n\nuniform sampler2D curveTexture;     // RGBA32F control points\nuniform highp usampler2D bandTexture; // RGBA32UI band data\n\nlayout(location = 0) out vec4 outColor;\n\nuint CalcRootCode(float y1, float y2, float y3) {\n    uint i1 = floatBitsToUint(y1) >> 31u;\n    uint i2 = floatBitsToUint(y2) >> 30u;\n    uint i3 = floatBitsToUint(y3) >> 29u;\n\n    uint shift = (i2 & 2u) | (i1 & ~2u);\n    shift = (i3 & 4u) | (shift & ~4u);\n\n    return (0x2E74u >> shift) & 0x0101u;\n}\n\nvec2 SolveHorizPoly(vec4 p12, vec2 p3) {\n    vec2 a = p12.xy - p12.zw * 2.0 + p3;\n    vec2 b = p12.xy - p12.zw;\n    float ra = 1.0 / a.y;\n    float rb = 0.5 / b.y;\n\n    float d = sqrt(max(b.y * b.y - a.y * p12.y, 0.0));\n    float t1 = (b.y - d) * ra;\n    float t2 = (b.y + d) * ra;\n\n    if (abs(a.y) < 1.0 / 65536.0) t1 = t2 = p12.y * rb;\n\n    return vec2((a.x * t1 - b.x * 2.0) * t1 + p12.x, (a.x * t2 - b.x * 2.0) * t2 + p12.x);\n}\n\nvec2 SolveVertPoly(vec4 p12, vec2 p3) {\n    vec2 a = p12.xy - p12.zw * 2.0 + p3;\n    vec2 b = p12.xy - p12.zw;\n    float ra = 1.0 / a.x;\n    float rb = 0.5 / b.x;\n\n    float d = sqrt(max(b.x * b.x - a.x * p12.x, 0.0));\n    float t1 = (b.x - d) * ra;\n    float t2 = (b.x + d) * ra;\n\n    if (abs(a.x) < 1.0 / 65536.0) t1 = t2 = p12.x * rb;\n\n    return vec2((a.y * t1 - b.y * 2.0) * t1 + p12.y, (a.y * t2 - b.y * 2.0) * t2 + p12.y);\n}\n\nivec2 CalcBandLoc(ivec2 glyphLoc, uint offset) {\n    ivec2 bandLoc = ivec2(glyphLoc.x + int(offset), glyphLoc.y);\n    bandLoc.y += bandLoc.x >> kLogBandTextureWidth;\n    bandLoc.x &= (1 << kLogBandTextureWidth) - 1;\n    return bandLoc;\n}\n\nfloat CalcCoverage(float xcov, float ycov, float xwgt, float ywgt, int flags) {\n    float coverage = max(abs(xcov * xwgt + ycov * ywgt) / max(xwgt + ywgt, 1.0 / 65536.0), min(abs(xcov), abs(ycov)));\n\n#if defined(SLUG_EVENODD)\n    if ((flags & 0x1000) == 0) {\n#endif\n        coverage = clamp(coverage, 0.0, 1.0);\n#if defined(SLUG_EVENODD)\n    } else {\n        coverage = 1.0 - abs(1.0 - fract(coverage * 0.5) * 2.0);\n    }\n#endif\n\n#if defined(SLUG_WEIGHT)\n    coverage = sqrt(coverage);\n#endif\n\n    return coverage;\n}\n\nfloat SlugRenderSingle(vec2 renderCoord, vec2 emsPerPixel, vec4 bandTransform, ivec4 glyphData) {\n    int curveIndex;\n\n    vec2 pixelsPerEm = 1.0 / emsPerPixel;\n\n    ivec2 bandMax = glyphData.zw;\n    bandMax.y &= 0x00FF;\n\n    ivec2 bandIndex = clamp(ivec2(renderCoord * bandTransform.xy + bandTransform.zw), ivec2(0, 0), bandMax);\n    ivec2 glyphLoc = glyphData.xy;\n\n    float xcov = 0.0;\n    float xwgt = 0.0;\n\n    uvec2 hbandData = texelFetch(bandTexture, ivec2(glyphLoc.x + bandIndex.y, glyphLoc.y), 0).xy;\n    ivec2 hbandLoc = CalcBandLoc(glyphLoc, hbandData.y);\n\n    for (curveIndex = 0; curveIndex < int(hbandData.x); curveIndex++) {\n        ivec2 curveLoc = ivec2(texelFetch(bandTexture, ivec2(hbandLoc.x + curveIndex, hbandLoc.y), 0).xy);\n\n        vec4 p12 = texelFetch(curveTexture, curveLoc, 0) - vec4(renderCoord, renderCoord);\n        vec2 p3 = texelFetch(curveTexture, ivec2(curveLoc.x + 1, curveLoc.y), 0).xy - renderCoord;\n\n        if (max(max(p12.x, p12.z), p3.x) * pixelsPerEm.x < -0.5) break;\n\n        uint code = CalcRootCode(p12.y, p12.w, p3.y);\n        if (code != 0u) {\n            vec2 r = SolveHorizPoly(p12, p3) * pixelsPerEm.x;\n\n            if ((code & 1u) != 0u) {\n                xcov += clamp(r.x + 0.5, 0.0, 1.0);\n                xwgt = max(xwgt, clamp(1.0 - abs(r.x) * 2.0, 0.0, 1.0));\n            }\n\n            if (code > 1u) {\n                xcov -= clamp(r.y + 0.5, 0.0, 1.0);\n                xwgt = max(xwgt, clamp(1.0 - abs(r.y) * 2.0, 0.0, 1.0));\n            }\n        }\n    }\n\n    float ycov = 0.0;\n    float ywgt = 0.0;\n\n    uvec2 vbandData = texelFetch(bandTexture, ivec2(glyphLoc.x + bandMax.y + 1 + bandIndex.x, glyphLoc.y), 0).xy;\n    ivec2 vbandLoc = CalcBandLoc(glyphLoc, vbandData.y);\n\n    for (curveIndex = 0; curveIndex < int(vbandData.x); curveIndex++) {\n        ivec2 curveLoc = ivec2(texelFetch(bandTexture, ivec2(vbandLoc.x + curveIndex, vbandLoc.y), 0).xy);\n        vec4 p12 = texelFetch(curveTexture, curveLoc, 0) - vec4(renderCoord, renderCoord);\n        vec2 p3 = texelFetch(curveTexture, ivec2(curveLoc.x + 1, curveLoc.y), 0).xy - renderCoord;\n\n        if (max(max(p12.y, p12.w), p3.y) * pixelsPerEm.y < -0.5) break;\n\n        uint code = CalcRootCode(p12.x, p12.z, p3.x);\n        if (code != 0u) {\n            vec2 r = SolveVertPoly(p12, p3) * pixelsPerEm.y;\n\n            if ((code & 1u) != 0u) {\n                ycov -= clamp(r.x + 0.5, 0.0, 1.0);\n                ywgt = max(ywgt, clamp(1.0 - abs(r.x) * 2.0, 0.0, 1.0));\n            }\n\n            if (code > 1u) {\n                ycov += clamp(r.y + 0.5, 0.0, 1.0);\n                ywgt = max(ywgt, clamp(1.0 - abs(r.y) * 2.0, 0.0, 1.0));\n            }\n        }\n    }\n\n    return CalcCoverage(xcov, ycov, xwgt, ywgt, glyphData.w);\n}\n\nfloat SlugRender(vec2 renderCoord, vec4 bandTransform, ivec4 glyphData) {\n    vec2 emsPerPixel = fwidth(renderCoord);\n\n#if defined(SLUG_ADAPTIVE_SUPERSAMPLE)\n    // Per-pixel rotated RGSS-4.  The base RGSS offsets are rotated by a\n    // unique angle per fragment (interleaved gradient noise).  This converts\n    // structured aliasing shimmer into uncorrelated grain that the eye\n    // naturally filters out, much closer to how hardware MSAA on many small\n    // triangles behaves perceptually.\n    float noise = fract(52.9829189 * fract(dot(gl_FragCoord.xy, vec2(0.06711056, 0.00583715))));\n    float angle = noise * 6.2831853;\n    float ca = cos(angle), sa = sin(angle);\n\n    // Base RGSS offsets rotated by per-pixel angle\n    vec2 o0 = vec2(ca * -0.375 - sa *  0.125, sa * -0.375 + ca *  0.125) * emsPerPixel;\n    vec2 o1 = vec2(ca *  0.125 - sa *  0.375, sa *  0.125 + ca *  0.375) * emsPerPixel;\n    vec2 o2 = vec2(ca *  0.375 - sa * -0.125, sa *  0.375 + ca * -0.125) * emsPerPixel;\n    vec2 o3 = vec2(ca * -0.125 - sa * -0.375, sa * -0.125 + ca * -0.375) * emsPerPixel;\n\n    float coverage =\n        SlugRenderSingle(renderCoord + o0, emsPerPixel, bandTransform, glyphData) +\n        SlugRenderSingle(renderCoord + o1, emsPerPixel, bandTransform, glyphData) +\n        SlugRenderSingle(renderCoord + o2, emsPerPixel, bandTransform, glyphData) +\n        SlugRenderSingle(renderCoord + o3, emsPerPixel, bandTransform, glyphData);\n    return coverage * 0.25;\n#else\n    return SlugRenderSingle(renderCoord, emsPerPixel, bandTransform, glyphData);\n#endif\n}\n\nvoid main() {\n    float coverage = SlugRender(v_texcoord, v_banding, v_glyph);\n    outColor = v_color * coverage;\n}\n";
+
+// Slug shader source re-exports
+// The .glsl/.wgsl files are the single source of truth, imported as strings
+// at build time via the glslPlugin in rollup.config.js
+// @ts-ignore - resolved by rollup glslPlugin
+const fragmentShaderGLSL300 = fragGLSL;
+
+// Slug GLSL adapter for Three.js, using RawShaderMaterial with the
+// reference GLSL shaders. Works with both WebGLRenderer and
+// WebGPURenderer (via GLSL-to-WGSL transpilation)
+//
+// Compared to the TSL adapter (slugTSL.ts):
+//   - Works with any Three.js renderer (no node-material dependency)
+//   - Uses native Uint32 band texture (no float conversion)
+//   - Supports GLSL animation injection via animationDeclarations/animationBody
+//   - Same tradeoff: no vertex dilation (may cause sub-pixel edge clipping at extreme zoom)
+//
+// Requires peer dependency: three
+// @ts-ignore - three is a peer dependency
+// Three.js GLSL3 mode prepends #version 300 es, so strip it from the raw shader
+const fragShader = fragmentShaderGLSL300.replace(/^#version\s+300\s+es\s*\n/, '');
+function buildVertexShader(options) {
+    const decl = options?.animationDeclarations ?? '';
+    const body = options?.animationBody ?? 'vec3 outPos = position;';
+    return `precision highp float;
+precision highp int;
+
+in vec3 position;
+in vec2 slugTexcoord;
+in vec4 slugBanding;
+in vec4 slugGlyph;
+in vec4 slugColor;
+in vec3 glyphCenter;
+in float glyphIndex;
+
+uniform mat4 modelViewMatrix;
+uniform mat4 projectionMatrix;
+uniform float time;
+${decl}
+
+out vec2 v_texcoord;
+flat out vec4 v_banding;
+flat out ivec4 v_glyph;
+out vec4 v_color;
+
+void main() {
+    v_texcoord = slugTexcoord;
+    v_banding = slugBanding;
+    v_glyph = ivec4(slugGlyph);
+    v_color = slugColor;
+
+    ${body}
+
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(outPos, 1.0);
+}
+`;
+}
+function createSlugGLSLMesh(gpuData, options) {
+    const attrs = unpackSlugVertices(gpuData);
+    const geo = new THREE__namespace.BufferGeometry();
+    geo.setAttribute('position', new THREE__namespace.Float32BufferAttribute(attrs.positions, 3));
+    geo.setAttribute('slugTexcoord', new THREE__namespace.Float32BufferAttribute(attrs.texcoords, 2));
+    geo.setAttribute('slugBanding', new THREE__namespace.Float32BufferAttribute(attrs.bandings, 4));
+    geo.setAttribute('slugGlyph', new THREE__namespace.Float32BufferAttribute(attrs.glyphData, 4));
+    geo.setAttribute('slugColor', new THREE__namespace.Float32BufferAttribute(attrs.colors, 4));
+    geo.setAttribute('glyphCenter', new THREE__namespace.Float32BufferAttribute(attrs.glyphCenters, 3));
+    geo.setAttribute('glyphIndex', new THREE__namespace.Float32BufferAttribute(attrs.glyphIndices, 1));
+    geo.setIndex(new THREE__namespace.BufferAttribute(gpuData.indices, 1));
+    // Curve texture: RGBA32F
+    const curveTex = new THREE__namespace.DataTexture(gpuData.curveTexture.data, gpuData.curveTexture.width, gpuData.curveTexture.height, THREE__namespace.RGBAFormat, THREE__namespace.FloatType);
+    curveTex.minFilter = THREE__namespace.NearestFilter;
+    curveTex.magFilter = THREE__namespace.NearestFilter;
+    curveTex.generateMipmaps = false;
+    curveTex.needsUpdate = true;
+    // Band texture: native RGBA32UI (no float conversion needed)
+    const bandTex = new THREE__namespace.DataTexture(gpuData.bandTexture.data, gpuData.bandTexture.width, gpuData.bandTexture.height);
+    bandTex.format = THREE__namespace.RGBAIntegerFormat;
+    bandTex.type = THREE__namespace.UnsignedIntType;
+    bandTex.internalFormat = 'RGBA32UI';
+    bandTex.minFilter = THREE__namespace.NearestFilter;
+    bandTex.magFilter = THREE__namespace.NearestFilter;
+    bandTex.generateMipmaps = false;
+    bandTex.needsUpdate = true;
+    const col = options?.color ?? { r: 1, g: 1, b: 1 };
+    const colorUniform = new THREE__namespace.Vector4(col.r, col.g, col.b, 1.0);
+    const uniforms = {
+        curveTexture: { value: curveTex },
+        bandTexture: { value: bandTex },
+        time: { value: 0 },
+        u_color: { value: colorUniform },
+        ...options?.uniforms,
+    };
+    const frag = options?.adaptiveSupersampling
+        ? '#define SLUG_ADAPTIVE_SUPERSAMPLE\n' + fragShader
+        : fragShader;
+    const material = new THREE__namespace.RawShaderMaterial({
+        glslVersion: THREE__namespace.GLSL3,
+        uniforms,
+        vertexShader: buildVertexShader(options),
+        fragmentShader: frag,
+        transparent: true,
+        depthWrite: false,
+        side: THREE__namespace.DoubleSide,
+    });
+    const mesh = new THREE__namespace.Mesh(geo, material);
+    return {
+        mesh,
+        uniforms,
+        setOffset(x, y, z = 0) {
+            mesh.position.set(x, y, z);
+        },
+        setColor(r, g, b) {
+            colorUniform.set(r, g, b, 1.0);
+        },
+        dispose() {
+            geo.dispose();
+            material.dispose();
+            curveTex.dispose();
+            bandTex.dispose();
+        }
+    };
+}
+
+function parseColor(color) {
+    if (!color)
+        return { r: 1, g: 1, b: 1 };
+    if (Array.isArray(color))
+        return { r: color[0], g: color[1], b: color[2] };
+    if (color.default)
+        return { r: color.default[0], g: color.default[1], b: color.default[2] };
+    return { r: 1, g: 1, b: 1 };
+}
+async function createMesh(gpuData, color, adaptiveSupersampling) {
+    try {
+        const { createSlugTSLMesh } = await Promise.resolve().then(function () { return require('./slugTSL.cjs'); });
+        return createSlugTSLMesh(gpuData, color);
+    }
+    catch {
+        return createSlugGLSLMesh(gpuData, { color, adaptiveSupersampling });
+    }
+}
+async function wrapCoreResult(coreResult, options) {
+    const color = parseColor(options.color);
+    const slugMesh = await createMesh(coreResult.gpuData, color, options.adaptiveSupersampling);
+    const geo = slugMesh.mesh.geometry;
+    geo.computeBoundingBox();
+    const center = new THREE__namespace.Vector3();
+    geo.boundingBox.getCenter(center);
+    geo.translate(-center.x, -center.y, -center.z);
+    const gcAttr = geo.getAttribute('glyphCenter');
+    if (gcAttr) {
+        const arr = gcAttr.array;
+        for (let i = 0; i < arr.length; i += 3) {
+            arr[i] -= center.x;
+            arr[i + 1] -= center.y;
+            arr[i + 2] -= center.z;
+        }
+        gcAttr.needsUpdate = true;
+    }
+    const group = new THREE__namespace.Group();
+    group.add(slugMesh.mesh);
+    return {
+        group,
+        mesh: slugMesh.mesh,
+        gpuData: coreResult.gpuData,
+        glyphs: coreResult.glyphs,
+        planeBounds: coreResult.planeBounds,
+        query: (queryOptions) => coreResult.query(queryOptions),
+        getLoadedFont: () => coreResult.getLoadedFont(),
+        measureTextWidth: (text, letterSpacing) => coreResult.measureTextWidth(text, letterSpacing),
+        update: async (newOptions) => {
+            const mergedOptions = { ...options };
+            for (const key in newOptions) {
+                const value = newOptions[key];
+                if (value !== undefined) {
+                    mergedOptions[key] = value;
+                }
+            }
+            const newCore = await coreResult.update(newOptions);
+            return wrapCoreResult(newCore, mergedOptions);
+        },
+        dispose: () => {
+            slugMesh.dispose();
+            coreResult.dispose();
+        }
+    };
+}
+class Text {
+    static { this.setHarfBuzzPath = core.Text.setHarfBuzzPath; }
+    static { this.setHarfBuzzBuffer = core.Text.setHarfBuzzBuffer; }
+    static { this.init = core.Text.init; }
+    static { this.registerPattern = core.Text.registerPattern; }
+    static { this.preloadPatterns = core.Text.preloadPatterns; }
+    static { this.setMaxFontCacheMemoryMB = core.Text.setMaxFontCacheMemoryMB; }
+    static { this.enableWoff2 = core.Text.enableWoff2; }
+    static async create(options) {
+        const coreResult = await core.Text.create(options);
+        return wrapCoreResult(coreResult, options);
+    }
+}
+
+exports.Text = Text;
+exports.createSlugGLSLMesh = createSlugGLSLMesh;
+exports.unpackSlugVertices = unpackSlugVertices;

package/dist/vector/index2.js

@@ -0,0 +1,264 @@
+import { Text as Text$1 } from './core/index.js';
+import * as THREE from 'three';
+
+// Restructures the tightly-packed vertex buffer from SlugPacker into
+// separate per-attribute arrays for GPU attribute binding
+const FLOATS_PER_VERT = 20;
+function unpackSlugVertices(gpuData) {
+    const vertCount = gpuData.shapeCount * 4;
+    const positions = new Float32Array(vertCount * 3);
+    const texcoords = new Float32Array(vertCount * 2);
+    const bandings = new Float32Array(vertCount * 4);
+    const glyphData = new Float32Array(vertCount * 4);
+    const colors = new Float32Array(vertCount * 4);
+    const srcF = gpuData.vertices;
+    const srcU = new Uint32Array(srcF.buffer, srcF.byteOffset, srcF.length);
+    for (let i = 0; i < vertCount; i++) {
+        const s = i * FLOATS_PER_VERT;
+        positions[i * 3] = srcF[s];
+        positions[i * 3 + 1] = srcF[s + 1];
+        positions[i * 3 + 2] = 0;
+        texcoords[i * 2] = srcF[s + 4];
+        texcoords[i * 2 + 1] = srcF[s + 5];
+        bandings[i * 4] = srcF[s + 12];
+        bandings[i * 4 + 1] = srcF[s + 13];
+        bandings[i * 4 + 2] = srcF[s + 14];
+        bandings[i * 4 + 3] = srcF[s + 15];
+        // Unpack glyph location and band metadata from bit-packed fields
+        const g0 = srcU[s + 6];
+        const g1 = srcU[s + 7];
+        glyphData[i * 4] = g0 & 0xFFFF;
+        glyphData[i * 4 + 1] = (g0 >>> 16) & 0xFFFF;
+        glyphData[i * 4 + 2] = g1 & 0xFFFF;
+        glyphData[i * 4 + 3] = (g1 >>> 16) & 0xFFFF;
+        colors[i * 4] = srcF[s + 16];
+        colors[i * 4 + 1] = srcF[s + 17];
+        colors[i * 4 + 2] = srcF[s + 18];
+        colors[i * 4 + 3] = srcF[s + 19];
+    }
+    // Per-glyph center: average of quad corner positions
+    const glyphCenters = new Float32Array(vertCount * 3);
+    const glyphIndices = new Float32Array(vertCount);
+    for (let g = 0; g < gpuData.shapeCount; g++) {
+        const base = g * 4;
+        let cx = 0, cy = 0;
+        for (let v = 0; v < 4; v++) {
+            cx += positions[(base + v) * 3];
+            cy += positions[(base + v) * 3 + 1];
+        }
+        cx *= 0.25;
+        cy *= 0.25;
+        for (let v = 0; v < 4; v++) {
+            const idx = base + v;
+            glyphCenters[idx * 3] = cx;
+            glyphCenters[idx * 3 + 1] = cy;
+            glyphCenters[idx * 3 + 2] = 0;
+            glyphIndices[idx] = g;
+        }
+    }
+    return { positions, texcoords, bandings, glyphData, colors, glyphCenters, glyphIndices };
+}
+
+var fragGLSL = "#version 300 es\n// GLSL 300 es port of the Slug fragment shader\n// Eric Lengyel, MIT License, 2017\n\nprecision highp float;\nprecision highp int;\n\n#define kLogBandTextureWidth 12\n\nin vec4 v_color;\nin vec2 v_texcoord;\nflat in vec4 v_banding;\nflat in ivec4 v_glyph;\n\nuniform sampler2D curveTexture;     // RGBA32F control points\nuniform highp usampler2D bandTexture; // RGBA32UI band data\n\nlayout(location = 0) out vec4 outColor;\n\nuint CalcRootCode(float y1, float y2, float y3) {\n    uint i1 = floatBitsToUint(y1) >> 31u;\n    uint i2 = floatBitsToUint(y2) >> 30u;\n    uint i3 = floatBitsToUint(y3) >> 29u;\n\n    uint shift = (i2 & 2u) | (i1 & ~2u);\n    shift = (i3 & 4u) | (shift & ~4u);\n\n    return (0x2E74u >> shift) & 0x0101u;\n}\n\nvec2 SolveHorizPoly(vec4 p12, vec2 p3) {\n    vec2 a = p12.xy - p12.zw * 2.0 + p3;\n    vec2 b = p12.xy - p12.zw;\n    float ra = 1.0 / a.y;\n    float rb = 0.5 / b.y;\n\n    float d = sqrt(max(b.y * b.y - a.y * p12.y, 0.0));\n    float t1 = (b.y - d) * ra;\n    float t2 = (b.y + d) * ra;\n\n    if (abs(a.y) < 1.0 / 65536.0) t1 = t2 = p12.y * rb;\n\n    return vec2((a.x * t1 - b.x * 2.0) * t1 + p12.x, (a.x * t2 - b.x * 2.0) * t2 + p12.x);\n}\n\nvec2 SolveVertPoly(vec4 p12, vec2 p3) {\n    vec2 a = p12.xy - p12.zw * 2.0 + p3;\n    vec2 b = p12.xy - p12.zw;\n    float ra = 1.0 / a.x;\n    float rb = 0.5 / b.x;\n\n    float d = sqrt(max(b.x * b.x - a.x * p12.x, 0.0));\n    float t1 = (b.x - d) * ra;\n    float t2 = (b.x + d) * ra;\n\n    if (abs(a.x) < 1.0 / 65536.0) t1 = t2 = p12.x * rb;\n\n    return vec2((a.y * t1 - b.y * 2.0) * t1 + p12.y, (a.y * t2 - b.y * 2.0) * t2 + p12.y);\n}\n\nivec2 CalcBandLoc(ivec2 glyphLoc, uint offset) {\n    ivec2 bandLoc = ivec2(glyphLoc.x + int(offset), glyphLoc.y);\n    bandLoc.y += bandLoc.x >> kLogBandTextureWidth;\n    bandLoc.x &= (1 << kLogBandTextureWidth) - 1;\n    return bandLoc;\n}\n\nfloat CalcCoverage(float xcov, float ycov, float xwgt, float ywgt, int flags) {\n    float coverage = max(abs(xcov * xwgt + ycov * ywgt) / max(xwgt + ywgt, 1.0 / 65536.0), min(abs(xcov), abs(ycov)));\n\n#if defined(SLUG_EVENODD)\n    if ((flags & 0x1000) == 0) {\n#endif\n        coverage = clamp(coverage, 0.0, 1.0);\n#if defined(SLUG_EVENODD)\n    } else {\n        coverage = 1.0 - abs(1.0 - fract(coverage * 0.5) * 2.0);\n    }\n#endif\n\n#if defined(SLUG_WEIGHT)\n    coverage = sqrt(coverage);\n#endif\n\n    return coverage;\n}\n\nfloat SlugRenderSingle(vec2 renderCoord, vec2 emsPerPixel, vec4 bandTransform, ivec4 glyphData) {\n    int curveIndex;\n\n    vec2 pixelsPerEm = 1.0 / emsPerPixel;\n\n    ivec2 bandMax = glyphData.zw;\n    bandMax.y &= 0x00FF;\n\n    ivec2 bandIndex = clamp(ivec2(renderCoord * bandTransform.xy + bandTransform.zw), ivec2(0, 0), bandMax);\n    ivec2 glyphLoc = glyphData.xy;\n\n    float xcov = 0.0;\n    float xwgt = 0.0;\n\n    uvec2 hbandData = texelFetch(bandTexture, ivec2(glyphLoc.x + bandIndex.y, glyphLoc.y), 0).xy;\n    ivec2 hbandLoc = CalcBandLoc(glyphLoc, hbandData.y);\n\n    for (curveIndex = 0; curveIndex < int(hbandData.x); curveIndex++) {\n        ivec2 curveLoc = ivec2(texelFetch(bandTexture, ivec2(hbandLoc.x + curveIndex, hbandLoc.y), 0).xy);\n\n        vec4 p12 = texelFetch(curveTexture, curveLoc, 0) - vec4(renderCoord, renderCoord);\n        vec2 p3 = texelFetch(curveTexture, ivec2(curveLoc.x + 1, curveLoc.y), 0).xy - renderCoord;\n\n        if (max(max(p12.x, p12.z), p3.x) * pixelsPerEm.x < -0.5) break;\n\n        uint code = CalcRootCode(p12.y, p12.w, p3.y);\n        if (code != 0u) {\n            vec2 r = SolveHorizPoly(p12, p3) * pixelsPerEm.x;\n\n            if ((code & 1u) != 0u) {\n                xcov += clamp(r.x + 0.5, 0.0, 1.0);\n                xwgt = max(xwgt, clamp(1.0 - abs(r.x) * 2.0, 0.0, 1.0));\n            }\n\n            if (code > 1u) {\n                xcov -= clamp(r.y + 0.5, 0.0, 1.0);\n                xwgt = max(xwgt, clamp(1.0 - abs(r.y) * 2.0, 0.0, 1.0));\n            }\n        }\n    }\n\n    float ycov = 0.0;\n    float ywgt = 0.0;\n\n    uvec2 vbandData = texelFetch(bandTexture, ivec2(glyphLoc.x + bandMax.y + 1 + bandIndex.x, glyphLoc.y), 0).xy;\n    ivec2 vbandLoc = CalcBandLoc(glyphLoc, vbandData.y);\n\n    for (curveIndex = 0; curveIndex < int(vbandData.x); curveIndex++) {\n        ivec2 curveLoc = ivec2(texelFetch(bandTexture, ivec2(vbandLoc.x + curveIndex, vbandLoc.y), 0).xy);\n        vec4 p12 = texelFetch(curveTexture, curveLoc, 0) - vec4(renderCoord, renderCoord);\n        vec2 p3 = texelFetch(curveTexture, ivec2(curveLoc.x + 1, curveLoc.y), 0).xy - renderCoord;\n\n        if (max(max(p12.y, p12.w), p3.y) * pixelsPerEm.y < -0.5) break;\n\n        uint code = CalcRootCode(p12.x, p12.z, p3.x);\n        if (code != 0u) {\n            vec2 r = SolveVertPoly(p12, p3) * pixelsPerEm.y;\n\n            if ((code & 1u) != 0u) {\n                ycov -= clamp(r.x + 0.5, 0.0, 1.0);\n                ywgt = max(ywgt, clamp(1.0 - abs(r.x) * 2.0, 0.0, 1.0));\n            }\n\n            if (code > 1u) {\n                ycov += clamp(r.y + 0.5, 0.0, 1.0);\n                ywgt = max(ywgt, clamp(1.0 - abs(r.y) * 2.0, 0.0, 1.0));\n            }\n        }\n    }\n\n    return CalcCoverage(xcov, ycov, xwgt, ywgt, glyphData.w);\n}\n\nfloat SlugRender(vec2 renderCoord, vec4 bandTransform, ivec4 glyphData) {\n    vec2 emsPerPixel = fwidth(renderCoord);\n\n#if defined(SLUG_ADAPTIVE_SUPERSAMPLE)\n    // Per-pixel rotated RGSS-4.  The base RGSS offsets are rotated by a\n    // unique angle per fragment (interleaved gradient noise).  This converts\n    // structured aliasing shimmer into uncorrelated grain that the eye\n    // naturally filters out, much closer to how hardware MSAA on many small\n    // triangles behaves perceptually.\n    float noise = fract(52.9829189 * fract(dot(gl_FragCoord.xy, vec2(0.06711056, 0.00583715))));\n    float angle = noise * 6.2831853;\n    float ca = cos(angle), sa = sin(angle);\n\n    // Base RGSS offsets rotated by per-pixel angle\n    vec2 o0 = vec2(ca * -0.375 - sa *  0.125, sa * -0.375 + ca *  0.125) * emsPerPixel;\n    vec2 o1 = vec2(ca *  0.125 - sa *  0.375, sa *  0.125 + ca *  0.375) * emsPerPixel;\n    vec2 o2 = vec2(ca *  0.375 - sa * -0.125, sa *  0.375 + ca * -0.125) * emsPerPixel;\n    vec2 o3 = vec2(ca * -0.125 - sa * -0.375, sa * -0.125 + ca * -0.375) * emsPerPixel;\n\n    float coverage =\n        SlugRenderSingle(renderCoord + o0, emsPerPixel, bandTransform, glyphData) +\n        SlugRenderSingle(renderCoord + o1, emsPerPixel, bandTransform, glyphData) +\n        SlugRenderSingle(renderCoord + o2, emsPerPixel, bandTransform, glyphData) +\n        SlugRenderSingle(renderCoord + o3, emsPerPixel, bandTransform, glyphData);\n    return coverage * 0.25;\n#else\n    return SlugRenderSingle(renderCoord, emsPerPixel, bandTransform, glyphData);\n#endif\n}\n\nvoid main() {\n    float coverage = SlugRender(v_texcoord, v_banding, v_glyph);\n    outColor = v_color * coverage;\n}\n";
+
+// Slug shader source re-exports
+// The .glsl/.wgsl files are the single source of truth, imported as strings
+// at build time via the glslPlugin in rollup.config.js
+// @ts-ignore - resolved by rollup glslPlugin
+const fragmentShaderGLSL300 = fragGLSL;
+
+// Slug GLSL adapter for Three.js, using RawShaderMaterial with the
+// reference GLSL shaders. Works with both WebGLRenderer and
+// WebGPURenderer (via GLSL-to-WGSL transpilation)
+//
+// Compared to the TSL adapter (slugTSL.ts):
+//   - Works with any Three.js renderer (no node-material dependency)
+//   - Uses native Uint32 band texture (no float conversion)
+//   - Supports GLSL animation injection via animationDeclarations/animationBody
+//   - Same tradeoff: no vertex dilation (may cause sub-pixel edge clipping at extreme zoom)
+//
+// Requires peer dependency: three
+// @ts-ignore - three is a peer dependency
+// Three.js GLSL3 mode prepends #version 300 es, so strip it from the raw shader
+const fragShader = fragmentShaderGLSL300.replace(/^#version\s+300\s+es\s*\n/, '');
+function buildVertexShader(options) {
+    const decl = options?.animationDeclarations ?? '';
+    const body = options?.animationBody ?? 'vec3 outPos = position;';
+    return `precision highp float;
+precision highp int;
+
+in vec3 position;
+in vec2 slugTexcoord;
+in vec4 slugBanding;
+in vec4 slugGlyph;
+in vec4 slugColor;
+in vec3 glyphCenter;
+in float glyphIndex;
+
+uniform mat4 modelViewMatrix;
+uniform mat4 projectionMatrix;
+uniform float time;
+${decl}
+
+out vec2 v_texcoord;
+flat out vec4 v_banding;
+flat out ivec4 v_glyph;
+out vec4 v_color;
+
+void main() {
+    v_texcoord = slugTexcoord;
+    v_banding = slugBanding;
+    v_glyph = ivec4(slugGlyph);
+    v_color = slugColor;
+
+    ${body}
+
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(outPos, 1.0);
+}
+`;
+}
+function createSlugGLSLMesh(gpuData, options) {
+    const attrs = unpackSlugVertices(gpuData);
+    const geo = new THREE.BufferGeometry();
+    geo.setAttribute('position', new THREE.Float32BufferAttribute(attrs.positions, 3));
+    geo.setAttribute('slugTexcoord', new THREE.Float32BufferAttribute(attrs.texcoords, 2));
+    geo.setAttribute('slugBanding', new THREE.Float32BufferAttribute(attrs.bandings, 4));
+    geo.setAttribute('slugGlyph', new THREE.Float32BufferAttribute(attrs.glyphData, 4));
+    geo.setAttribute('slugColor', new THREE.Float32BufferAttribute(attrs.colors, 4));
+    geo.setAttribute('glyphCenter', new THREE.Float32BufferAttribute(attrs.glyphCenters, 3));
+    geo.setAttribute('glyphIndex', new THREE.Float32BufferAttribute(attrs.glyphIndices, 1));
+    geo.setIndex(new THREE.BufferAttribute(gpuData.indices, 1));
+    // Curve texture: RGBA32F
+    const curveTex = new THREE.DataTexture(gpuData.curveTexture.data, gpuData.curveTexture.width, gpuData.curveTexture.height, THREE.RGBAFormat, THREE.FloatType);
+    curveTex.minFilter = THREE.NearestFilter;
+    curveTex.magFilter = THREE.NearestFilter;
+    curveTex.generateMipmaps = false;
+    curveTex.needsUpdate = true;
+    // Band texture: native RGBA32UI (no float conversion needed)
+    const bandTex = new THREE.DataTexture(gpuData.bandTexture.data, gpuData.bandTexture.width, gpuData.bandTexture.height);
+    bandTex.format = THREE.RGBAIntegerFormat;
+    bandTex.type = THREE.UnsignedIntType;
+    bandTex.internalFormat = 'RGBA32UI';
+    bandTex.minFilter = THREE.NearestFilter;
+    bandTex.magFilter = THREE.NearestFilter;
+    bandTex.generateMipmaps = false;
+    bandTex.needsUpdate = true;
+    const col = options?.color ?? { r: 1, g: 1, b: 1 };
+    const colorUniform = new THREE.Vector4(col.r, col.g, col.b, 1.0);
+    const uniforms = {
+        curveTexture: { value: curveTex },
+        bandTexture: { value: bandTex },
+        time: { value: 0 },
+        u_color: { value: colorUniform },
+        ...options?.uniforms,
+    };
+    const frag = options?.adaptiveSupersampling
+        ? '#define SLUG_ADAPTIVE_SUPERSAMPLE\n' + fragShader
+        : fragShader;
+    const material = new THREE.RawShaderMaterial({
+        glslVersion: THREE.GLSL3,
+        uniforms,
+        vertexShader: buildVertexShader(options),
+        fragmentShader: frag,
+        transparent: true,
+        depthWrite: false,
+        side: THREE.DoubleSide,
+    });
+    const mesh = new THREE.Mesh(geo, material);
+    return {
+        mesh,
+        uniforms,
+        setOffset(x, y, z = 0) {
+            mesh.position.set(x, y, z);
+        },
+        setColor(r, g, b) {
+            colorUniform.set(r, g, b, 1.0);
+        },
+        dispose() {
+            geo.dispose();
+            material.dispose();
+            curveTex.dispose();
+            bandTex.dispose();
+        }
+    };
+}
+
+function parseColor(color) {
+    if (!color)
+        return { r: 1, g: 1, b: 1 };
+    if (Array.isArray(color))
+        return { r: color[0], g: color[1], b: color[2] };
+    if (color.default)
+        return { r: color.default[0], g: color.default[1], b: color.default[2] };
+    return { r: 1, g: 1, b: 1 };
+}
+async function createMesh(gpuData, color, adaptiveSupersampling) {
+    try {
+        const { createSlugTSLMesh } = await import('./slugTSL.js');
+        return createSlugTSLMesh(gpuData, color);
+    }
+    catch {
+        return createSlugGLSLMesh(gpuData, { color, adaptiveSupersampling });
+    }
+}
+async function wrapCoreResult(coreResult, options) {
+    const color = parseColor(options.color);
+    const slugMesh = await createMesh(coreResult.gpuData, color, options.adaptiveSupersampling);
+    const geo = slugMesh.mesh.geometry;
+    geo.computeBoundingBox();
+    const center = new THREE.Vector3();
+    geo.boundingBox.getCenter(center);
+    geo.translate(-center.x, -center.y, -center.z);
+    const gcAttr = geo.getAttribute('glyphCenter');
+    if (gcAttr) {
+        const arr = gcAttr.array;
+        for (let i = 0; i < arr.length; i += 3) {
+            arr[i] -= center.x;
+            arr[i + 1] -= center.y;
+            arr[i + 2] -= center.z;
+        }
+        gcAttr.needsUpdate = true;
+    }
+    const group = new THREE.Group();
+    group.add(slugMesh.mesh);
+    return {
+        group,
+        mesh: slugMesh.mesh,
+        gpuData: coreResult.gpuData,
+        glyphs: coreResult.glyphs,
+        planeBounds: coreResult.planeBounds,
+        query: (queryOptions) => coreResult.query(queryOptions),
+        getLoadedFont: () => coreResult.getLoadedFont(),
+        measureTextWidth: (text, letterSpacing) => coreResult.measureTextWidth(text, letterSpacing),
+        update: async (newOptions) => {
+            const mergedOptions = { ...options };
+            for (const key in newOptions) {
+                const value = newOptions[key];
+                if (value !== undefined) {
+                    mergedOptions[key] = value;
+                }
+            }
+            const newCore = await coreResult.update(newOptions);
+            return wrapCoreResult(newCore, mergedOptions);
+        },
+        dispose: () => {
+            slugMesh.dispose();
+            coreResult.dispose();
+        }
+    };
+}
+class Text {
+    static { this.setHarfBuzzPath = Text$1.setHarfBuzzPath; }
+    static { this.setHarfBuzzBuffer = Text$1.setHarfBuzzBuffer; }
+    static { this.init = Text$1.init; }
+    static { this.registerPattern = Text$1.registerPattern; }
+    static { this.preloadPatterns = Text$1.preloadPatterns; }
+    static { this.setMaxFontCacheMemoryMB = Text$1.setMaxFontCacheMemoryMB; }
+    static { this.enableWoff2 = Text$1.enableWoff2; }
+    static async create(options) {
+        const coreResult = await Text$1.create(options);
+        return wrapCoreResult(coreResult, options);
+    }
+}
+
+export { Text as T, createSlugGLSLMesh as c, unpackSlugVertices as u };

package/dist/vector/react.cjs

@@ -2,8 +2,28 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+var THREE = require('three');
 var index = require('./index.cjs');
 
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
+
 function deepEqual(a, b) {
     if (a === b)
         return true;
@@ -46,7 +66,7 @@ function useDeepCompareMemo(value) {
 }
 
 const TextInner = react.forwardRef(function TextInner(props, ref) {
-    const { children, font, fillColor = '#ffffff', positionNode, colorNode, position = [0, 0, 0], rotation = [0, 0, 0], scale = [1, 1, 1], onLoad, onError, ...restOptions } = props;
+    const { children, font, fillColor = '#ffffff', position = [0, 0, 0], rotation = [0, 0, 0], scale = [1, 1, 1], positionNode, onLoad, onError, ...restOptions } = props;
     const memoizedTextOptions = useDeepCompareMemo(restOptions);
     const [group, setGroup] = react.useState(null);
     const [error, setError] = react.useState(null);
@@ -61,24 +81,22 @@ const TextInner = react.forwardRef(function TextInner(props, ref) {
         async function setup() {
             try {
                 setError(null);
+                const color = new THREE__namespace.Color(fillColor);
                 const resultPromise = opRef.current.catch(() => null).then(() => {
                     if (cancelled)
                         return null;
+                    const colorArr = [color.r, color.g, color.b];
                     return resultRef.current
                         ? resultRef.current.update({
                             text: children,
                             font,
-                            color: fillColor,
-                            positionNode,
-                            colorNode,
+                            color: colorArr,
                             ...memoizedTextOptions
                         })
                         : index.Text.create({
                             text: children,
                             font,
-                            color: fillColor,
-                            positionNode,
-                            colorNode,
+                            color: colorArr,
                             ...memoizedTextOptions
                         });
                 });
@@ -90,6 +108,10 @@ const TextInner = react.forwardRef(function TextInner(props, ref) {
                     result.dispose();
                     return;
                 }
+                if (positionNode && result.mesh?.material) {
+                    result.mesh.material.positionNode = positionNode;
+                    result.mesh.material.needsUpdate = true;
+                }
                 const prev = resultRef.current;
                 resultRef.current = result;
                 setGroup(result.group);
@@ -112,7 +134,14 @@ const TextInner = react.forwardRef(function TextInner(props, ref) {
         return () => {
             cancelled = true;
         };
-    }, [children, font, memoizedTextOptions, fillColor, positionNode, colorNode]);
+    }, [children, font, memoizedTextOptions, fillColor]);
+    react.useEffect(() => {
+        const result = resultRef.current;
+        if (result?.mesh?.material) {
+            result.mesh.material.positionNode = positionNode ?? null;
+            result.mesh.material.needsUpdate = true;
+        }
+    }, [positionNode]);
     react.useEffect(() => {
         return () => {
             resultRef.current?.dispose();