Three.js Blocks

Home
Documentation
Examples
Tools

textColor

@three-blocks/coreWebGPUWebGL
textColor(text : Text, baseDiffuse : Node<vec4>) : TextColorNode

TSL function for creating a TextColorNode.

This node handles SDF-based rendering of text, computing fill and outline colors and opacity based on signed distance fields. It should be used in material.setupDiffuseColor to override the diffuse color with SDF rendering.

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

const text = new Text();
text.text = 'SDF Text';

const material = text.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 = textColor(builder.object, baseDiffuse);

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