Three.js Blocks

Home
Documentation
Examples
Tools

textGlyphUV

@three-blocks/coreWebGPUWebGL
const textGlyphUV : Node<vec2> = varyingProperty( 'vec4', 'vTextPacked0' ).zw
Value
varyingProperty( 'vec4', 'vTextPacked0' ).zw

Glyph UV coordinates as a vec2. These are the UV coordinates within the current glyph's bounding box (0-1 range within the glyph).

Example
import { Text, textGlyphUV } from '@three-blocks/core';
import { mix, color, length, Fn } from 'three/tsl';

const text = new Text();
text.text = 'GLYPH UV\nPER LETTER';

// Gradient within each glyph from left to right
text.material.colorNode = mix(
  color(0xff0066),
  color(0x00ffff),
  textGlyphUV.x
);

// Radial gradient from center of each glyph
text.material.colorNode = Fn(() => {
  const center = textGlyphUV.sub(0.5);
  const dist = length(center);
  return mix(color(0xffffff), color(0xff0066), dist.mul(2));
})();