HTML Labels position lag starting from r113

Hello,
im displaying some html/css labels in my application and noticed a serious lag in position update.

I can pinpoint this problem to r113+ (112 doesnt have this issue). The migration guide states many Math and matrix related changes, but Im not calling any of that myself.

This is how I update the 2D-position of my label (runs on every frame):

screenVector.copy(this.position).project(camera);
const posx = (screenVector.x + 1) * parentDomNode.offsetWidth / 2;
const posy = (1 - screenVector.y) * parentDomNode.offsetHeight / 2;
container.style.transform = 'translate(' + Math.floor(posx) + 'px, ' + Math.floor(posy) + 'px)';

I can provide a live example later.

On a side note: creating a CSS2DObject from my HTML object and letting the CSS2DRenderer handle the position is working fine.

Update: the activated damping in OrbitControls has a direct effect on this. So what I called “lag” is the labels smoothly sliding to their new position. This behavior seems odd to me, how can I avoid this?

See the Pen labeltest by nudelmann (@nudelmann) on CodePen.

That would be great!

Good to know! I suspect that debugging a live example will make it easier to investigate this issue.

Here is a codepen with Html and CSS2D Labels. You can toggle threejs revisions by renaming the imports in the header:

See the Pen labeltest by nudelmann (@nudelmann) on CodePen.

Sorry, for the delay. I’ve tested your codepen today and I’m not able to see a difference between r112 and r119. However, this might depend on my browser and/or device (Chrome, macOS).

Do you mind sharing a video or gif that directly compares both behaviors?

When testing, please ensure that all of your files are from the same release. So please do not just include three.module.js from r119 or r112 but OrbitControls and CSS2Renderer, too. E.g. like so:

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.119.1/build/three.module.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.119.1/examples/jsm/controls/OrbitControls.js';
import { CSS2DRenderer, CSS2DObject } from 'https://cdn.jsdelivr.net/npm/three@0.119.1/examples/jsm/renderers/CSS2DRenderer.js';

BTW: When using Vector3.project() or Vector3.unproject(), you always have to call camera.updateMatrixWorld() in order to ensure up-to-date matrices. OrbitControls does not do this for you since it only changes Object3D.position and Object3D.quaternion. Meaning if you are not calling camera.updateMatrixWorld(), the labels transformation will be frame-late which might explain the mentioned lag.

1 Like

On a quick test using the codepen, camera.updateMatrixWorld() < seems to fix the issues.
Here is a video showing the Problem + Solution:
labeltest|video (3MB)

An often cited post about labels is also missing this information, thats why I think its good to talk about this here.

In the meantime Ive replaced my labels using the CSS2DObjects because I trust the librarys implementation, but other inconveniences arised. I will test some more and maybe open another topic.!

1 Like