Text Alignment in Dynamic Textures & Edge Rendering in Transparent Meshes

I merged these 2 questions as they are both parts of the same aspect of my project. I am building an Orientation Cube similar to those in 3d applications, using the Button3D feature. Unfortunately, I couldn’t get the button to look purely white with black text so I moved my efforts toward writing text in dynamic textures, but I couldn’t for the life of me, find a way to write the text in center alignment in this case, the text always comes out a bit off-center. Is there a solution for this? Maybe a way to use the proper material in the button with black text that doesn’t disappear when unlit.

The second problem is the same part of the project is that I want black edges around the cube, like the image below.
image
So I created a cube around the buttons in order to render only its edges. The problem is, if I make the cube transparent, it only renders the outermost edges and not the ones in the center of the mesh.
image
Is there another way to achieve this? I am seriously open to suggestions. Here is the playground code with the current progress of the feature.

https://playground.babylonjs.com/#GAMVYU#16

Thanks in advance, sorry for the question pile-up

Regarding the off-centering, you should set the context.textAlign property to center and pass the coordinates of the center of the texture to draw:

https://playground.babylonjs.com/#GAMVYU#18

Regarding the other problem, as you are drawing a lot of cubes to produce the final appearance, it will be difficult to only draw some edges of those cubes and not others in a generic way… I guess the easiest way would be to create lines “by hand” that would correspond to the edges you want to show.

Using the edge renderer would work but only if you use a single cube:

https://playground.babylonjs.com/#U4JIRZ
https://playground.babylonjs.com/#GAMVYU#19

Regarding the cube that is actually what I did. There is a ‘support’ cube that I use only for rendering the edges. I disabled the collisions and added the edge rendering. the problem is that if I make the cube transparent, the lines in the middle disappear. I don’t know for sure if this is related to layers or anything of the sort.


Maybe something in this topic would help with edges Architectural isometric material style

To avoid drawing the helper cube, you can use boxMat.disableColorWrite = true and boxMat.disableDepthWrite = true, it will be a little more efficient than setting alpha = 0.5.

Also, by default, the material used to draw the lines does not write to the zbuffer. You can enable depth writing by doing boxGizmo.edgesRenderer._lineShader.disableDepthWrite = false:

https://playground.babylonjs.com/#GAMVYU#22

I’m going to add a getter to avoid accessing a private property.

2 Likes

This is why you guys call yourselves Jedi Masters. This worked like a charm, thank you very much for the help :upside_down_face:

1 Like

PR is on its way: