How to make the GUI stop shaking and drag smoothly

[murongming]

When I use the CreateFullscreenUI and linkWithMesh it to the mesh, when I drag the lens, I can see the position change of the GUI. It will perform multiple calculations to make it look like shaking. Is there any way to make it move smoothly?https://playground.babylonjs.com/#XCPP9Y#20

[RaananW]

What device are you testing it with? This playground seem to run smoothly on my computer.

[kestrelpi]

I can see what Murongming is talking about - I’m on desktop chrome.

If you try zooming in -

Looks like because it uses pixel coordinates possibly that is causing it?

[RaananW]

I sadly can’t reproduce this. The movement is very smooth when I move the camera

I noticed you are using 4.0.3. Any reason you are not trying on latest stable?

[kestrelpi]

I tried in the latest stable and still the same -

I think this is what murongming is referring too?

[RaananW]

seems like it! Mind if I ask what the FPS when you move the camera?

[kestrelpi]

FPS is 60, the gif is just has a low frame-rate

To be honest it’s pretty hard to notice unless you are really looking

[RaananW]

When you say zooming in you mean the browsers actual zoom feature? CTRL-Space? I wouldn’t recommend using it

But I guess I get what you are saying. This is probably because of some sort of floating point rounding or the conversation between 2D and 3D space. Maybe @msDestiny14 can elaborate more

Just to be sure, @murongming - is this really the issue?

[murongming]

Hello, I didn’t zoom in. I found that the location of the GUI will be calculated many times when I move. When I stop moving, the location of the GUI is still updated. It looks inertial，When the ground is too large, it will be more obvious。Pay attention to its position

[murongming]

yes ，That’s what I’m talking about

[msDestiny14]

Every time you move the camera it should calculate a new position because it is linking to a mesh in 3D space. I wonder if change will look more dramatic based on how far away the camera is to the object? .

[Youmyin]

Babylon.js Playground

Here it is, a more dramatic example. There are many objects in my scene, they all need to add highlight layers and GUI, at the same time, the whole scene needs to be rotated continuously. However, rotation causes very badly shake. Is there any way to optimize it?

[mawa]

Hi,
I believe you would need a new approach to this. It’s unlikely it will work like this in a near future (my opinion only).
There’s been a fair amount of discussions in this forum around this. Solutions around dynamicTexture and shader seem to be the best fit.
I particularly like this (fairly recent) approach to it created and shared by our gui-angel @carolhmj

When drawing a large number of objects in a GUI.Container and performing container movement, the performance becomes very sluggish

Please keep in mind that GUI utilizes a 2D Canvas CanvasRenderingContext2D - Web APIs | MDN (mozilla.org) which can really struggle with drawing lots of elements. In a scenario like this, I highly recommend using 3D planes and textures/shaders instead, as they can take advantage of instancing ( Instances | Babylon.js Documentation (babylonjs.com)) to achieve much better performance. You can see an example of such here, where I compare the use of GUI vs the use of a Node Material Shader for dyna…

Other topics that might be of interest to you:

Perf comparison of different strategies for creating mesh UIs

Testing PG - https://playground.babylonjs.com/#GJ69CX#60 No specific question; posting this to get any feedback from the team and for the community’s general information in case it helps. I wanted to look at the performance of various strategies for creating a UI attached to a mesh. My simple test case has two disc icons attached to a simple disc mesh. For my use case, I needed to be able to independently show or hide each of the icons. The strategies I looked at were as follows: Using me…

Efficient way to render large number of text labels

Hi @kzhsw Thanks for the suggestion, have given it a try earlier but was not able to merge the meshes, getting merge related errors I need text to always face camera (like billlbord mode) which I was not able to achieve. PG : https://playground.babylonjs.com/#PL752W#1511

Custom GUI labels performance test

Not perfect with much space for improvement but it renders with 60 fps on my machine for 200 objects. [Screenshot 2021-01-21 at 10.59.22] https://playground.babylonjs.com/#WC6GET#6 Couple of takes from this exercise: GUI lacks performance, so choosing between GUI vs dynamic textures for mesh material, later is way better choice. Setting up billboard mode with pivot for planes is far from intuitive for corner rotation pivots. Easier alternative is using “proxy” pivot plane, unfortunately …

Slow GUI rendering

Gives me an opportunity to ask you: Where do we stand with this cloning of ADT? At some point during the ‘Gui Adventure’ event, deltakosh and patrickryan seemed to wanting to challenge each other to whom would bring it first… Never heard of it again since then Faced any issues? Didn’t bring the expected results?

I hope any of this will help you find your solution/make decision Meanwhile, have a great day

[Takemura]

I do get way better performance when projecting manually to screen space, instead of using linkWithMesh:

Babylon.js Playground

Just toggle boolean to test fps of both approaches. Nevertheless, as @mawa said there are better approaches.

[mawa]

@Takemura

projecting manually to screen space

Oh, thank you. A nice work-around approach (taking advantage of BJS’s ‘versatility’ )
I like your thinking …but I guess you know that by now Have an awesome day

[Youmyin]

Thank you for giving me some useful rerefence, i’ll have a look, have a nice day too!

[Youmyin]

Thank you for your thinking!