feat(troika-three-text): ALPHA: BatchedText for batching many Text in…

…stances in a single draw call

packages/troika-3d-text/src/facade/BatchedText3DFacade.js

@@ -0,0 +1,26 @@
+import { Object3DFacade } from "troika-3d";
+import { BatchedText } from "troika-three-text";
+import { TEXT_MESH_PROPS } from "./Text3DFacade";
+
+export class BatchedText3DFacade extends Object3DFacade {
+  constructor(parent) {
+    super(parent, new BatchedText())
+
+    // Orphaned container for children so they don't end up in the scene
+    this._texts = new Object3DFacade()
+  }
+
+  afterUpdate() {
+    TEXT_MESH_PROPS.forEach(prop => {
+      this.threeObject[prop] = this[prop];
+    })
+    this._texts.children = this.children
+    this._texts.afterUpdate()
+    this._texts.forEachChild(text => this.threeObject.addText(text.threeObject))
+    super.afterUpdate()
+  }
+
+  shouldUpdateChildren() {
+    return false
+  }
+}

packages/troika-3d-text/src/facade/Text3DFacade.js

@@ -3,7 +3,7 @@ import { Text } from 'troika-three-text'
 import SelectionManagerFacade from './SelectionManagerFacade.js'
 
 // Properties that will simply be forwarded to the TextMesh:
-const TEXT_MESH_PROPS = [
+export const TEXT_MESH_PROPS = [
   'text',
   'anchorX',
   'anchorY',

packages/troika-3d-text/src/index.js

@@ -12,3 +12,4 @@ export {
 
 // Troika framework specific exports:
 export {default as Text3DFacade} from './facade/Text3DFacade.js'
+export { BatchedText3DFacade } from './facade/BatchedText3DFacade.js'

packages/troika-examples/index.js

@@ -8,6 +8,7 @@ import GlobeExample from './globe/GlobeExample'
 import GlobeConnectionsExample from './globe-connections/GlobeConnectionsExample'
 import HtmlOverlays from './html-overlays/HtmlOverlaysExample'
 import TextExample from './text/TextExample'
+import BatchedTextExample from "./text-batched/BatchedTextExample";
 import FlexboxExample from './flexbox/FlexboxExample'
 import UIExample from './ui2/UIExample'
 import DragDrop from './dragdrop/DragDropExample'
@@ -32,6 +33,7 @@ const EXAMPLES = [
   {id: 'globeConnections', name: 'Globe Connections', component: GlobeConnectionsExample},
   {id: 'htmlOverlays', name: 'HTML Overlays', component: HtmlOverlays},
   {id: 'text', name: '3D Text', component: TextExample},
+  {id: 'batchedText', name: '3D Text - Batched', component: BatchedTextExample},
   {id: 'flexbox', name: 'Flexbox UI Layout', component: FlexboxExample},
   {id: 'ui', name: 'User Interface', component: UIExample},
   {id: 'dragdrop', name: 'Drag and Drop', component: DragDrop},

packages/troika-examples/package.json

@@ -18,9 +18,9 @@
     "adaptive-bezier-curve": "^1.0.3",
     "d3-hierarchy": "^1.1.8",
     "d3-voronoi": "^1.1.4",
-    "react": "^16.5.2",
+    "react": "^16.14.0",
     "react-dat-gui": "^4.0.0",
-    "react-dom": "^16.5.2",
+    "react-dom": "^16.14.0",
     "three": "^0.147.0",
     "three-instanced-uniforms-mesh": "^0.49.1",
     "three-line-2d": "^1.1.6",

packages/troika-examples/text-batched/BatchedTextExample.jsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { Canvas3D } from "troika-3d";
+import { Text3DFacade, BatchedText3DFacade } from "troika-3d-text";
+import { FONTS } from '../text/TextExample'
+import { Color } from "three/src/math/Color";
+
+export default function BatchedTextExample ({ stats, width, height }) {
+  const [texts, setTexts] = React.useState(randomizeText());
+
+  function randomizeText() {
+    const all = [
+      "One", "Two", "Three", "Four", "Five",
+      "Six", "Seven", "Eight", "Nine", "Ten",
+      "Eleven", "Twelve", "Thirteen", "Fourteen", "Fifteen",
+      "Sixteen", "Seventeen", "Eighteen", "Nineteen", "Twenty"
+    ]
+    const subset = all.slice(0, Math.max(8, Math.floor(Math.random() * all.length)))
+    return subset.map((text, i) => ({
+      facade: Text3DFacade,
+      text,
+      font: Object.values(FONTS)[i % Object.values(FONTS).length],
+      fontSize: randRange(0.05, 0.25),
+      x: randRange(-1, 1),
+      y: randRange(-1, 1),
+      z: randRange(-1, 1),
+      rotateZ: randRange(-0.01, 0.01),
+      anchorX: "50%",
+      anchorY: "50%",
+      color: randColor(),
+      animation: {
+        from: { rotateY: 0 },
+        to: { rotateY: Math.PI * 2 },
+        duration: randRange(800, 3000),
+        iterations: Infinity
+      }
+    }))
+  }
+
+  return <div>
+    <Canvas3D
+      antialias
+      stats={stats}
+      width={width}
+      height={height}
+      onBackgroundClick={() => {
+        setTexts(randomizeText())
+      }}
+      camera={{
+        fov: 75,
+        aspect: width / height,
+        x: 0,
+        y: 0,
+        z: 2.5
+      }}
+      objects={[
+        {
+          facade: BatchedText3DFacade,
+          children: texts,
+          animation: {
+            from: { rotateY: 0 },
+            to: { rotateY: Math.PI * 2 },
+            duration: 10000,
+            iterations: Infinity
+          }
+        }
+      ]}
+    />
+  </div>;
+}
+
+function randRange (min, max) {
+  return min + Math.random() * (max - min);
+}
+function randColor() {
+  return new Color().setHSL(Math.random(), 1, 0.5)
+}
+// function randFromArray(array) {
+//   return array[Math.floor(Math.random() * array.length)];
+// }

packages/troika-examples/text/TextExample.jsx

@@ -16,7 +16,7 @@ import { DatGuiFacade } from 'troika-3d-ui'
 import { ExampleConfigurator } from '../_shared/ExampleConfigurator.js'
 
 
-const FONTS = {
+export const FONTS = {
   'Noto Sans (none)': null,
   'Roboto': 'https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxM.woff',
   'Alex Brush': 'https://fonts.gstatic.com/s/alexbrush/v8/SZc83FzrJKuqFbwMKk6EhUXz6w.woff',