How can I scaling 3 layers in y axis, and doesn't through each other

Questions
#1

Hello everyone

I have three layers and I want to scaling the layers in Y axis like the following GIF:
chrome-capture (7)
as can be seen in this website
and here is my PG: https://playground.babylonjs.com/#6XIT28#273

In my PG when I want to scaling the cube in Y axis they go through each other and I don’t want, how can I scale these three layers without going through each other.

#2

Hi @Arash_Bagheri,

I don’t think there is a solution with your current approach. If you have two faces completely overlap with each other, the rendering computation cannot decide which face to render. That’s why you see the flickering effect.

You should only use a single box. Feed the statical data for your chat as a uniform to your material. And update fragment shader based on the data you pass into.

Let me know if my answer makes any sense to you. I can give a bit more details if required.

1 Like
#3

Hi @slin Thanks for answering to my question.

to be honest, I didn’t understand what should I do with fragment shader, is it possible to explain more about it?

#4

Hi @Arash_Bagheri,

I wrote a large essay about shader and threw away. :smiley: I think there might be a simpler solution without shader involved for your problem.

I assume you want to build a chart similar to the one in GIF. You can consider building surfaces instead of composing boxes together. E.g. you can build each layer of the front and back side using irregular polygons: Irregular Polygons | Babylon.js Documentation. And then stack them together. You can even color them separately.

For top, bottom, left, right side of the final chart, you can create 4 planes.

You should be able to add these polygons and planes under a parent transform node and scale the whole group: Transform Node | Babylon.js Documentation

1 Like
#5

Thank you so much, I have the surfaces in glb format, so I should first create 4 planes and then use Transform node to connect them together, and then scale whole of them. Thank you so much for your helping :pray: :pray:

#6

Hi @Arash_Bagheri

Thank you so much, I have the surfaces in glb format

I don’t get this part. I assumed you have some raw data and you want to create a chart to visualize them.

Please see this playground I created: https://playground.babylonjs.com/#ZD60FU#8

You can see two polygons stack together. You can build front and back sides of your final box like this. I just noticed that the data in the GIF is 3 dimensional (sorry for my poor eye sight). Then you also need to build the left and right side as polygons. And the top of the final model is going to look like a terrain. You can use a ground mesh and feed your data as a heightmap into it. You can check documentation for DynamicTexture and GroundMesh.

Once you have the box composed. You can change the scale by changing the following value.

group.scaling.z = 0.5;
1 Like
#7

Thank you so much, I think this will solve my problem. :pray: :pray: :pray: :pray: :pray: