Skip to main content

Text to Splats

The GsplatText script renders text as Gaussian splats, with one splat per non-transparent pixel. This creates text labels that integrate seamlessly with splat-based scenes.

note

This feature builds on the splat rendering architecture.

Overview​

GsplatText is a Script component that:

  • Renders text to a canvas using standard CSS fonts
  • Creates one splat per visible pixel
  • Displays text on the XZ plane (Y=0)
  • Supports fill color, stroke, and custom fonts

Use the entity's transform to scale and position the text in your scene.

Basic Usage​

// Import the script
const { GsplatText } = await import('path/to/gsplat-text.mjs');

// Add script component to an entity
entity.addComponent('script');
const textSplat = entity.script.create(GsplatText);

// Configure text
textSplat.text = 'Hello World';
textSplat.fontSize = 64;
textSplat.fillStyle = '#ffffff';

// Position and scale using entity transform
entity.setLocalPosition(0, 0, 0);
entity.setLocalScale(0.15, 0.15, 0.15);

Attributes​

AttributeTypeDefaultDescription
textstring''The text string to render
fontSizenumber64Font size in pixels
fontFamilystring'sans-serif'CSS font family
fillStylestring'#ffffff'Text fill color (CSS color string)
strokeStylestring'rgba(0,0,0,0)'Stroke color (CSS color string)
strokeWidthnumber0Stroke width in pixels
paddingnumber0Padding around text in pixels

Styling Examples​

Basic White Text​

textSplat.text = 'Score: 100';
textSplat.fontSize = 48;
textSplat.fillStyle = '#ffffff';

Outlined Text​

textSplat.text = 'GAME OVER';
textSplat.fontSize = 72;
textSplat.fillStyle = '#ff0000';
textSplat.strokeStyle = '#000000';
textSplat.strokeWidth = 3;

Custom Font​

textSplat.text = 'Fancy Text';
textSplat.fontFamily = 'Georgia, serif';
textSplat.fontSize = 56;

Automatic Updates​

The script automatically rebuilds when any attribute changes. Simply modify the properties and the splats update on the next frame.

// Update text at runtime
textSplat.text = 'New Score: 200';

Coordinate System​

Like GsplatImage, text is rendered on the XZ plane:

  • X axis: Left to right
  • Z axis: Top to bottom (text reads correctly when viewed from +Y)
  • Y axis: Always 0

The text is sized to fit in a 1x1 unit area, scaled by the entity's transform.

Performance Considerations​

The number of splats depends on:

  • Font size (larger = more pixels)
  • Text length
  • Stroke width (adds more pixels)

For labels with many characters or large font sizes, the splat count can be significant.

Live Example​

See the Procedural Shapes example which demonstrates using GsplatText for dimension labels in a CAD-style visualization.

Procedural Shapes example

Script Location​

The script is available in the PlayCanvas Engine repository:

scripts/esm/gsplat/gsplat-text.mjs

See Also​