three-text 0.2.0 → 0.2.2

package/README.md

@@ -17,7 +17,7 @@ A high fidelity 3D font renderer and text layout engine for the web
 
 **three-text** renders and formats text from TTF, OTF, and WOFF font files as 3D geometry. It uses [TeX](https://en.wikipedia.org/wiki/TeX)-based parameters for breaking text into paragraphs across multiple lines, and turns font outlines into 3D shapes on the fly, caching their geometries for low CPU overhead in languages with lots of repeating glyphs. Variable fonts are supported as static instances at a given axis coordinate
 
-The library has a framework-agnostic core that returns raw vertex data, with lightweight adapters for Three.js, React Three Fiber, p5.js, WebGL, and WebGPU
+The library has a framework-agnostic core that returns raw vertex data, with lightweight adapters for [Three.js](https://threejs.org), [React Three Fiber](https://docs.pmnd.rs/react-three-fiber), [p5.js](https://p5js.org), [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API), and [WebGPU](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)
 
 Under the hood, three-text relies on [HarfBuzz](https://github.com/harfbuzz/harfbuzzjs) for text shaping, [Knuth-Plass](http://www.eprg.org/G53DOC/pdfs/knuth-plass-breaking.pdf) line breaking, [Liang](https://tug.org/docs/liang/liang-thesis.pdf) hyphenation, [libtess2](https://github.com/memononen/libtess2) (based on the [OpenGL Utility Library (GLU) tessellator](https://www.songho.ca/opengl/gl_tessellation.html) by Eric Veach) for removing overlaps and triangulation, bezier curve polygonization from Maxim Shemanarev's [Anti-Grain Geometry](https://web.archive.org/web/20060128212843/http://www.antigrain.com/research/adaptive_bezier/index.html), and [Visvalingam-Whyatt](https://hull-repository.worktribe.com/preview/376364/000870493786962263.pdf) [line simplification](https://bost.ocks.org/mike/simplify/).
 
@@ -25,12 +25,12 @@ Under the hood, three-text relies on [HarfBuzz](https://github.com/harfbuzz/harf
 
 - [Overview](#overview)
 - [Getting started](#getting-started)
-  - [Three.js](#threejs-usage)
-  - [React Three Fiber](#react-three-fiber-usage)
-  - [WebGL](#webgl-usage)
-  - [WebGPU](#webgpu-usage)
-  - [p5.js](#p5js-usage)
-  - [Core (framework-agnostic)](#core-usage)
+  - [Three.js](#threejs)
+  - [p5.js](#p5js)
+  - [React Three Fiber](#react-three-fiber)
+  - [WebGL](#webgl)
+  - [WebGPU](#webgpu)
+  - [Core](#core)
 - [Development and examples](#development-and-examples)
 - [Architecture](#architecture)
 - [Why three-text?](#why-three-text)
@@ -70,7 +70,7 @@ three-text has a framework-agnostic core that processes fonts and generates geom
 - **`three-text/three/react`** - React Three Fiber component
 - **`three-text/webgl`** - WebGL buffer utility
 - **`three-text/webgpu`** - WebGPU buffer utility
-- **`three-text/p5`** - p5.js geometry converter
+- **`three-text/p5`** - p5.js adapter
 
 Choose the import that matches your stack. Most users will use `three-text/three` or `three-text/p5`
 
@@ -97,28 +97,29 @@ scene.add(mesh);
 #### p5.js
 
 ```javascript
-import { Text } from 'three-text';
-import { createP5Geometry } from 'three-text/p5';
+import 'three-text/p5';
 
-let textGeom;
+let font;
+let textResult;
+
+function preload() {
+  loadThreeTextShaper('/hb/hb.wasm');
+  font = loadThreeTextFont('/fonts/Font.woff');
+}
 
 async function setup() {
   createCanvas(400, 400, WEBGL);
-  Text.setHarfBuzzPath('/hb/hb.wasm');
-  
-  const data = await Text.create({
-    text: 'Hello p5!',
-    font: '/fonts/Font.woff',
-    size: 72
+  textResult = await createThreeTextGeometry('Hello p5!', {
+    font: font,
+    size: 72,
+    depth: 30
   });
-  
-  textGeom = createP5Geometry(window, data);
 }
 
 function draw() {
   background(200);
   lights();
-  model(textGeom);
+  if (textResult) model(textResult.geometry);
 }
 ```
 
@@ -244,7 +245,7 @@ three-text/
 │   │   └── ThreeText.tsx       # React Three Fiber component
 │   ├── webgl/                  # WebGL buffer utility
 │   ├── webgpu/                 # WebGPU buffer utility
-│   ├── p5/                     # p5.js geometry converter
+│   ├── p5/                     # p5.js adapter
 │   ├── hyphenation/            # Language-specific hyphenation patterns
 │   └── utils/                  # Performance logging, data structures
 ├── examples/                   # Demos for all adapters
@@ -961,7 +962,7 @@ The build generates multiple module formats for core and all adapters:
 - `dist/three/react.js` - React component
 - `dist/webgl/` - WebGL utility
 - `dist/webgpu/` - WebGPU utility
-- `dist/p5/` - p5.js converter
+- `dist/p5/` - p5.js adapter
 
 **Patterns:**
 - `dist/patterns/` - Hyphenation patterns (ESM and UMD)

package/dist/index.cjs

@@ -1,5 +1,5 @@
 /*!
- * three-text v0.2.0
+ * three-text v0.2.2
  * Copyright (C) 2025 Countertype LLC
  * 
  * This program is free software: you can redistribute it and/or modify
@@ -4173,7 +4173,7 @@ class Extruder {
         const triangleIndices = triangulatedData.indices;
         for (let i = 0; i < points.length; i += 2) {
             vertices.push(points[i], points[i + 1], 0);
-            normals.push(0, 0, 1); // Front-facing normal for DoubleSide compatibility
+            normals.push(0, 0, -1);
         }
         // Add triangle indices
         for (let i = 0; i < triangleIndices.length; i++) {
@@ -6784,13 +6784,10 @@ class Text {
         planeBounds.min.x = alignmentResult.adjustedBounds.min.x;
         planeBounds.max.x = alignmentResult.adjustedBounds.max.x;
         const finalScale = size / this.loadedFont.upem;
-        // Scale vertices and normals directly
+        // Scale vertices only (normals are unit vectors, don't scale)
         for (let i = 0; i < vertices.length; i++) {
             vertices[i] *= finalScale;
         }
-        for (let i = 0; i < normals.length; i++) {
-            normals[i] *= finalScale;
-        }
         planeBounds.min.x *= finalScale;
         planeBounds.min.y *= finalScale;
         planeBounds.min.z *= finalScale;

package/dist/index.js

@@ -1,5 +1,5 @@
 /*!
- * three-text v0.2.0
+ * three-text v0.2.2
  * Copyright (C) 2025 Countertype LLC
  * 
  * This program is free software: you can redistribute it and/or modify
@@ -4170,7 +4170,7 @@ class Extruder {
         const triangleIndices = triangulatedData.indices;
         for (let i = 0; i < points.length; i += 2) {
             vertices.push(points[i], points[i + 1], 0);
-            normals.push(0, 0, 1); // Front-facing normal for DoubleSide compatibility
+            normals.push(0, 0, -1);
         }
         // Add triangle indices
         for (let i = 0; i < triangleIndices.length; i++) {
@@ -6781,13 +6781,10 @@ class Text {
         planeBounds.min.x = alignmentResult.adjustedBounds.min.x;
         planeBounds.max.x = alignmentResult.adjustedBounds.max.x;
         const finalScale = size / this.loadedFont.upem;
-        // Scale vertices and normals directly
+        // Scale vertices only (normals are unit vectors, don't scale)
         for (let i = 0; i < vertices.length; i++) {
             vertices[i] *= finalScale;
         }
-        for (let i = 0; i < normals.length; i++) {
-            normals[i] *= finalScale;
-        }
         planeBounds.min.x *= finalScale;
         planeBounds.min.y *= finalScale;
         planeBounds.min.z *= finalScale;