Pick ground to add thinInstance

Questions
1

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

PG:

First: use specify model

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
image304×525 7.44 KB

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

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);
2

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.

3

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.

4

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:

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

And inside the pickInfo node loop:

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.

1 Like
5

Thank you so much, you solved my problem!

6

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

7

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

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.