feat(troika-3d-text): add glyphGeometryDetail parameter

Issue #52. This allows each glyph quad to be given more geometric detail, to enable vertex shader transforms etc.
protectwise · Jun 6, 2020 · 1f7a11f · 1f7a11f
1 parent 163be9c
commit 1f7a11f
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 3 deletions.
diff --git a/packages/troika-3d-text/README.md b/packages/troika-3d-text/README.md
@@ -155,6 +155,12 @@ The em-height at which to render the font, in local world units.
 
 Default: `0.1`
 
+#### `glyphGeometryDetail`
+
+The number of vertical/horizontal segments that make up each glyph's rectangular plane. This can be increased to provide more geometrical detail for custom vertex shader effects, for example.
+
+Default: `1`
+
 #### `letterSpacing`
 
 Sets a uniform adjustment to spacing between letters after kerning is applied, in local world units. Positive numbers increase spacing and negative numbers decrease it.

diff --git a/packages/troika-3d-text/src/facade/Text3DFacade.js b/packages/troika-3d-text/src/facade/Text3DFacade.js
@@ -21,6 +21,7 @@ const TEXT_MESH_PROPS = [
   'depthOffset',
   'clipRect',
   'orientation',
+  'glyphGeometryDetail',
   'debugSDF'
 ]
 

diff --git a/packages/troika-3d-text/src/three/GlyphsGeometry.js b/packages/troika-3d-text/src/three/GlyphsGeometry.js
@@ -7,7 +7,14 @@ import {
 } from 'three'
 
 
-const templateGeometry = new PlaneBufferGeometry(1, 1).translate(0.5, 0.5, 0)
+const templateGeometries = {}
+function getTemplateGeometry(detail) {
+  let geom = templateGeometries[detail]
+  if (!geom) {
+    geom = templateGeometries[detail] = new PlaneBufferGeometry(1, 1, detail, detail).translate(0.5, 0.5, 0)
+  }
+  return geom
+}
 const tempVec3 = new Vector3()
 
 const glyphBoundsAttrName = 'aTroikaGlyphBounds'
@@ -50,8 +57,7 @@ class GlyphsGeometry extends InstancedBufferGeometry {
   constructor() {
     super()
 
-    // Base per-instance attributes
-    this.copy(templateGeometry)
+    this.detail = 1
 
     // Preallocate zero-radius bounding sphere
     this.boundingSphere = new Sphere()
@@ -61,6 +67,23 @@ class GlyphsGeometry extends InstancedBufferGeometry {
     // No-op; we'll sync the boundingSphere proactively in `updateGlyphs`.
   }
 
+  set detail(detail) {
+    if (detail !== this._detail) {
+      this._detail = detail
+      if (typeof detail !== 'number' || detail < 1) {
+        detail = 1
+      }
+      let tpl = getTemplateGeometry(detail)
+      ;['position', 'normal', 'uv'].forEach(attr => {
+        this.attributes[attr] = tpl.attributes[attr]
+      })
+      this.setIndex(tpl.getIndex())
+    }
+  }
+  get detail() {
+    return this._detail
+  }
+
   /**
    * Update the geometry for a new set of glyphs.
    * @param {Float32Array} glyphBounds - An array holding the planar bounds for all glyphs

diff --git a/packages/troika-3d-text/src/three/TextMesh.js b/packages/troika-3d-text/src/three/TextMesh.js
@@ -200,6 +200,14 @@ class TextMesh extends Mesh {
      */
     this.orientation = defaultOrient
 
+    /**
+     * @member {number} glyphGeometryDetail
+     * Controls number of vertical/horizontal segments that make up each glyph's rectangular
+     * plane. Defaults to 1. This can be increased to provide more geometrical detail for custom
+     * vertex shader effects, for example.
+     */
+    this.glyphGeometryDetail = 1
+
     this.debugSDF = false
   }
 
@@ -323,6 +331,13 @@ class TextMesh extends Mesh {
     this._baseMaterial = baseMaterial
   }
 
+  get glyphGeometryDetail() {
+    return this.geometry.detail
+  }
+  set glyphGeometryDetail(detail) {
+    this.geometry.detail = detail
+  }
+
   // Create and update material for shadows upon request:
   get customDepthMaterial() {
     return this.material.getDepthMaterial()