Three.js Blocks

Home
Documentation
Examples
Tools

batchedTextColor

@three-blocks/coreWebGPU
batchedTextColor(batchedText : BatchedText, baseDiffuse : Node<vec4>) : BatchedTextColorNode

TSL function for creating a BatchedTextColorNode.

This node handles SDF-based rendering for BatchedText, computing fill and outline colors and opacity based on signed distance fields. It reads per-member colors from storage buffers and applies visibility masking for GPU culling.

This node should be used in material.setupDiffuseColor to override the diffuse color with SDF rendering.

Parameters
batchedTextBatchedText
Reference to the BatchedText instance.
baseDiffuseoptionalNode<vec4>
Base diffuse color/alpha computed before SDF.
Returns
BatchedTextColorNode
Example
import { BatchedText, Text, batchedTextColor } from '@three-blocks/core';
import { vec4, diffuseColor } from 'three/tsl';

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

const text1 = new Text();
text1.text = 'First';
text1.position.set(0, 1, 0);
batchedText.addText(text1);

const text2 = new Text();
text2.text = 'Second';
text2.position.set(0, -1, 0);
batchedText.addText(text2);


const material = batched.material;

// Save original setupDiffuseColor
const originalSetupDiffuseColor = material.setupDiffuseColor
  ? material.setupDiffuseColor.bind(material)
  : null;

material.setupDiffuseColor = (builder) => {
  // Run original setupDiffuseColor first (handles user colorNode, vertexColors, etc.)
  if (originalSetupDiffuseColor) {
    originalSetupDiffuseColor(builder);
  }

  // Capture the base diffuse produced by the default pipeline
  const baseDiffuse = vec4(diffuseColor).toVar();

  // Compute SDF RGBA using the base diffuse as input
  const sdfDiffuse = batchedTextColor(builder.object, baseDiffuse);

  // Override diffuseColor so subsequent lighting/output uses the SDF result
  diffuseColor.assign(sdfDiffuse);
};