Rotate instances in radial array to face the center

Questions
1

Hey there!

For performance reasons, I am currently deepdiving into thin instances.
I did follow the pirate tutorial and was amazed by what the NME can do for you.
Now I played around with radial instance arrays and got stuck with the orientation
of instances. I already figured out the general rotation, but unfortunately don’t know how
to connect the instances to the rotation part in order for all of them to look at the center
of the circle that they are forming. Does anyone have an idea??? Thank you!!!

PG: https://playground.babylonjs.com/#CSMDRY#22

1 Like
2

@Evgeni_Popov is the master and creator of thinInstances and might be able to help.

1 Like
3

You may try RadialCloner - RadialCloner | Babylon.js Documentation
Example - https://playground.babylonjs.com/#1MYQ3T#36

3 Likes
4

Thank you for the tip. Will reach out to him and see what he says.

5

Wow, didn’t know there is such a thing as matrix cloner. Will have a look into it. Is it as performant as thin instancing? Thank you…

6

Why not simply generating the right matrices at start? Like:

https://playground.babylonjs.com/#CSMDRY#39

1 Like
7

Hey Evgeni!
Thanks a bunch. This is exactly what I was looking for.
Unfortunately, I couldn’t create this matrix by myself.
I think it will take me the weekend to get through the code
to completely understand it.
Cheers!!!

8

Note that I cheated, I simply copy/pasted the implementation of TransformNode.setDirection!

2 Likes
9

Almost all information is accessible on the net,
but to know where to look is the knowledge of today! :slight_smile:

1 Like
10

Hey Engeni!
One more question regarding thinInstances. I am trying to change colours and scaling of the instances, using shaders. I already had a look at the forum where you have been commenting on thinInstances and shaders. What I now tried was your shadercode with the includes, but unfortunately without any luck. Do I need to use different includes if I have an array of matrixes?

Effect.ShadersStore[‘ttVertexShader’] = precision highp float; // Attributes attribute vec3 position; attribute vec2 uv; // Uniforms uniform mat4 viewProjection; // Varying varying vec2 vUV; #include<instancesDeclaration> void main(void) { #include<instancesVertex> gl_Position = viewProjection * finalWorld * vec4(position, 1.0); vUV = uv; } ;

    Effect.ShadersStore['ttFragmentShader'] = `
        precision highp float;
        varying vec2 vUV;
        void main(void) {
            gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
        }
    `;
1 Like
11

sphere.material = new ShaderMaterial(“shader”, scene, {
vertex: “tt”,
fragment: “tt”,
},
{
attributes: [“position”, “normal”, “uv”],
uniforms: [“world”, “worldView”, “worldViewProjection”, “view”, “projection”, “viewProjection”]
});

12

here is your PG I am referencing to…
https://playground.babylonjs.com/#MT2SFV#1

13

Hey there, the Matrix.Compose function can be used to easily set the scaling, rotation, and position of the matrix, like on line 75 in the updated PG below, and for the color you can register and set a custom attribute like on line 93.

And it’s prob good to note, depending on what you’re after, that you could comment out the shader and just let the default material work it’s magic (which supports the color attribute), like this PG.

Also, the thin instances documentation has more info and example playgrounds. :slightly_smiling_face:

https://playground.babylonjs.com/#MT2SFV#8

1 Like
14

Hey Blake!
Thank you for your quick reply. It does make sense, and I already got a single color working.
I didn’t know that one has to create a buffer. Now that I know, it starts to make more sense.
However, what I am eventually after is the following PG, where I can use a shader to generate
dynamic movement, scaling and colours of multiple instances.
https://playground.babylonjs.com/#CSMDRY#43

1 Like
15

Ooh, that is a bit different, using NME instead of ShaderMaterial. Unfortunately I haven’t used NME much so IDK how to add a custom attribute to that NME material, so I’ll leave that for someone experienced with NME to answer. As for setting the colors thou, it might be easier to set them one at a time like this for example. :slightly_smiling_face:

https://playground.babylonjs.com/#CSMDRY#45

16

Hey Blake!
OMG, thats a very clever solution. Regarding the NME vs Shader, I would like to use a shader in the end.
The NME was only for showing what I want to achieve. The following example already shows one row of instances with a shader material, but I am still missing the other 4 rows. Do you have an idea?
https://playground.babylonjs.com/#MT2SFV#11

1 Like
17

The index in matrix.copyToArray is wrong and you don’t allocate enough room in bufferMatrices:

https://playground.babylonjs.com/#MT2SFV#12

2 Likes
18

Holy Moly, So much to learn… Thanks again Evgeni for your clear and prompt answer.
But Instances and Martices are a hard thing to get my head around. Good that
Jedi Masters like you are around to help the young skywalkers to find their way in
the Babylon Universe. :slightly_smiling_face: