2D rendering and scaling using the GUI


The manufacturing company I work for has selected Babylonjs as our preferred technology for 3D electrical gear drawings. While most of our gear will benefit from 3D rendering, I’m currently working on a simple 2D drawing using the GUI package (think of something like a home breaker box, where you just have a rectangular panel with switches on the left and right sides.) One of my team members had a question about the GUI and scaling, and I want to make sure I give an accurate answer. This is what he said:

“From what I’m reading, the intent of the GUI is to be a 2D overlay on a 3D scene, for something like a user interface you might see in a game, where you can see both the UI/status info and the game scene at the same time. The “texture” terminology still sounds fishy to me, I guess what they’re saying is you’re building a 2D texture image and overlaying it on the whole screen. It seems like we should be able to just generate a 3D scene with only 2D elements, and don’t allow the camera to move from the front view. But if the GUI feature works and it’s easier to use, then I guess there’s no reason not to use it. But that might mean we have to re-draw with new sizes every time the scale changes, rather than drawing 2D elements to a 3D scene and letting the graphics hardware scale it.”

I’m still new to Babylonjs and not sure how to respond, but my understanding is that he’s correct in saying the GUI package is meant to provide 2D capability within a 3D scene, and we would be better off using that for situations where all we need is some simple rectangles, rather than trying to use 3D controls and fixing the camera position. Can anyone comment on his concerns better than I can? Thanks.

Hello and welcome!

Congrats! This is an excellent choice ;D

The texture terminology is actually quite accurate here. GUI will ultimately update a real texture in memory. You are correct by saying that this can someone be created using billboarded 3d objects but it will be really more complicated than using GUI. Furtermore as GUI is simply a texture, it could be rendered as a fullscreen plane (2d mode) or used as a texture like any other texture and the used inside a material (projected mode).