GUI.TextBlock moveToVector3 delay problem

I wrote an example to show you the problem.

code here:

https://www.babylonjs-playground.com/#4AJZPU

I want to keep Each TextBlock place in its’ cross of lines.

BUT,
when you drag canvas to rotate camera, TextBlock DO NOT in the right position very quickly.
It looks like whole BABYLON.GUI system update has a big delay.

Maybe I do it in a wrong way…Please tell me how to do it right.

Hi Renton, welcome to the forum.

SOME of this issue is caused by camera.inertia, I believe.

https://www.babylonjs-playground.com/#4AJZPU#1

Line 24… I set camera.inertia = 0. I am seeing SOME improvement. Enough? Thoughts?

basically, it’s NOT cause by camera.
drag the canvas a little bit faster, you’ll see what happen, the problem still there even set camera.inertia = 0.

haha this one was a bit tricky :slight_smile:
https://www.babylonjs-playground.com/#4AJZPU#2

So in a nutshell:

  • Layer (like GUI) are rendered before the camera updates so you are always lagging behind with one frame
  • One way to fix that is to render the GUI in a second scene. Here I used the Utility renderer area which is designed to be rendered after the main scene
3 Likes

You’re a GOD! Cooooooooool.

let layerMain = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI('layerMain', true, BABYLON.UtilityLayerRenderer.DefaultUtilityLayer.utilityLayerScene);

Friggin’ magic! GUI layer rendered BEFORE cam updates, util layer AFTER. Interesting!

1 Like

that should not be magic, it’s what a GUI system should do normally.

not sure to understand if you are mean or if this is a joke

:slight_smile: I’m the one that called it “magic”, and I was talking about DK’s fancy code adjustments.

@Deltakosh, do you have a moment to teach us why the GUI layer is rendered before camera updates?

ie. What would fail/work-badly IF GUI layer were rendered after camera updates (perhaps just before utility layer)? Maybe we could add a flag to GUI ADT… .isUtilityLayer ? shrug

Maybe I can write or adjust some docs that teach about it.

I would think that it would lag in the opposite direction?

1 Like

hahaha. Is there such a thing as “lag in the opposite direction”? heh. That would be called… what? Procession? “Leading”? All in all, devin, ya just blew my mind. :slight_smile: (Wingnut schedules therapy.)

The GUI is a texture that needs to be rendered before camera will render because it is used by the cameras :slight_smile:

https://www.babylonjs-playground.com/#4AJZPU#2

It’s weird enough… that the ADT was created on the utility layer’s scene-obj.

But then… onBeforeCameraRenderObservable is where the moveToVector3 happens.

(Wingy schedules even more therapy, while tapping control-tab to see if he can sequence thru scene layers… with it). :slight_smile: Etch-A-Sketch’s and Lite-Brite’s were SO much easier! This webGL stuff… boy, I dunno. heh.

I HAVE TO go test .onAFTERcameraRenderObservable. If I’m not back in 20 minutes, send-in a hazmat team to rescue me, eh? :slight_smile:

1 Like

I know this is from a year ago but I’m working on something similar and this was very helpful for me and I managed to get it quite right BUT if you look closely the TextBlocks are kind of “shaking” when moving the camera and in my case (I also have zooming) it’s even more visible.
How can I make one textblock follow a path smoothly without shaking??
(Basically my textblock follows camera.target)
I tried all before and after renderings but I can’t solve this problem…

A repro in the playground would definitely help the community to jump on trying to solve the issue :slight_smile:

Yep, sorry :slight_smile: so:
https://www.babylonjs-playground.com/#DK2U1K#2
this is one of my 2 approaches (using a gui textblock, but as you can see it shakes -especially when zooming when camera.target is at the very center).
the other one:
https://www.babylonjs-playground.com/#513913
which works smooth uses a html div, and the downside is of course that i have a div outside my canvas and when the pointer is on the text i cannot zoom or pan

Actually, sounds to be related to precision relying on origin 0.

As a quick hackish workaround, you can try to use: var offsetOrigin = new BABYLON.Vector3(0.0001, 0.0001, 0.0001);

https://www.babylonjs-playground.com/#DK2U1K#3

I will try to dig where the precision is lost :wink:

1 Like

Thanks for the tip, at least that fixed the crazy moving when the target is on the origin.
Still, it seems strange why using the div shows no problem. After all, the projection vector is the same. There must be something I’m missing here. The one difference is that using div sets top and left in pixels while with the gui textblock i had to use percentage. Could it be that?