Three.js Blocks

Home
Documentation
Examples
Tools

textDrawId

@three-blocks/coreWebGPU
const textDrawId : Node<float> = nodeImmutable( TextIndexNode, TextIndexNode.WORD )
Value
nodeImmutable( TextIndexNode, TextIndexNode.WORD )

Draw/member ID as a float. For single Text instances, this is always 0. For BatchedText, this is the index of the text member within the batch.

Works in both vertex shaders (positionNode) and fragment shaders (colorNode).

Example
import { BatchedText, textDrawId, textLetterId } from '@three-blocks/core';
import { sin, time, positionLocal, Fn, uniformArray } from 'three/tsl';
import * as THREE from 'three';

const batchedText = new BatchedText(100, 100 * 10);

const text1 = new Text();
text1.text = 'FIRST';
text1.anchorX = 'center';
text1.anchorY = 'middle';
text1.fontSize = 1.35;
text1.position.set(0, 1, 0);
batchedText.addText(text1);

const text2 = new Text();
text2.text = 'SECOND';
text2.anchorX = 'center';
text2.anchorY = 'middle';
text2.fontSize = 1.35;
text2.position.set(0, 0, 0);
batchedText.addText(text2);

const text3 = new Text();
text3.text = 'THIRD';
text3.anchorX = 'center';
text3.anchorY = 'middle';
text3.fontSize = 1.35;
text3.position.set(0, -1, 0);
batchedText.addText(text3);

const colors = uniformArray([
  new THREE.Vector3(0, 0, 0.4),
  new THREE.Vector3(1, 0, 0.4),
  new THREE.Vector3(0.4, 0, 0)
], 'vec3');

batchedText.material.colorNode = colors.element(textDrawId);

batchedText.material.positionNode = Fn(() => {
  const pos = positionLocal.toVar();
  pos.x.addAssign(sin(time.add(textDrawId.mul(2)).add(textLetterId.mul(3))).mul(0.2));
  return pos;
})();