# Pick ground to add thinInstance

**URL:** <https://forum.babylonjs.com/t/pick-ground-to-add-thininstance/47687>\
**Category:** Questions\
**Created:** [January 31, 2024, 2:28am UTC](https://forum.babylonjs.com/t/pick-ground-to-add-thininstance/47687 "2024-01-31T02:28:19Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![lxq100](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lxq100/32/43689_2.png) [@lxq100](https://forum.babylonjs.com/u/lxq100)\
**Post date:** [January 31, 2024, 2:28am UTC](https://forum.babylonjs.com/t/pick-ground-to-add-thininstance/47687/1 "2024-01-31T02:28:19Z")

</div>

I try to add thinInstance. Calculating matrices is not my specialty, I hope you can help me

PG:

> **[Babylon.js Playground](https://playground.babylonjs.com/#ZVUY3G%2321)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

First: use specify model

```auto
var strMesh = ...;
var file = new File([strMesh], '1.babylon');
    
BABYLON.SceneLoader.AppendAsync('file:', file, scene).then(()=>{});

```

Second：  
create transformNode to as root parent.  
copy flatten meshes setParent (root parent) to keep position and rotation and scaling

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/2/229d16df74a5bd14ad9162bc5b5a471cd8001c9d.png)

Third:  
pick ground to add thinInstance.  
The model flattened after copying has the same effect as the original model.  
But there was a problem when calculating the matrix for effect display. It should be that the matrix calculation was wrong.  
Calculating matrices is not my specialty, I hope you can help me

```auto
let worldMat = node.computeWorldMatrix();
let p1 = pickedCenter;
pickInfo.getNormal().scaleToRef(0, p1);
p1.addInPlace(pickInfo.pickedPoint);

worldMat.invertToRef(tmpMat);

BABYLON.Vector3.TransformCoordinatesToRef(p1, tmpMat, p1);
BABYLON.Matrix.ComposeToRef(scale, quat, p1, tmpMat);

let arr = blockAllocMatrix(node);
tmpMat.copyToArray(arr, arr.length - 16);
if (arr.length === 16) {
    node.isVisible = true;
}
node.thinInstanceSetBuffer('matrix', arr, 16);

```

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [January 31, 2024, 10:41am UTC](https://forum.babylonjs.com/t/pick-ground-to-add-thininstance/47687/2 "2024-01-31T10:41:15Z")

</div>

I’m not sure to understand, the model is correctly positionned where I click with the mouse?

If the problem is that the model is not centered at the mouse location, you should simply add a translation to the matrix, which would be half the dimension of the bounding box of the mesh.

---

<div class="post-metadata">

**Author:** ![lxq100](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lxq100/32/43689_2.png) [@lxq100](https://forum.babylonjs.com/u/lxq100)\
**Post date:** [February 1, 2024, 12:57am UTC](https://forum.babylonjs.com/t/pick-ground-to-add-thininstance/47687/3 "2024-02-01T00:57:55Z")

</div>

all step 3 ,third is wrong, first second is ok.  
The problem lies in the third step  
set transformNode ceng0 to pickPosition,  
All child nodes are displayed according to the display effect before copying.

I hope you can rewrite the code in step three based on explaining the principle, especially the matrix calculation part. This is not what I am good at. Please help me.

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [February 1, 2024, 12:29pm UTC](https://forum.babylonjs.com/t/pick-ground-to-add-thininstance/47687/4 "2024-02-01T12:29:15Z")

</div>

Hello! You can simplify your code a bit by using the following technique (unfortunately I’m not able to share a playground because it is not saving, possibly because of the length of the strMesh string)

Add this on lines 61-62:

```javascript
                // copyNode.isVisible = false;
                copyNode.bakeCurrentTransformIntoVertices();

```

And inside the pickInfo node loop:

```javascript
if(node){
 const pickPoint = pickInfo.pickedPoint;
 const pointTranslation = BABYLON.Matrix.Translation(pickPoint.x, pickPoint.y, pickPoint.z);
 node.thinInstanceAdd(pointTranslation);
}

```

The bakeTransformIntoVertices part is to bake all of the translations, scales, etc of the parts of the mesh so that doesn’t interfer with positioning, and with that, you just need the translation of the picked point relative to the origin to place your meshes.

---

<div class="post-metadata">

**Author:** ![lxq100](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lxq100/32/43689_2.png) [@lxq100](https://forum.babylonjs.com/u/lxq100)\
**Post date:** [February 4, 2024, 1:16am UTC](https://forum.babylonjs.com/t/pick-ground-to-add-thininstance/47687/5 "2024-02-04T01:16:48Z")

</div>

Thank you so much, you solved my problem!

> **[Babylon.js Playground](https://playground.babylonjs.com/#ZVUY3G%2323)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![lxq100](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lxq100/32/43689_2.png) [@lxq100](https://forum.babylonjs.com/u/lxq100)\
**Post date:** [February 21, 2024, 10:03am UTC](https://forum.babylonjs.com/t/pick-ground-to-add-thininstance/47687/6 "2024-02-21T10:03:30Z")

</div>

If I add instance 3 instances using thinInstanceAdd, then which method should I use to delete the first instance?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [February 21, 2024, 12:44pm UTC](https://forum.babylonjs.com/t/pick-ground-to-add-thininstance/47687/7 "2024-02-21T12:44:53Z")

</div>

You will have to manager the matrix buffer yourself. See:

[https://doc.babylonjs.com/features/featuresDeepDive/mesh/copies/thinInstances#faster-thin-instances](https://doc.babylonjs.com/features/featuresDeepDive/mesh/copies/thinInstances#faster-thin-instances)

Note that you can pass a big buffer and set a value to `thinInstanceCount` so that only the first `thinInstanceCount` instances of the buffer are taken into account.