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.
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.
I wrote a large essay about shader and threw away. 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.
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
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.