diegetic-world-text

Diegetic World Text and Signs

Use this skill when adding signs, labels, speech bubbles, markers, or other text that exists inside a 3D scene.

Pattern

Use dynamic canvas textures for short world text. Draw text into a DynamicTexture or canvas, assign it to a plane material, then place the plane in the world. This is useful for signs, region labels, speech bubbles, nameplates, debug markers, and prompt callouts.

Keep the text system generic:

• createWorldLabel(scene, id, text, position) for fixed labels
• createSpeechBubble(scene, parent, id, initialText) for character-attached text
• drawBubbleText(texture, text, tone) for redraws
• faceCamera(plane, parent, camera) for billboarding when needed

import { Color3, DynamicTexture, MeshBuilder, StandardMaterial, TransformNode, Vector3, type Camera, type Scene } from '@babylonjs/core'

export function createWorldLabel(scene: Scene, id: string, text: string, position: Vector3) {
  const texture = new DynamicTexture(`${id}-texture`, { width: 512, height: 160 }, scene)
  texture.hasAlpha = true
  texture.drawText(text, null, 96, 'bold 52px Inter, Arial', '#191714', '#f6dc72', true)

  const material = new StandardMaterial(`${id}-material`, scene)
  material.diffuseTexture = texture
  material.emissiveColor = Color3.FromHexString('#fff1a0')
  material.specularColor = Color3.Black()

  const plane = MeshBuilder.CreatePlane(id, { width: 2.6, height: 0.8 }, scene)
  plane.position = position
  plane.material = material
  plane.isPickable = false
  return { plane, texture }
}

Texture Setup

Use a power-of-two texture size large enough for readable text, such as 512x160 or 512x192. Enable alpha. Draw a filled background only when readability needs it. Use high-contrast text and simple font stacks.

For multiline bubbles, split primary and secondary lines before drawing. Truncate or wrap long lines. Do this before drawing to avoid overflowing the texture.

export function drawBubbleText(texture: DynamicTexture, text: string, urgent = false) {
  texture.clear()
  const [primary, secondary] = text.split('\n')
  const line = primary.length > 34 ? `${primary.slice(0, 31)}...` : primary
  const background = urgent ? '#ffd1c2' : '#ffffff'

  texture.drawText(line, null, secondary ? 84 : 116, 'bold 38px Inter, Arial', '#181820', background, true)
  if (secondary) {
    texture.drawText(secondary.slice(0, 32), null, 142, 'bold 30px Inter, Arial', '#5f4524', null, true)
  }
}

export function createSpeechBubble(scene: Scene, parent: TransformNode, id: string, text: string) {
  const texture = new DynamicTexture(`${id}-texture`, { width: 512, height: 192 }, scene)
  texture.hasAlpha = true
  drawBubbleText(texture, text)

  const material = new StandardMaterial(`${id}-material`, scene)
  material.diffuseTexture = texture
  material.emissiveColor = Color3.FromHexString('#f7f2df')
  material.specularColor = Color3.Black()

  const plane = MeshBuilder.CreatePlane(id, { width: 1.5, height: 0.56 }, scene)
  plane.parent = parent
  plane.position = new Vector3(0, 1.45, 0)
  plane.material = material
  plane.isPickable = false
  return { plane, texture }
}