src/visualizer/LabelHelper.js

import * as THREE from 'three';
import { PALETTE_3D } from '../engine/palette.js';

export function createLabelSprite(text, x, y, z, color) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    // High res canvas for crisp text
    canvas.width = 512;
    canvas.height = 128;

    // 1. Clear Canvas (Ensure transparency)
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 2. Draw White Text (Base for tinting)
    ctx.fillStyle = 'white';
    ctx.font = 'Bold 32px "Courier New", monospace'; // Smaller font
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText(text, 10, 64);

    const texture = new THREE.CanvasTexture(canvas);
    texture.needsUpdate = true; // Ensure texture is uploaded

    // 3. Create Material with Tint Color
    const material = new THREE.SpriteMaterial({
        map: texture,
        color: new THREE.Color(color || PALETTE_3D.AMBIENT_LIGHT), // Safety fallback
        transparent: true,
        depthWrite: false,
        depthTest: false // <--- CRITICAL FIX: Always render on top
    });

    const sprite = new THREE.Sprite(material);
    // Scale sprite to match canvas aspect ratio (Reduced by 50% for cleaner look)
    sprite.scale.set(3.0, 0.8, 1);
    sprite.renderOrder = 99999; // <--- CRITICAL FIX: Draw last
    sprite.position.set(x, y, z);
    return sprite;
}