2d Canvas Text Sprite Render Issues

Questions
,
1

I’m having some issues rending sprite 2d canvas text.

	function makeTextSprite(message) {

		let textToDisplay = message;
		let ctx = document.createElement('canvas').getContext('2d');
		let cnvW = 270;
		let cnvH = 270;
		let offset = 12;
		ctx.canvas.width = cnvW;
		ctx.canvas.height = cnvH;
		ctx.font = '14pt Verdana',
		ctx.fillStyle = "white";
		ctx.textAlign = "center";
		ctx.fillText(message, cnvH/2, cnvH/2 - offset); 

		let texture = new THREE.CanvasTexture(ctx.canvas);

		texture.needsUpdate = true;
		texture.generateMipmaps = false;
		
		let labelMaterial = new THREE.SpriteMaterial({
		  map: texture,
		  transparent: true,
		depthTest: false
		});
		
		let label = new THREE.Sprite(labelMaterial);
		return label;
	}

This worked fine in earlier versions of three.js. The last few versions I’ve upgraded to including the r178 show this issue and I’m not sure what’s causing it. I’ve tried many different fonts, canvas sizes, etc. Happens in FF, IE, Chrome, Opera (tested).

Screenshot 2025-07-13 121116
Screenshot 2025-07-13 121116295×133 3.9 KB

Screenshot 2025-07-13 121127

The labels just randomly fail to render correctly. Hitting refresh fixes it sometimes, other times one label is fine and another fails. You can see this with the J in Jupiter and the a in Earth.

Anyone run into this with creating labels that scale for objects which always face the camera?

Thanks

3

Haven’t noticed this myself.. do you have a repro?