@saboit-dev/thomas 1.0.0

package/text_engine_3d/InstancedText.js

@@ -0,0 +1,127 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { useRef, useLayoutEffect, useEffect, useMemo } from 'react';
+import { Color, Box3, Sphere, Vector3 } from 'three';
+import { useInstancedTextAPI } from './InstancedTextProvider.js';
+import { TextAlignment } from './types.js';
+
+const defaultColor = new Color('white');
+function InstancedText({
+  text,
+  thickness,
+  fontSize,
+  textAlign,
+  scale,
+  color,
+  opacity,
+  font,
+  ...rest
+}) {
+  var _scale$x, _scale$y, _scale$z;
+  const unknownGlyphIndex = font.fontMetadata.charToIndex['?'];
+  const api = useInstancedTextAPI();
+  const groupRef = useRef(null);
+  const myPtrRef = useRef(null);
+  useLayoutEffect(() => {
+    const group = groupRef.current;
+    if (!group) return;
+    const fontScale = font.fontMetadata.fontScale;
+    const lineHeight = (font.fontMetadata.boundingBox.yMax - font.fontMetadata.boundingBox.yMin + font.fontMetadata.underlineThickness) * fontScale;
+    const scales = new Float32Array(text.length);
+    const shifts = new Float32Array(text.length * 2);
+    let xPos = 0;
+    let yPos = 0;
+    const totalWidths = [];
+    Array.from(text).forEach((char, i) => {
+      if (char === '\n') {
+        totalWidths.push(xPos);
+        xPos = 0;
+        yPos -= lineHeight;
+      } else {
+        var _font$fontMetadata$ad;
+        // THREE.js's TextGeometry will use "?" as fallback, so we have to use it as well
+        const glyphIndex = font.fontMetadata.charToIndex[char];
+        const ha = (_font$fontMetadata$ad = font.fontMetadata.advances[glyphIndex]) !== null && _font$fontMetadata$ad !== void 0 ? _font$fontMetadata$ad : font.fontMetadata.advances[unknownGlyphIndex];
+        scales[i] = fontScale;
+        shifts[i * 2] = xPos;
+        shifts[i * 2 + 1] = yPos;
+        xPos += ha * fontScale;
+      }
+    });
+    totalWidths.push(xPos);
+
+    // Since we can have multiple lines, we take the widest one
+    const totalWidth = Math.max(...totalWidths);
+    const yShift = -((font.fontMetadata.boundingBox.yMax - font.fontMetadata.boundingBox.yMin) / 2 + font.fontMetadata.boundingBox.yMin) * fontScale;
+
+    // Set alignment
+    Array.from(text).forEach((_, i) => {
+      if (scales[i] > 0) {
+        if (textAlign === TextAlignment.left) {
+          shifts[i * 2 + 1] += yShift;
+        }
+        if (textAlign === TextAlignment.right) {
+          shifts[i * 2] -= totalWidth;
+          shifts[i * 2 + 1] += yShift;
+        }
+        if (textAlign === TextAlignment.center) {
+          shifts[i * 2] -= totalWidth / 2;
+          shifts[i * 2 + 1] += yShift;
+        }
+      }
+    });
+
+    // Compute the bounding box and sphere
+    if (!group.geometry.boundingBox) group.geometry.boundingBox = new Box3();
+    if (!group.geometry.boundingSphere) group.geometry.boundingSphere = new Sphere();
+    group.geometry.boundingBox.setFromPoints([new Vector3(0, font.fontMetadata.boundingBox.yMin * fontScale, 0), new Vector3(totalWidth, font.fontMetadata.boundingBox.yMax * fontScale, thickness)]);
+    group.geometry.boundingSphere.setFromPoints([new Vector3(0, font.fontMetadata.boundingBox.yMin * fontScale, 0), new Vector3(totalWidth, font.fontMetadata.boundingBox.yMax * fontScale, thickness)]);
+    if (textAlign === TextAlignment.left) {
+      group.geometry.boundingBox.translate(new Vector3(0, yShift, 0));
+      group.geometry.boundingSphere.translate(new Vector3(0, yShift, 0));
+    }
+    if (textAlign === TextAlignment.right) {
+      group.geometry.boundingBox.translate(new Vector3(-totalWidth, yShift, 0));
+      group.geometry.boundingSphere.translate(new Vector3(-totalWidth, yShift, 0));
+    }
+    if (textAlign === TextAlignment.center) {
+      group.geometry.boundingBox.translate(new Vector3(-totalWidth / 2, yShift, 0));
+      group.geometry.boundingSphere.translate(new Vector3(-totalWidth / 2, yShift, 0));
+    }
+    const myPtr = api.addInstances(text, font, color !== null && color !== void 0 ? color : defaultColor, shifts, group);
+    if (myPtr) {
+      myPtrRef.current = myPtr;
+      return () => api.removeInstances(myPtr);
+    }
+  }, [text, color, font.fontMetadata, unknownGlyphIndex, thickness, textAlign, api]);
+  useEffect(() => {
+    if (myPtrRef.current) {
+      api.setOpacity(myPtrRef.current, opacity !== null && opacity !== void 0 ? opacity : 1);
+    }
+  }, [api, opacity]);
+  const textAPI = useMemo(() => ({
+    getBuffers: () => myPtrRef.current && api.getBuffers(myPtrRef.current),
+    getPtr: () => myPtrRef.current,
+    setGlyphs: text => {
+      if (!myPtrRef.current) return;
+      const buffers = api.getBuffers(myPtrRef.current);
+      if (!buffers) return;
+      const glyphIds = Array.from(text).map(c => font.fontMetadata.charToIndex[c]);
+      buffers.instanceGIndexBuffer.set(glyphIds, myPtrRef.current.start);
+      buffers.instanceGIndexBufferAttribute.needsUpdate = true;
+    }
+  }), [font.fontMetadata.charToIndex]);
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("instancedTextPlaceholder", _extends({
+      scale: [fontSize * ((_scale$x = scale == null ? void 0 : scale.x) !== null && _scale$x !== void 0 ? _scale$x : 1), fontSize * ((_scale$y = scale == null ? void 0 : scale.y) !== null && _scale$y !== void 0 ? _scale$y : 1), thickness * ((_scale$z = scale == null ? void 0 : scale.z) !== null && _scale$z !== void 0 ? _scale$z : 1)]
+    }, rest, {
+      textAPI: textAPI,
+      ref: groupRef,
+      frustumCulled: false
+    }))
+  );
+}
+
+export { InstancedText };

package/text_engine_3d/InstancedTextPlaceholder.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-three/fiber"),n=require("three");class t{boundingBox=null;boundingSphere=null;computeBoundingBox(){this.boundingBox||(this.boundingBox=new n.Box3)}computeBoundingSphere(){this.boundingSphere||(this.boundingSphere=new n.Sphere)}}const o=new n.Matrix4,r=new n.Ray,i=new n.Sphere,s=new n.Vector3;class u extends n.Group{textAPI=void 0;geometry=new t;raycast(e,n){const t=this.geometry,u=this.matrixWorld;null===t.boundingSphere&&t.computeBoundingSphere(),i.copy(t.boundingSphere),i.applyMatrix4(u),!1!==e.ray.intersectsSphere(i)&&(o.copy(u).invert(),r.copy(e.ray).applyMatrix4(o),null!==t.boundingBox&&null===r.intersectBox(t.boundingBox,s)||n.push({distance:s.distanceTo(e.ray.origin),point:s.clone(),object:this}))}}exports.InstancedTextPlaceholder=u,exports.registerInstancedTextPlaceholderToR3F=function(){e.extend({InstancedTextPlaceholder:u})};

package/text_engine_3d/InstancedTextPlaceholder.d.ts

@@ -0,0 +1,23 @@
+import { ReactThreeFiber } from '@react-three/fiber';
+import { Box3, Group, Intersection, Raycaster, Sphere } from 'three';
+import { InstancedTextAPI } from './types';
+export declare function registerInstancedTextPlaceholderToR3F(): void;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            instancedTextPlaceholder: ReactThreeFiber.Object3DNode<InstancedTextPlaceholder, typeof InstancedTextPlaceholder>;
+        }
+    }
+}
+declare class InstancedTextPlaceholderGeometry {
+    boundingBox: Box3 | null;
+    boundingSphere: Sphere | null;
+    computeBoundingBox(): void;
+    computeBoundingSphere(): void;
+}
+export declare class InstancedTextPlaceholder extends Group {
+    textAPI?: InstancedTextAPI;
+    geometry: InstancedTextPlaceholderGeometry;
+    raycast(raycaster: Raycaster, intersects: Intersection[]): void;
+}
+export {};

package/text_engine_3d/InstancedTextPlaceholder.js

@@ -0,0 +1,50 @@
+import { extend } from '@react-three/fiber';
+import { Matrix4, Ray, Sphere, Vector3, Group, Box3 } from 'three';
+
+function registerInstancedTextPlaceholderToR3F() {
+  extend({
+    InstancedTextPlaceholder
+  });
+}
+class InstancedTextPlaceholderGeometry {
+  boundingBox = null;
+  boundingSphere = null;
+  computeBoundingBox() {
+    // Will be computed in InstancedText.tsx
+    if (!this.boundingBox) this.boundingBox = new Box3();
+  }
+  computeBoundingSphere() {
+    // Will be computed in InstancedText.tsx
+    if (!this.boundingSphere) this.boundingSphere = new Sphere();
+  }
+}
+const _inverseMatrix = new Matrix4();
+const _ray = new Ray();
+const _sphere = new Sphere();
+const _vA = new Vector3();
+class InstancedTextPlaceholder extends Group {
+  textAPI = undefined;
+
+  // For correct bounding box
+  geometry = new InstancedTextPlaceholderGeometry();
+  raycast(raycaster, intersects) {
+    const geometry = this.geometry;
+    const matrixWorld = this.matrixWorld;
+    // Checking boundingSphere distance to ray
+    if (geometry.boundingSphere === null) geometry.computeBoundingSphere();
+    _sphere.copy(geometry.boundingSphere);
+    _sphere.applyMatrix4(matrixWorld);
+    if (raycaster.ray.intersectsSphere(_sphere) === false) return;
+    _inverseMatrix.copy(matrixWorld).invert();
+    _ray.copy(raycaster.ray).applyMatrix4(_inverseMatrix);
+    // Check boundingBox before continuing
+    if (geometry.boundingBox !== null && _ray.intersectBox(geometry.boundingBox, _vA) === null) return;
+    intersects.push({
+      distance: _vA.distanceTo(raycaster.ray.origin),
+      point: _vA.clone(),
+      object: this
+    });
+  }
+}
+
+export { InstancedTextPlaceholder, registerInstancedTextPlaceholderToR3F };

package/text_engine_3d/InstancedTextProvider.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-three/fiber"),t=require("react"),r=require("./instancedTextBuffers.cjs.js"),n=require("./InstancedTextPlaceholder.cjs.js"),s=require("./useInstancedTextMaterial.cjs.js");function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("three"),require("@react-three/drei");var c=a(t);const u=t.createContext(null);const o=t.forwardRef((function({font:n},a){const u=s.useInstancedTextMaterial(s.useFontTexture(n.offsetsPath),s.useFontTexture(n.normalsPath),n.fontMetadata),[{instanceAllocated:o,geometry:l},f]=t.useState({instanceAllocated:0,geometry:null}),i=t.useRef(null),d=t.useCallback((e=>(i.current=r.reallocInstancedTextBuffers(i.current,e,n.fontMetadata.maxVertices),f({instanceAllocated:e,geometry:i.current.geometry}),i.current)),[n.fontMetadata.maxVertices]);return t.useImperativeHandle(a,(()=>({font:n,addInstances:(e,t,n,s,a)=>{var c;const u=null!==(c=i.current)&&void 0!==c?c:d(2*e.length),o=r.addTextInstances(u,t.fontMetadata.charToIndex,e,t,n,s,a);return u.currentGlyphs.length>u.instanceAllocated?d(2*u.currentGlyphs.length):r.updateTextInstancingBuffersAfterAdd(u),o},removeInstances:e=>{const t=i.current;t&&r.removeTextInstances(t,e)},setOpacity:(e,t)=>{const r=i.current;if(r&&r.instanceColorBuffer&&r.instanceColorBufferAttribute){for(let n=0;n<e.length;n++)r.currentColors[4*(e.start+n)+3]=t,r.instanceColorBuffer[4*(e.start+n)+3]=t;r.instanceColorBufferAttribute.needsUpdate=!0}},getBuffers:()=>i.current})),[n,d]),e.useFrame((()=>{const e=i.current;e&&r.textInstancingUpdateTransforms(e)})),l?c.createElement("instancedMesh",{frustumCulled:!1,args:[l,u,o]}):null}));exports.InstancedTextProvider=function({children:e,styles:r}){t.useMemo(n.registerInstancedTextPlaceholderToR3F,[]);const s=t.useRef(new WeakMap),a=t.useCallback((e=>{e&&s.current.set(e.font,e)}),[]),l=t.useMemo((()=>({addInstances:(e,t,r,n,a)=>{const c=s.current.get(t);return null==c?void 0:c.addInstances(e,t,r,n,a)},removeInstances:e=>{const t=s.current.get(e.font);null==t||t.removeInstances(e)},setOpacity:(e,t)=>{const r=s.current.get(e.font);null==r||r.setOpacity(e,t)},getBuffers:e=>{var t;const r=s.current.get(e.font);return null!==(t=null==r?void 0:r.getBuffers(e))&&void 0!==t?t:null}})),[]);return c.createElement(u.Provider,{value:l},r.map((e=>c.createElement(o,{key:e.offsetsPath,font:e,ref:a}))),e)},exports.useInstancedTextAPI=function(){const e=t.useContext(u);if(!e)throw new Error("No instanced text context");return e};

package/text_engine_3d/InstancedTextProvider.d.ts

@@ -0,0 +1,15 @@
+import { PropsWithChildren } from 'react';
+import { Color, Object3D } from 'three';
+import { InstancedTextBuffers, TextInstancesPtr } from './instancedTextBuffers';
+import { Font3D } from './types';
+interface IInstancedTextAPI {
+    addInstances: (text: string, font: Font3D, color: Color, shifts: Float32Array, parentGroup: Object3D) => TextInstancesPtr | undefined;
+    removeInstances: (ptr: TextInstancesPtr) => void;
+    setOpacity: (ptr: TextInstancesPtr, opacity: number) => void;
+    getBuffers: (ptr: TextInstancesPtr) => InstancedTextBuffers | null;
+}
+export declare function useInstancedTextAPI(): IInstancedTextAPI;
+export declare function InstancedTextProvider({ children, styles }: PropsWithChildren<{
+    styles: Font3D[];
+}>): JSX.Element;
+export {};

package/text_engine_3d/InstancedTextProvider.js

@@ -0,0 +1,124 @@
+import { useFrame } from '@react-three/fiber';
+import * as React from 'react';
+import { useMemo, useRef, useCallback, createContext, useContext, forwardRef, useState, useImperativeHandle } from 'react';
+import { reallocInstancedTextBuffers, addTextInstances, updateTextInstancingBuffersAfterAdd, removeTextInstances, textInstancingUpdateTransforms } from './instancedTextBuffers.js';
+import { registerInstancedTextPlaceholderToR3F } from './InstancedTextPlaceholder.js';
+import { useInstancedTextMaterial, useFontTexture } from './useInstancedTextMaterial.js';
+
+const instancedTextContext = /*#__PURE__*/createContext(null);
+function useInstancedTextAPI() {
+  const contextValue = useContext(instancedTextContext);
+  if (!contextValue) throw new Error('No instanced text context');
+  return contextValue;
+}
+
+// To be able to support italic and regular, we segment our instances managers into several style groups
+const StyleGroup = /*#__PURE__*/forwardRef(function StyleGroup({
+  font
+}, ref) {
+  const textMat = useInstancedTextMaterial(useFontTexture(font.offsetsPath), useFontTexture(font.normalsPath), font.fontMetadata);
+  const [{
+    instanceAllocated,
+    geometry
+  }, setInstanceData] = useState({
+    // Starts as 0 to force an initial realloc
+    instanceAllocated: 0,
+    geometry: null
+  });
+  const buffersRef = useRef(null);
+  const realloc = useCallback(instanceAllocated => {
+    buffersRef.current = reallocInstancedTextBuffers(buffersRef.current, instanceAllocated, font.fontMetadata.maxVertices);
+    setInstanceData({
+      instanceAllocated,
+      geometry: buffersRef.current.geometry
+    });
+    return buffersRef.current;
+  }, [font.fontMetadata.maxVertices]);
+  useImperativeHandle(ref, () => ({
+    font,
+    addInstances: (text, font, color, shifts, parentGroup) => {
+      var _buffersRef$current;
+      // Initial alloc
+      const buffers = (_buffersRef$current = buffersRef.current) !== null && _buffersRef$current !== void 0 ? _buffersRef$current : realloc(text.length * 2);
+      const instance = addTextInstances(buffers, font.fontMetadata.charToIndex, text, font, color, shifts, parentGroup);
+      if (buffers.currentGlyphs.length > buffers.instanceAllocated) {
+        // Grow only, doubles every time
+        realloc(buffers.currentGlyphs.length * 2);
+      } else {
+        updateTextInstancingBuffersAfterAdd(buffers);
+      }
+      // Realloc already updates the buffers
+
+      return instance;
+    },
+    removeInstances: ptr => {
+      const buffers = buffersRef.current;
+      if (!buffers) return;
+      removeTextInstances(buffers, ptr);
+    },
+    setOpacity: (ptr, opacity) => {
+      const buffers = buffersRef.current;
+      if (!buffers) return;
+      if (!buffers.instanceColorBuffer || !buffers.instanceColorBufferAttribute) return;
+      for (let index = 0; index < ptr.length; index++) {
+        buffers.currentColors[(ptr.start + index) * 4 + 3] = opacity;
+        buffers.instanceColorBuffer[(ptr.start + index) * 4 + 3] = opacity;
+      }
+      buffers.instanceColorBufferAttribute.needsUpdate = true;
+    },
+    getBuffers: () => {
+      return buffersRef.current;
+    }
+  }), [font, realloc]);
+  useFrame(() => {
+    const buffers = buffersRef.current;
+    if (buffers) {
+      textInstancingUpdateTransforms(buffers);
+    }
+  });
+  if (!geometry) return null;
+  return /*#__PURE__*/React.createElement("instancedMesh", {
+    frustumCulled: false,
+    args: [geometry, textMat, instanceAllocated]
+  });
+});
+function InstancedTextProvider({
+  children,
+  styles
+}) {
+  useMemo(registerInstancedTextPlaceholderToR3F, []);
+  const stylesApisRef = useRef(new WeakMap());
+  const setApiRefFn = useCallback(v => {
+    if (v) {
+      stylesApisRef.current.set(v.font, v);
+    }
+  }, []);
+  const api = useMemo(() => ({
+    addInstances: (text, font, color, shifts, parentGroup) => {
+      const api = stylesApisRef.current.get(font);
+      return api == null ? void 0 : api.addInstances(text, font, color, shifts, parentGroup);
+    },
+    removeInstances: ptr => {
+      const api = stylesApisRef.current.get(ptr.font);
+      api == null ? void 0 : api.removeInstances(ptr);
+    },
+    setOpacity: (ptr, opacity) => {
+      const api = stylesApisRef.current.get(ptr.font);
+      api == null ? void 0 : api.setOpacity(ptr, opacity);
+    },
+    getBuffers: ptr => {
+      var _api$getBuffers;
+      const api = stylesApisRef.current.get(ptr.font);
+      return (_api$getBuffers = api == null ? void 0 : api.getBuffers(ptr)) !== null && _api$getBuffers !== void 0 ? _api$getBuffers : null;
+    }
+  }), []);
+  return /*#__PURE__*/React.createElement(instancedTextContext.Provider, {
+    value: api
+  }, styles.map(font => /*#__PURE__*/React.createElement(StyleGroup, {
+    key: font.offsetsPath,
+    font: font,
+    ref: setApiRefFn
+  })), children);
+}
+
+export { InstancedTextProvider, useInstancedTextAPI };

package/text_engine_3d/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./InstancedText.cjs.js"),r=require("./InstancedTextProvider.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("three"),require("./types.cjs.js"),require("@react-three/fiber"),require("./instancedTextBuffers.cjs.js"),require("./InstancedTextPlaceholder.cjs.js"),require("./useInstancedTextMaterial.cjs.js"),require("@react-three/drei"),exports.InstancedText=e.InstancedText,exports.InstancedTextProvider=r.InstancedTextProvider;

package/text_engine_3d/index.d.ts

@@ -0,0 +1,3 @@
+import { InstancedText } from './InstancedText';
+import { InstancedTextProvider } from './InstancedTextProvider';
+export { InstancedTextProvider, InstancedText };

package/text_engine_3d/index.js

@@ -0,0 +1,11 @@
+export { InstancedText } from './InstancedText.js';
+export { InstancedTextProvider } from './InstancedTextProvider.js';
+import '@babel/runtime/helpers/esm/extends';
+import 'react';
+import 'three';
+import './types.js';
+import '@react-three/fiber';
+import './instancedTextBuffers.js';
+import './InstancedTextPlaceholder.js';
+import './useInstancedTextMaterial.js';
+import '@react-three/drei';

package/text_engine_3d/instancedTextBuffers.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("three");const e=new t.Matrix4,n=new t.Matrix4;exports.addTextInstances=function(t,e,n,r,s,u,c){const a=t.currentGlyphs.length,i=n.length,o=Array.from(n).map((t=>e[t])),f=Array.from(n).flatMap((()=>[s.r,s.g,s.b,1]));t.currentGlyphs.push(...o),t.currentShifts.push(...u),t.currentColors.push(...f);const l={start:a,length:i,text:n,parentGroup:c,font:r};return t.currentInstances.push(l),l},exports.reallocInstancedTextBuffers=function(e,n,r){var s,u,c,a;null==e||e.geometry.dispose();const i=new t.InstancedBufferGeometry;i.instanceCount=n;const o=new Float32Array(3*r),f=new t.Float32BufferAttribute(o,3,!1);i.setAttribute("position",f);const l=new Float32Array(16*i.instanceCount),d=new t.InstancedBufferAttribute(l,16,!1,1);i.setAttribute("instanceMatrix",d);const p=new Float32Array(i.instanceCount);e&&p.set(e.currentGlyphs);const x=new t.InstancedBufferAttribute(p,1,!1,1);i.setAttribute("instanceGIndex",x);const h=new Float32Array(4*i.instanceCount);e&&h.set(e.currentColors);const A=new t.InstancedBufferAttribute(h,4,!0,1);return i.setAttribute("instanceColor",A),{instanceAllocated:n,geometry:i,currentInstances:null!==(s=null==e?void 0:e.currentInstances)&&void 0!==s?s:[],currentGlyphs:null!==(u=null==e?void 0:e.currentGlyphs)&&void 0!==u?u:[],currentShifts:null!==(c=null==e?void 0:e.currentShifts)&&void 0!==c?c:[],currentColors:null!==(a=null==e?void 0:e.currentColors)&&void 0!==a?a:[],instanceMatrixBuffer:l,instanceMatrixBufferAttribute:d,instanceGIndexBuffer:p,instanceGIndexBufferAttribute:x,instanceColorBuffer:h,instanceColorBufferAttribute:A}},exports.removeTextInstances=function(t,e){const n=t.currentInstances.indexOf(e);if(-1!==n){for(let r=0;r<t.currentInstances.length;r++)r>n&&(t.currentInstances[r].start-=e.length);t.currentInstances.splice(n,1),t.currentGlyphs.splice(e.start,e.length),t.currentShifts.splice(2*e.start,2*e.length),t.currentColors.splice(4*e.start,4*e.length),t.instanceGIndexBuffer.fill(0),t.instanceGIndexBuffer.set(t.currentGlyphs),t.instanceGIndexBufferAttribute.needsUpdate=!0,t.instanceColorBuffer.fill(0),t.instanceColorBuffer.set(t.currentColors),t.instanceColorBufferAttribute.needsUpdate=!0,t.instanceMatrixBuffer.fill(0),t.instanceMatrixBufferAttribute.needsUpdate=!0}},exports.textInstancingUpdateTransforms=function(t){t.currentInstances.forEach((r=>{for(let s=0;s<r.length;s++){const u=t.currentShifts[2*(r.start+s)],c=t.currentShifts[2*(r.start+s)+1];n.copy(r.parentGroup.matrixWorld),e.identity().setPosition(u,c,0),n.multiply(e),n.toArray(t.instanceMatrixBuffer,16*(r.start+s))}})),t.instanceMatrixBufferAttribute.needsUpdate=!0},exports.updateTextInstancingBuffersAfterAdd=function(t){t.instanceGIndexBuffer.set(t.currentGlyphs),t.instanceGIndexBufferAttribute.needsUpdate=!0,t.instanceColorBuffer.set(t.currentColors),t.instanceColorBufferAttribute.needsUpdate=!0};

package/text_engine_3d/instancedTextBuffers.d.ts

@@ -0,0 +1,28 @@
+import { Color, InstancedBufferAttribute, InstancedBufferGeometry, Object3D } from 'three';
+import { Font3D } from './types';
+export type TextInstancesPtr = {
+    start: number;
+    length: number;
+    text: string;
+    font: Font3D;
+    parentGroup: Object3D;
+};
+export type InstancedTextBuffers = {
+    instanceAllocated: number;
+    geometry: InstancedBufferGeometry;
+    currentInstances: TextInstancesPtr[];
+    currentGlyphs: number[];
+    currentShifts: number[];
+    currentColors: number[];
+    instanceMatrixBuffer: Float32Array;
+    instanceMatrixBufferAttribute: InstancedBufferAttribute;
+    instanceGIndexBuffer: Float32Array;
+    instanceGIndexBufferAttribute: InstancedBufferAttribute;
+    instanceColorBuffer: Float32Array;
+    instanceColorBufferAttribute: InstancedBufferAttribute;
+};
+export declare function reallocInstancedTextBuffers(buffers: InstancedTextBuffers | null, instanceAllocated: number, maxVertices: number): InstancedTextBuffers;
+export declare function addTextInstances(buffers: InstancedTextBuffers, charToIndex: Record<string, number>, text: string, font: Font3D, color: Color, shifts: Float32Array, parentGroup: Object3D): TextInstancesPtr;
+export declare function updateTextInstancingBuffersAfterAdd(buffers: InstancedTextBuffers): void;
+export declare function removeTextInstances(buffers: InstancedTextBuffers, ptr: TextInstancesPtr): void;
+export declare function textInstancingUpdateTransforms(buffers: InstancedTextBuffers): void;

package/text_engine_3d/instancedTextBuffers.js

@@ -0,0 +1,105 @@
+import { InstancedBufferGeometry, Float32BufferAttribute, InstancedBufferAttribute, Matrix4 } from 'three';
+
+/** Reallocates a new geometry, a new set of buffers and attributes with a given size */
+function reallocInstancedTextBuffers(buffers, instanceAllocated, maxVertices) {
+  var _buffers$currentInsta, _buffers$currentGlyph, _buffers$currentShift, _buffers$currentColor;
+  buffers == null ? void 0 : buffers.geometry.dispose();
+  const geom = new InstancedBufferGeometry();
+  geom.instanceCount = instanceAllocated;
+  const positionBuffer = new Float32Array(maxVertices * 3);
+  const positionBufferAttribute = new Float32BufferAttribute(positionBuffer, 3, false);
+  geom.setAttribute('position', positionBufferAttribute);
+  const instanceMatrixBuffer = new Float32Array(geom.instanceCount * 16);
+  const instanceMatrixBufferAttribute = new InstancedBufferAttribute(instanceMatrixBuffer, 16, false, 1);
+  geom.setAttribute('instanceMatrix', instanceMatrixBufferAttribute);
+  const instanceGIndexBuffer = new Float32Array(geom.instanceCount);
+  buffers && instanceGIndexBuffer.set(buffers.currentGlyphs);
+  const instanceGIndexBufferAttribute = new InstancedBufferAttribute(instanceGIndexBuffer, 1, false, 1);
+  geom.setAttribute('instanceGIndex', instanceGIndexBufferAttribute);
+  const instanceColorBuffer = new Float32Array(geom.instanceCount * 4);
+  buffers && instanceColorBuffer.set(buffers.currentColors);
+  const instanceColorBufferAttribute = new InstancedBufferAttribute(instanceColorBuffer, 4, true, 1);
+  geom.setAttribute('instanceColor', instanceColorBufferAttribute);
+  return {
+    instanceAllocated,
+    geometry: geom,
+    currentInstances: (_buffers$currentInsta = buffers == null ? void 0 : buffers.currentInstances) !== null && _buffers$currentInsta !== void 0 ? _buffers$currentInsta : [],
+    currentGlyphs: (_buffers$currentGlyph = buffers == null ? void 0 : buffers.currentGlyphs) !== null && _buffers$currentGlyph !== void 0 ? _buffers$currentGlyph : [],
+    currentShifts: (_buffers$currentShift = buffers == null ? void 0 : buffers.currentShifts) !== null && _buffers$currentShift !== void 0 ? _buffers$currentShift : [],
+    currentColors: (_buffers$currentColor = buffers == null ? void 0 : buffers.currentColors) !== null && _buffers$currentColor !== void 0 ? _buffers$currentColor : [],
+    instanceMatrixBuffer,
+    instanceMatrixBufferAttribute,
+    instanceGIndexBuffer,
+    instanceGIndexBufferAttribute,
+    instanceColorBuffer,
+    instanceColorBufferAttribute
+  };
+}
+
+/** Adds new instances to the temp buffers, without affecting the geometry. You will need to update the attributes manually after this call. */
+function addTextInstances(buffers, charToIndex, text, font, color, shifts, parentGroup) {
+  const start = buffers.currentGlyphs.length;
+  const length = text.length;
+  const glyphIds = Array.from(text).map(c => charToIndex[c]);
+  const colors = Array.from(text).flatMap(() => [color.r, color.g, color.b, 1]);
+  buffers.currentGlyphs.push(...glyphIds);
+  buffers.currentShifts.push(...shifts);
+  buffers.currentColors.push(...colors);
+  const instance = {
+    start,
+    length,
+    text,
+    parentGroup,
+    font
+  };
+  buffers.currentInstances.push(instance);
+  return instance;
+}
+function updateTextInstancingBuffersAfterAdd(buffers) {
+  buffers.instanceGIndexBuffer.set(buffers.currentGlyphs);
+  buffers.instanceGIndexBufferAttribute.needsUpdate = true;
+  buffers.instanceColorBuffer.set(buffers.currentColors);
+  buffers.instanceColorBufferAttribute.needsUpdate = true;
+}
+
+/** Removes instances from both the temp buffers and attribute buffers. */
+function removeTextInstances(buffers, ptr) {
+  const index = buffers.currentInstances.indexOf(ptr);
+  if (index === -1) return;
+
+  // Update all the indices after the element to remove
+  for (let i = 0; i < buffers.currentInstances.length; i++) {
+    if (i > index) {
+      buffers.currentInstances[i].start -= ptr.length;
+    }
+  }
+  buffers.currentInstances.splice(index, 1);
+  buffers.currentGlyphs.splice(ptr.start, ptr.length);
+  buffers.currentShifts.splice(ptr.start * 2, ptr.length * 2);
+  buffers.currentColors.splice(ptr.start * 4, ptr.length * 4);
+  buffers.instanceGIndexBuffer.fill(0);
+  buffers.instanceGIndexBuffer.set(buffers.currentGlyphs);
+  buffers.instanceGIndexBufferAttribute.needsUpdate = true;
+  buffers.instanceColorBuffer.fill(0);
+  buffers.instanceColorBuffer.set(buffers.currentColors);
+  buffers.instanceColorBufferAttribute.needsUpdate = true;
+  buffers.instanceMatrixBuffer.fill(0);
+  buffers.instanceMatrixBufferAttribute.needsUpdate = true;
+}
+const tempMatrix = new Matrix4();
+const tempMatrixWorld = new Matrix4();
+function textInstancingUpdateTransforms(buffers) {
+  buffers.currentInstances.forEach(inst => {
+    for (let j = 0; j < inst.length; j++) {
+      const xShift = buffers.currentShifts[(inst.start + j) * 2];
+      const yShift = buffers.currentShifts[(inst.start + j) * 2 + 1];
+      tempMatrixWorld.copy(inst.parentGroup.matrixWorld);
+      tempMatrix.identity().setPosition(xShift, yShift, 0);
+      tempMatrixWorld.multiply(tempMatrix);
+      tempMatrixWorld.toArray(buffers.instanceMatrixBuffer, (inst.start + j) * 16);
+    }
+  });
+  buffers.instanceMatrixBufferAttribute.needsUpdate = true;
+}
+
+export { addTextInstances, reallocInstancedTextBuffers, removeTextInstances, textInstancingUpdateTransforms, updateTextInstancingBuffersAfterAdd };

package/text_engine_3d/types.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});let e=function(e){return e.left="left",e.right="right",e.center="center",e}({});exports.TextAlignment=e;

package/text_engine_3d/types.d.ts

@@ -0,0 +1,37 @@
+import { InstancedTextBuffers, TextInstancesPtr } from './instancedTextBuffers';
+export declare enum TextAlignment {
+    left = "left",
+    right = "right",
+    center = "center"
+}
+export interface FontInfo3D {
+    fontScale: number;
+    underlineThickness: number;
+    boundingBox: BoundingBox;
+    advances: number[];
+    maxVertices: number;
+    charToIndex: Record<string, number>;
+    xShift: number;
+    yShift: number;
+    zShift: number;
+    xScale: number;
+    yScale: number;
+    zScale: number;
+}
+export interface Font3D {
+    fontMetadata: FontInfo3D;
+    offsetsPath: string;
+    normalsPath: string;
+}
+interface BoundingBox {
+    xMin: number;
+    yMin: number;
+    xMax: number;
+    yMax: number;
+}
+export interface InstancedTextAPI {
+    getBuffers: () => InstancedTextBuffers | null;
+    getPtr: () => TextInstancesPtr | null;
+    setGlyphs: (text: string) => void;
+}
+export {};

package/text_engine_3d/types.js

@@ -0,0 +1,8 @@
+let TextAlignment = /*#__PURE__*/function (TextAlignment) {
+  TextAlignment["left"] = "left";
+  TextAlignment["right"] = "right";
+  TextAlignment["center"] = "center";
+  return TextAlignment;
+}({});
+
+export { TextAlignment };

package/text_engine_3d/useInstancedTextMaterial.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("three"),t=require("@react-three/drei");const a=()=>new r.MeshPhongMaterial;exports.useFontTexture=function(e){const a=t.useTexture(e);return a.flipY=!1,a.magFilter=r.NearestFilter,a.minFilter=r.NearestFilter,a},exports.useInstancedTextMaterial=function(t,n,i,l=a){return e.useMemo((()=>{const e=l();return e.onBeforeCompile=e=>{e.uniforms={...e.uniforms,offsets:{value:t},normals:{value:n},shift:{value:new r.Vector3(i.xShift,i.yShift,i.zShift)},scale:{value:new r.Vector3(i.xScale,i.yScale,i.zScale)}},e.vertexShader=e.vertexShader.replace(/#include <morphtarget_pars_vertex>/gi,""),e.vertexShader=e.vertexShader.replace(/#include <morphtarget_vertex>/gi,""),e.vertexShader=e.vertexShader.replace(/#include <morphcolor_vertex>/gi,""),e.vertexShader=e.vertexShader.replace(/#include <morphnormal_vertex>/gi,""),e.vertexShader=e.vertexShader.replace(/#include <skinning_pars_vertex>/gi,""),e.vertexShader=e.vertexShader.replace(/#include <skinbase_vertex>/gi,""),e.vertexShader=e.vertexShader.replace(/#include <skinning_vertex>/gi,""),e.vertexShader=e.vertexShader.replace(/#include <skinnormal_vertex>/gi,""),e.vertexShader=e.vertexShader.replace(/#include <displacementmap_pars_vertex>/gi,""),e.vertexShader=e.vertexShader.replace(/#include <displacementmap_vertex>/gi,""),e.vertexShader=e.vertexShader.replace(/>[\n]*void/,">\n        uniform sampler2D offsets;\n        uniform sampler2D normals;\n        uniform vec3 shift;\n        uniform vec3 scale;\n        in float instanceGIndex;\n\n        void"),e.vertexShader=e.vertexShader.replace(/void main\(\) {/,"void main() { vec3 offset = texelFetch(offsets, ivec2(gl_VertexID, instanceGIndex), 0).rgb * scale + shift;"),e.vertexShader=e.vertexShader.replace(/#include <beginnormal_vertex>/,"vec3 objectNormal = (texelFetch(normals, ivec2(gl_VertexID, instanceGIndex), 0).rgb) - 0.5;"),e.vertexShader=e.vertexShader.replace(/#include <begin_vertex>/,"vec3 transformed = offset;")},e}),[t,n,i,l])};

package/text_engine_3d/useInstancedTextMaterial.d.ts

@@ -0,0 +1,4 @@
+import { MeshPhongMaterial, Texture } from 'three';
+import { FontInfo3D } from './types';
+export declare function useInstancedTextMaterial(offsetsTexture: Texture, normalsTexture: Texture, fontMetadata: FontInfo3D, originalMaterial?: () => MeshPhongMaterial): MeshPhongMaterial;
+export declare function useFontTexture(texPath: string): Texture;

package/text_engine_3d/useInstancedTextMaterial.js

@@ -0,0 +1,73 @@
+import { useMemo } from 'react';
+import { Vector3, NearestFilter, MeshPhongMaterial } from 'three';
+import { useTexture } from '@react-three/drei';
+
+const defaultMaterial = () => new MeshPhongMaterial();
+function useInstancedTextMaterial(offsetsTexture, normalsTexture, fontMetadata, originalMaterial = defaultMaterial) {
+  const textMat = useMemo(() => {
+    const material = originalMaterial();
+    material.onBeforeCompile = shader => {
+      shader.uniforms = {
+        ...shader.uniforms,
+        offsets: {
+          value: offsetsTexture
+        },
+        normals: {
+          value: normalsTexture
+        },
+        shift: {
+          value: new Vector3(fontMetadata.xShift, fontMetadata.yShift, fontMetadata.zShift)
+        },
+        scale: {
+          value: new Vector3(fontMetadata.xScale, fontMetadata.yScale, fontMetadata.zScale)
+        }
+      };
+
+      // Strip out features we definitely don't need
+      // Strip morph targets
+      shader.vertexShader = shader.vertexShader.replace(/#include <morphtarget_pars_vertex>/gi, '');
+      shader.vertexShader = shader.vertexShader.replace(/#include <morphtarget_vertex>/gi, '');
+      shader.vertexShader = shader.vertexShader.replace(/#include <morphcolor_vertex>/gi, '');
+      shader.vertexShader = shader.vertexShader.replace(/#include <morphnormal_vertex>/gi, '');
+
+      // Strip animated vertex skinning
+      shader.vertexShader = shader.vertexShader.replace(/#include <skinning_pars_vertex>/gi, '');
+      shader.vertexShader = shader.vertexShader.replace(/#include <skinbase_vertex>/gi, '');
+      shader.vertexShader = shader.vertexShader.replace(/#include <skinning_vertex>/gi, '');
+      shader.vertexShader = shader.vertexShader.replace(/#include <skinnormal_vertex>/gi, '');
+
+      // Strip displacement mapping
+      shader.vertexShader = shader.vertexShader.replace(/#include <displacementmap_pars_vertex>/gi, '');
+      shader.vertexShader = shader.vertexShader.replace(/#include <displacementmap_vertex>/gi, '');
+
+      // Insert global chunk
+      shader.vertexShader = shader.vertexShader.replace(/>[\n]*void/, `>
+        uniform sampler2D offsets;
+        uniform sampler2D normals;
+        uniform vec3 shift;
+        uniform vec3 scale;
+        in float instanceGIndex;
+
+        void`);
+
+      // Insert program chunk
+      shader.vertexShader = shader.vertexShader.replace(/void main\(\) {/, `void main() { vec3 offset = texelFetch(offsets, ivec2(gl_VertexID, instanceGIndex), 0).rgb * scale + shift;`);
+
+      // Replace normal init
+      shader.vertexShader = shader.vertexShader.replace(/#include <beginnormal_vertex>/, `vec3 objectNormal = (texelFetch(normals, ivec2(gl_VertexID, instanceGIndex), 0).rgb) - 0.5;`);
+      // Replace position init
+      shader.vertexShader = shader.vertexShader.replace(/#include <begin_vertex>/, `vec3 transformed = offset;`);
+    };
+    return material;
+  }, [offsetsTexture, normalsTexture, fontMetadata, originalMaterial]);
+  return textMat;
+}
+function useFontTexture(texPath) {
+  const fontTexture = useTexture(texPath);
+  fontTexture.flipY = false;
+  fontTexture.magFilter = NearestFilter;
+  fontTexture.minFilter = NearestFilter;
+  return fontTexture;
+}
+
+export { useFontTexture, useInstancedTextMaterial };