Does CSS2DRenderer ignore autoMatrixUpdate = false?

Questions
1

I made a bunch of text labels via new CSS2DObject( ), and soon after apply matrixAutoUpdate = false, but performance is showing the my CSS2DRenderer is eating up over 80% of the program on idle.

Turning matrixAutoUpdate true/false doesn’t seem to change anything.

Is this behavior normal? Anyway to optimize it?

function update( ) {
    requestAnimationFrame( update );

    labelRenderer.render( scene, camera ); // Soaking up a lot of % on idle
    renderer.render( scene, camera );
}
class Label {
    constructor( text, position ) {
	    this.div = document.createElement( 'span' );
	    this.div.className = 'label';
	    this.div.textContent = text;
	    this.div.style.color = 'white';
	    this.div.style.backgroundColor = 'transparent';
	    this.object = new CSS2DObject( this.div );
	    this.object.layers.set( 0 );
	    this.object.castShadow = false;
	    this.object.receiveShadow = false;
	    this.object.position.set( position.x, position.y + 0.5, position.z - 0.5 );
	    this.object.matrixAutoUpdate = false;
	    this.object.matrixWorldAutoUpdate = false;
        
        // Update only once after initializing
	    this.object.updateMatrix( );
	    this.object.updateMatrixWorld( );
    }
}
2

Why do you need to render when on idle? Render only when there is some change in the scene or some user interaction.

1 Like
3

It’s specifically for a game, so the labels (character usernames) will be moving around most of the time along side the characters. I’m just astonished that for even if 1 label needs an update, you have to render everything