# GUI Control linkOffset issue

**URL:** <https://forum.babylonjs.com/t/gui-control-linkoffset-issue/17452>\
**Category:** Questions\
**Created:** [January 13, 2021, 2:24pm UTC](https://forum.babylonjs.com/t/gui-control-linkoffset-issue/17452 "2021-01-13T14:24:04Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jacob](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jacob/32/342_2.png) [@Jacob](https://forum.babylonjs.com/u/Jacob)\
**Post date:** [January 13, 2021, 2:24pm UTC](https://forum.babylonjs.com/t/gui-control-linkoffset-issue/17452/1 "2021-01-13T14:24:04Z")

</div>

I have a scenario whereas I will pick from a number of meshes which have different sizes. I have created an GUI advancedTexture containing a number of controls and _link it to the mesh_.

.  
Now , I want the advancedTexture to appear exactly on the right and top side of the mesh. In order to do that I need to calculate the mesh height and width which Babylon returns in Babylon units.

However both linkOffsetX and linkOffsetXInPixels use pixels as a unit of measurement and I don’t want to use pixels since meshes will have varying sizes + pixels will behave differently on ipads and mobiles.

Here is a simple demo  
[https://playground.babylonjs.com/#41IFI5#29](https://playground.babylonjs.com/#41IFI5#29)

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [January 13, 2021, 4:23pm UTC](https://forum.babylonjs.com/t/gui-control-linkoffset-issue/17452/2 "2021-01-13T16:23:26Z")

</div>

Maybe @Evgeni_Popov has a nice idea for this 🙂 (disclaimer: I am still a GUI N00b)

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [January 13, 2021, 5:28pm UTC](https://forum.babylonjs.com/t/gui-control-linkoffset-issue/17452/3 "2021-01-13T17:28:18Z")

</div>

Unfortunately you will have to update the linkOffsets manually as we do not provide other ways to move the links

The idea should be to project the mesh bounding box (with Vector3.Project). this will give you pixel informations on where the box is on your screen  
Should be easy then to move the linkOffsets

---

<div class="post-metadata">

**Author:** ![Jacob](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jacob/32/342_2.png) [@Jacob](https://forum.babylonjs.com/u/Jacob)\
**Post date:** [January 13, 2021, 7:59pm UTC](https://forum.babylonjs.com/t/gui-control-linkoffset-issue/17452/4 "2021-01-13T19:59:58Z")

</div>

Thanks for clarifying that linkOffsets are in pixels ONLY.

---

<div class="post-metadata">

**Author:** ![Matthew\_Pflueger](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/matthew_pflueger/32/18898_2.png) [@Matthew\_Pflueger](https://forum.babylonjs.com/u/Matthew_Pflueger)\
**Post date:** [October 10, 2021, 10:06pm UTC](https://forum.babylonjs.com/t/gui-control-linkoffset-issue/17452/5 "2021-10-10T22:06:45Z")

</div>

Hi Deltakosh, could you provide an example of how to use Vector3.Project? I am also trying to get the size of the mesh in pixels so I can dynamically determine (and change when the camera zooms in/out) of the linked GUI via its linkedOffsets. Unfortunately, being new at 3D and Babylon I am having trouble figuring out how to use Vector3.Project to get the size of the mesh in pixels…

Any help much appreciated!

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [October 11, 2021, 3:20pm UTC](https://forum.babylonjs.com/t/gui-control-linkoffset-issue/17452/6 "2021-10-11T15:20:01Z")

</div>

Hey @Matthew_Pflueger,

you can use Vector3.Project with the boundingBox.minimumWorld and .maximumWorld:

```auto
var min = BABYLON.Vector3.Project(minimumWorld, 
    BABYLON.Matrix.IdentityReadOnly, 
    scene.getTransformMatrix(),
    camera.viewport)

```

API doc: [Vector3 | Babylon.js Documentation (babylonjs.com)](https://doc.babylonjs.com/typedoc/classes/babylon.vector3#project)

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [October 11, 2021, 8:09pm UTC](https://forum.babylonjs.com/t/gui-control-linkoffset-issue/17452/7 "2021-10-11T20:09:31Z")

</div>

I think you forgot to call toGlobal() on the camera’s viewport, to convert it from normalized (0…1) width and height:

```auto
camera.viewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight())

```

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [October 12, 2021, 3:17pm UTC](https://forum.babylonjs.com/t/gui-control-linkoffset-issue/17452/8 "2021-10-12T15:17:26Z")

</div>

Correct (I was doing it on my phone :))