Mesh write on a GUI

Hello! I am having a hard time displaying my object on a GUI.
So I have a meshwriter that works well. I’ve made it to print the “test” word. But how can I print this test word on my HolographicSlate interface OR A BUTTON Is this possible? Any idea anyone?
Playground](https://www.babylonjs-playground.com/#PL752W#1519) I get a t_link not a function error each time I attempt to replace the planet phrase with my test word

Well, in short, you don’t. The GUI only takes 2D textures. Be it the 3D or 2D GUI you cannot insert a 3D model into it. The only way to do it is to parent all to a node. But then in case of a slate, hmm? sounds a bit fancy to me. Let’s ask the gui-angel cc @carolhmj

1 Like

Yes, as mawa said, the GUI lives in a completely separate world from the meshes, as it uses a 2D context: CanvasRenderingContext2D - Web APIs | MDN (mozilla.org) while the meshes live in a WebGL/WebGPU 3D context: WebGLRenderingContext - Web APIs | MDN (mozilla.org)/ GPUCanvasContext - Web APIs | MDN (mozilla.org).

You could take a screenshot of your 3D scene, and send this image data to the GUI, but doing that constantly will affect performance. If your user interface is going to be primarily composed of 3D elements, I would suggest building it entirely in scene, without the use of GUI.

2D, 3D text. I don’t mind. I just want a way to depict it on the GUI. Sorry What do you mean by parent all to a node?

So, you just want to have some text on a GUI, not necessarily 3D text? In this case you should use TextBlock: The Babylon GUI | Babylon.js Documentation (babylonjs.com)

Great suggestions. But how can I have grids like HolographicSlate that divide the meshes result

I actually what the mesh writer to display the result on the GUI

Then as I’ve explained beforehand, you have to use a screenshot. You can’t display a 3D context inside a 2D context, which is the content displayed by the HolographicSlate.

Thank you all for the clarificatiom

Using either the 3D GUI or 2D GUI for mesh, you can create an abstractMesh or transformNode and link/parent your gui (panels, containers and controls) to this node ALONG with any other mesh. This way acting on the parent will transform all of its children. Problem is in case of slate. The slate has a fancy animation algorythm that brings it to the camera and this would need to be reproduced on the meshes. The other solution would be to create your own custom ‘slate-thingy’ with an animated plane. In which case you could run the animation on your mesh or create the animation/transform directly on the parent.

Now, if it is a pseudo-3D text you want you can also use a dynamic texture and parallax occlusion.
Similar to this:

1 Like

The parallax trick is super cool, mawa! :open_mouth:

1 Like

Actually credit for the multiline version should be given to JohnK… We shall remember you :smiling_face_with_tear:

2 Likes