Help creating complex GUI

Hi Forum.

I’m newbie with 3d modeling and such, but have some experience programming, but I really need some help or ideas on how to create a replica of this:

What I have done so far:

So my idea is to create a ‘grid’ with many individual boxes, and animate them as in the playground example.
Problem that I have now is placing the text on only one side of the cube, and next how to ‘group’ them together so effects can be applied to the whole text block or row.

I was looking into the 3d gui, but I cannot see any way how would able to get that individual effect using buttons.

Any ideas on how one would go about replicating that in the video? Is the 3d gui suitable?

1 Like

In this particular case I would probably end up doing everything with a 3d scene and only use the GUI to generate my text as it sounds complex.

I bet others from the community will have way more clever ideas :slight_smile:


Hi guys. Goofin’ around… Babylon.js Playground

All gui 2d… each “tower” has a for-mesh advancedDynamicTexture (adt) atop it, with a single gui 2d buttonControl in each’s root container. (It could have been a textBlockControl, too. ButtonControls contain textBlockControls. (yawn)

The way I picture it… you’ll need 6 of these “mosaic panels”… parented together in a box shape. it all seems possible, though. The slider control “grooves” crossing multiple “towers”… should be a challenge. :slight_smile:

What a project, and what an effect. Interesting! And, umm… welcome to the forum, JD! Thanks for the brain tumor-grade challenge. heh. Delightfully painful!


Started to play using a different technique, still work to do


Use a Parent

Making mesh P a parent of mesh C changes the frame of reference for mesh C to the local axes of mesh P. Re-positioning, rotating or scaling mesh P will apply the same transformations to mesh C. Positioning, rotation and scaling of mesh C will depend on the position and orientation of the local axes of C relative to those of P.
Use a Parent - Babylon.js Documentation



I love the creativity on this thread !!! keep them coming :slight_smile:

Thank you all for the suggestions, I am going to have a look at all of them. I like the idea of placing a plane on the side of the cube to generate the text, but @ycw solution also seems good, but the text is on all the sides, not just one.
Also @Wingnut solutions looks great.

My next question would be, where could I find some texture to get the same look as in the video?

line#35 texture on top face only


Stunning! I really didn’t know all of this is even possible.

Something I did not consider yet are those ‘groves’ in the blocks. Will I need to create some custom shape to do that? Or can I apply some border magic somehow?

1 Like

By using CSG

groove box = cube - sphere - cylinder



What do you all think is the best way to go about creating the cube ‘walls’?
I was thinking to create them ‘flat’, like a cardboard box, and the rotate the walls to fit.
The 1square required to fill in the edges can be filled in afterwards

Here is a example, but rotation a bit harder than I thought!

I probably create n boxes :joy: … straight forward and least performant

Suppose there are 20x20 boxes per wall
then, the total boxes needed =

     6 * 18 * 18  // 6 * boxes per inner wall     
  + 12 * 18       // 12 * boxes per edge .. shared by two walls
  +  8 * 1        // 8 * boxes per corner .. shared by three walls

Update: here’s a demo with 2 walls (press ‘A’, ‘D’ to switch)

+1. Especially for the animation it will be 1000 times faster and convenient to do it on a modeler than as code. Even the text could be a graphic asset made on a 3D modeler. When done, you just have to use transparent meshes (can be created on a modeler too) as meshButton3d to link user interactions on it and visual animations.

Great example, but I have no idea how it works. Ill need to go through the tutorials or something

1 Like

I made some minor improvement.

Hi everyone, find my latest prototype here:

So couple of questions:

  1. How would I go about adding shadows?
  2. How can I apply the “brick” texture to the blocks with text so that they are on all sides, not just the side where the text is displayed? (hover on the text to see error)
  3. What could I do to improve performance?
  4. Where could I find some gallery of free textures and “bumpTexture”?

Apologies if the code gives you a brain-ache. This is my first 3d / babylon project, so its alot of experimenting.

Double the width of the dynamicTexture (line 165) and continue to write text as you are so it is on the left half. For a face with text set uv values for face to map left half and for blank faces use set uv values to the right half (lines 94 to 107)

For shadows, add a shadow generator and make your cubes shadow generators / shadow receivers.

For the brick texture, you can update the standard shader to only use the emissive color when the normal of a face is in a specific direction (see PG), though @JohnK offered a simpler way to do it.

Regarding performance, you should first monitor your code to see where time is spent. But there is only rendering going on, so you may be able to also use cloning for the moving cubes to help perf. You may also try to replace all the tiny cubes that don’t move by bigger cubes to cut down the number of vertices/indices, but really the scene is simple so it may not be necessary to bother too much.

Regarding assets:

1 Like

Is custom material part of the preview version or something? i used npm to install babylon, but get a error when using the custom material.

*edit: even with “Babylon.js v4.2.0-alpha.2 - WebGL2”, I get "“TypeError: BABYLON__WEBPACK_IMPORTED_MODULE_7__.CustomMaterial is not a constructor” error

**Edit: fixed error above by importing materials library, now I get “TypeError: Cannot set property material of [object Object] which has only a getter” at the “box.material = materialBox;”
Typescript needed??

Yes, comment the two occurrences of box.material = materialBox; as the instances inherit the material from the master mesh: